On tap, display value at a different location - dart

Question

I'm trying to create a word game. I have a local json file where I'm retrieving data from. I'm able to retrieve the data and display it on the first row. What I'm trying to do is on tap of one block (on the first row), get the value and display it in order on the second row.
I'm able to retrieve the value but I can't display it on the second row. I tested this by printing the value in the console.
Updated code:
body: new Container(
child: new Center(
// Use future builder and DefaultAssetBundle to load the local JSON file
child: new FutureBuilder(
future: DefaultAssetBundle
.of(context)
.loadString('data_repo/starwars_data.json'),
builder: (context, snapshot) {
var newData = JSON.decode(snapshot.data.toString());
List<Widget> listMyWidgets() {
List<Widget> list = new List();
for (var i = 0; i < newData.length; i++) {
var word = newData[i]['word']["letters"];
for (var n = 0; n < word.length; n++) {
list.add(new Text(word[n]['letter']));
}
}
return list;
}
List letters = [];
for (int i = 0; i < listMyWidgets().length; i++) {
var listMyWidgetsToString =
listMyWidgets()[i].toString();
var listWidgetToList =
listMyWidgetsToString.replaceAll('Text("', "");
var completeWordList =
listWidgetToList.replaceAll('")', "");
letters.add(completeWordList);
}
return new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
new Column(children: [
new Image.asset(newData[0]['image'])
]),
new GridView.count(
shrinkWrap: true,
crossAxisCount: listMyWidgets().length,
children: new List.generate(
listMyWidgets().length,
(i) => new GestureDetector(
onTap: () {
final int wordLength =
5; //this is a ref to the lenght of the word so you do not keep adding tiles
setState(() {
(letters.length + 1) <=
wordLength * 2
? letters.add(letters[i])
: null;
});
},
child: new Card(
elevation: 5.0,
color: Colors.brown[500],
child: new Padding(
padding:
const EdgeInsets.all(8.0),
child: new Center(
child:
new Text(letters[i])),
),
),
)),
),
],
),
);
},
itemCount: newData == null ? 0 : newData.length,
);
}),
),
)

Answer 1

It depends on how you want to structure your data. In this example, I just add the pressed letters into the same array for the word and it will do the job.
Note that I keep a reference (which you may add to your JSON) which is the initial length of the word so it stops adding tiles when all letters are used.
Also you need to have a StatefulWidget in order for this to work
Probably there is a better a way to handle this but that is what I managed to do atm.
class GridViewWords extends StatefulWidget {
#override
GridViewWordsState createState() {
return new GridViewWordsState();
}
}
class GridViewWordsState extends State<GridViewWords> {
List letters = [
"A",
"M",
"C",
"I",
"C"
];
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new GridView.count(
shrinkWrap: true,
crossAxisCount: 5,
children: new List.generate(letters.length, (i)=>
new GestureDetector(
onTap: (){
final int wordLength =5; //this is a ref to the lenght of the word so you do not keep adding tiles
setState((){
(letters.length+1)<=wordLength*2? letters.add(letters[i]):null;
});
},
child: new Card(
elevation: 5.0,
color: Colors.brown[500],
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Center(child: new Text(letters[i])),
),
),
)),
),
);
}
}