-1
The problem is below the two images, and the whole code is at the end.
Hello, I’m trying to create a list of widgets horizontally, as shown in the following image
I get a little big, sorry, but anyway, I did it this way:
ListView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.only(top: 10),
children: <Widget>[
Container(
width: 100,
color: Colors.blue,
),
Container(
width: 100,
color: Colors.grey,
),
Container(
width: 100,
color: Colors.yellow,
),
Container(
width: 100,
color: Colors.white,
),
Container(
width: 100,
color: Colors.white,
),
],
),
And it stayed like this: 
So I researched how to put a divider and I found Listview.separated, and it went like this :
ListView.separated(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext content, int index){
return ListTile(
title: Text('item $index')
);
},
separatorBuilder: (BuildContext context, int index) => Divider(),
itemCount: 8
),
But, I keep getting error of size 'hasSize' and I can’t find how to fix, I researched and talk that has to give size to the column, but I can’t do it, I’ll put all the code down here (I put a comment on the part that has to see):
class _HomeScreenState extends State<HomeScreen> {
@override
void setState(fn) {
// TODO: implement setState
super.setState(fn);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(147, 112, 219, 1),
bottomNavigationBar: _bottomApp(),
floatingActionButton: _floactActionButton(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(15, 35, 15, 0),
child: Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Seja bem Vindo",
style: GoogleFonts.salsa(
textStyle:
TextStyle(color: Colors.white, fontSize: 20)),
),
Text(
"Jefferson Henrique",
style: GoogleFonts.salsa(
textStyle: TextStyle(
color: Colors.black, fontSize: 20,
fontWeight: FontWeight.bold
)
),
),
],
),
),
Icon(Icons.person, color: Colors.white, size: 55,)
],
),
),
Container(
padding: EdgeInsets.fromLTRB(15, 25, 0, 0),
//color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
"O que deseja?",
style: GoogleFonts.salsa(
textStyle: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
//Apartir daqui
Container(
height: 100,
child: ListView.separated(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext content, int index){
return ListTile(
title: Text('item $index')
);
},
separatorBuilder: (BuildContext context, int index) => Divider(),
itemCount: 8
),
)
],
),
),
],
),
);
}
}
Widget _bottomApp() {
return BottomAppBar(
shape: CircularNotchedRectangle(),
color: Color.fromRGBO(74, 39, 146, 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(
Icons.home,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.list,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.map,
color: Colors.white,
),
onPressed: () {},
),
],
),
);
}
Widget _floactActionButton() {
return FloatingActionButton(
backgroundColor: Color.fromRGBO(74, 39, 146, 1),
child: Icon(
Icons.add,
size: 30.0,
),
onPressed: () {},
);
}