How to create a Listview.Separated correctly

Question

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: () {},
  );
}

Answer 1

You’re looking to use a ListView horizontal, so you need to make the necessary adjustments:

ListView.separated(
  itemCount: 25,
  scrollDirection: Axis.horizontal,
  separatorBuilder: (BuildContext context, int index) => VerticalDivider(),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      width: 40,
      child: Text('item $index'),
    );
  },
)

Explanation

The ListTile is prepared to be used in a ListView vertically, so he gives some problems when using the horizontal list.