Adding words to the list in the correct order

Solution 1:

Put this code in _HomePageState.

static String mySentence = "My cat is black";

  static List<String> correctWords = mySentence.split(" ");

  static List<String> shuffleWords = [...correctWords]..shuffle();


  List<String> answerWords = [];

  List<Widget> shuffleWidgetList = [];
  List<Widget> answerWidgetList = [];

  generateShuffleWidgets() {
    for (int i = 0; i < shuffleWords.length; i++) {
      shuffleWidgetList.add(shuffleWordWidget(shuffleWords[i],true));
    }
  }

  @override
  void initState() {
    super.initState();
    generateShuffleWidgets();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              flex: 2,
              child: Container(
                color: Colors.blue,
                child: Center(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: answerWidgetList,
                  ),
                ),
              )),
          Expanded(
            child: Container(
              color: Colors.green,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: shuffleWidgetList,
              ),
            ),
          ),
          SizedBox(
            height: 50,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: InkWell(
                child: Center(child: Text("Check")),
                onTap: () {
                  if (IterableEquality().equals(correctWords, answerWords)) {
                    print("correct");
                  } else {
                    print("wrong");
                  }
                  print("correct list: $correctWords");
                  print("answer list: $answerWords");
                },
              ),
            ),
          )
        ],
      ),
    );
  }

  shuffleWordWidget(String word,bool visible) {
    return Visibility(
      visible: visible,
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: InkWell(
          child: Container(
            color: Colors.white54,
            child: Padding(
              padding: const EdgeInsets.all(4.0),
              child: Text(
                word,
                style: TextStyle(fontSize: 12),
              ),
            ),
          ),
          onTap: () {
            setState(() {
              //shuffleWidgetList.remove(shuffleWordWidget(word));
              int i = shuffleWords.indexOf(word);
              shuffleWidgetList[i]=shuffleWordWidget(word,false);
              //not necessary remove. Look at Problem 1.a
              answerWidgetList.add(answerWordWidget(word));
              answerWords.add(word);
            });
          },
        ),
      ),
    );
  }

  answerWordWidget(String word) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: InkWell(
        child: Container(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.all(4.0),
            child: Text(
              word,
              style: TextStyle(fontSize: 12),
            ),
          ),
        ),
        onTap: () {
          setState(() {
            int i = shuffleWords.indexOf(word);
           // shuffleWidgetList.insert(i,shuffleWordWidget(word)); //Problem 1.b
            shuffleWidgetList[i]=shuffleWordWidget(word,true);
            int y = answerWords.indexOf(word);
            answerWidgetList.removeAt(y); //Problem 2
            answerWords.remove(word);
          });
        },
      ),
    );
  }

I added a visibility detector which is triggered with a bool value. I used the shuffleWords list to get the index of the widget and hid it by changing the bool to false. Similarly answerWords can be used for removing widgets from answerWidgetList. As the widget from answerWidgetList is removed therefore we don't need visibility widget there.

Or if shuffleWordWidget is replaced with this then Visibility() is not needed and the image in the question is obtained.

  shuffleWordWidget(String word, bool visible) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: InkWell(
        child: Container(
          color: visible == true ? Colors.white54 : Colors.grey,
          child: Padding(
            padding: const EdgeInsets.all(4.0),
            child: Text(
              word,
              style: TextStyle(
                  fontSize: 12,
                  color: visible == true ? Colors.black : Colors.transparent),
            ),
          ),
        ),
        onTap: () {
          if (visible == true) {
            setState(() {
              //shuffleWidgetList.remove(shuffleWordWidget(word));
              int i = shuffleWords.indexOf(word);
              shuffleWidgetList[i] = shuffleWordWidget(word, false);
              //not necessary remove. Look at Problem 1.a
              answerWidgetList.add(answerWordWidget(word));
              answerWords.add(word);
            });
          }
        },
      ),
    );
  }