Error when listviewBuilder scrollDirection is horizontal

Question

I got this very simple code, but somehow I get an error when I set scrollDirection to Axis.horizontal

I invoke this widget in Page that has MaterialApp and Scaffold widgets.

What I tried is wrapping ListView.builder with expanded, I removed all widgets besides Container and ListView.builder

Here is code:

class CalendarPage extends StatelessWidget {
  List<String> hoursList = ['00:00', '00:30', '01:00'];

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25), topRight: Radius.circular(25))),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            TextLabel('Choose preferred date of meeting'),
            ListView.builder(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemCount: hoursList.length,
                itemBuilder: (context, i) {
                  return Text(hoursList[i]);
                })
          ],
        ),
      ),
    );
  }
}

thank you in advance

Answer 1

Wrap your ListView inside Expanded or Flexible widget. refer below code:

Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(25),
            topRight: Radius.circular(25),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              TextLabel('Choose preferred date of meeting'),
              Expanded(
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    itemCount: hoursList.length,
                    itemBuilder: (context, i) {
                      return Text(
                        hoursList[i],
                      );
                    }),
              )
            ],
          ),
        ),
      ),

Result screen->

Answer 2

You must wrap with a container your Listview and define height value.

    class CalendarPage extends StatelessWidget {
  List<String> hoursList = ['00:00', '00:30', '01:00'];

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25), topRight: Radius.circular(25))),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            TextLabel('Choose preferred date of meeting'),
            Container(
              height: 300,
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: hoursList.length,
                  itemBuilder: (context, i) {
                    return Text(hoursList[i]);
                  }),
            )
          ],
        ),
      ),
    );
  }
}