List builder versus for loops - flutter

Question

I've got a piece of code that -- works! So, not asking for debug help.
I'm three days into learning date and mostly positive, but sometimes hard to find working code examples of things i'm trying to do. So, lots of trial and error. My best advice is to set the background color on every widget to something bold (yellow, green, blue) to help troubleshoot design/layout issues.
But, I read a lot about how to implement something like this: retrieve json data from an API, iterate through it to create a dynamic list of widgets using Future<>. My example is pure flutter web at this time.
The problem is - many sites suggested using List Builder also and for the life of me I could not get it to work. It kept overflowing the bottom of the browser and I could not find any way to extend it. I used a "for Model in List" loop and it worked fine.
So, my question is - if i give you working code, can you suggest a better approach/implementation?
Widget build(BuildContext context) {
return FutureBuilder<List<Menurender>>(
future: fetchMenu(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.none &&
snapshot.hasData == null) {
//print('project snapshot data is: ${projectSnap.data}');
return Container();
}
return Container(
width: MediaQuery.of(context).size.width,
//color: Colors.yellow,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * .80,
child: SingleChildScrollView(
child: Column(children: [
for (Menurender menu in snapshot.data)
Column(children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${menu.weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${menu.dayOfMonth} ${menu.monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)),
)),
),
),
],
))
],
)
])
])),
),
],
),
);
});
}
The actual code working is here so you can see what i'm trying to accomplish:
my test build in progress:
https://flavorboxstorage.z23.web.core.windows.net/#/
actual company wordpress site:
https://www.flavorboxsaigon.com/

Answer 1

Writing a for loop inside your widget tree makes life difficult for Flutter when rebuilding widgets and might affect your performance. You should be able to just use a ListView.builder like this:
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${snapshot.data[index].weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'
),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${snapshot.data[index].dayOfMonth} ${snapshot.data[index].monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'
),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)
),
)
),
),
),
],
)
)
],
)
]
);
}
)

Answer 2

if you want to use for loop you can just do it like this
ListView(
children: <Widget>[
for(var x=0; x<snapshot.data.length;x++)
Container(
child: Column(children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${menu.weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${menu.dayOfMonth} ${menu.monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)),
)),
),
),
],
))
)
]
)
if you want ListView.builder
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return Container(
child: Column(children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${menu.weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${menu.dayOfMonth} ${menu.monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)),
)),
),
),
],
))
)
]
);
}
)
but for me I make use of map as child of Listview