Display each element of list on new column - dart

Question

I have a local json file that I'm able to retrieve all the information I need. However, I can't seem to display it like I prefer. I have a list called list and would like to display each element (each letter) as a column so I can display it with a padding and change the font. I'm trying to create a game similar to word connect.
import 'dart:convert';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
#override
MyAppState createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
List data;
#override
Widget build(BuildContext context) {
final title = 'Basic List';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text("Load local JSON file"),
),
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;
}
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[index]['image'])
]
),
new Row(
children:listMyWidgets()
)
],
),
);
},
itemCount: newData == null ? 0 : newData.length,
);
}),
),
)
));
}
}
Something similar to this:

Answer 1

Ah, I think what you are asking about is GridView.
class GridViewWords extends StatelessWidget {
List letters = [
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k"
];
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
children: new List.generate(letters.length, (i)=>
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])),
),
)),
),
);
}
}