Flutter - Can't have nested list view in column without using fixed height Container

Question

I am trying to create a nested list view each wrapped by a column. The parent widget (widget 1) has a column with a vertical list view and each list view item (widget 2) is a column with a horizontal list view. So far I am able to get it to render with the following code where in widget 2 I wrap the horizontal list view with a Container and a specified height. I am trying to use not use a fixed height, however, so I have tried using Flexible and Expanded instead of Container but both of these result in the unbounded height constraints error.

class Widget1State extends State<Widget1> {
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Flexible(
            child: Scrollbar(
              child: ListView.builder(
                padding: const EdgeInsets.all(8.0),
                itemCount: getWidgets().length,
                itemBuilder: (BuildContext context, int index) {
                  return Widget2();
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class Widget2State extends State<Widget2> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 30,
          child: Scrollbar(
            child: ListView.builder(
                padding: const EdgeInsets.all(8.0),
                scrollDirection: Axis.horizontal,
                itemCount: getWidgets2().length,
                itemBuilder: (BuildContext context, int index) {
                  return Text('widget');
                },
             ),
          ),
        ),
      ],
    );
  }
}

As you can see below this is how it currently works where the exercises is the parent list view and the sets are the child list view. Currently because the sets list is in a Container it takes up space when it's empty and also doesn't size to whatever makes up the list item. I want to change the sets list view so that it only takes up the space is needed by the list item.

Answer 1

Given that Listview takes all avaible height if you dont provide one it will result in failure. In order to proovide alternative solutions I need you especify how is the design that you want. Coudl you give more details?

---- Edited:

This solution was found here: Flutter: Minimum height on horizontal list view

You can change the widget 2 from Listview to SingleChildScrollView:

Widget build(BuildContext context) {
return Scaffold(
  body: ListView(
    children: [
      const Padding(
        padding: EdgeInsets.all(8.0),
        child: TextField(
          decoration: InputDecoration(label: Text('Workout Name')),
        ),
      ),
      ...List.generate(
          exercises, // number of exercises
          (index) => Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  DropdownButton<String>(items: const [
                    DropdownMenuItem(child: Text('Select Exercise'))
                  ], onChanged: (value) {}),
                  SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      child: Row(
                        children: List.generate(
                            sets, //number of sets
                            (index) => Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Text('Set $index'),
                                    Text('reps'),
                                    Text('rest')
                                  ],
                                )),
                      )),
                  TextButton.icon(
                      onPressed: () {
                        addSet();
                      },
                      icon: const Icon(Icons.add),
                      label: Text('Set'))
                ],
              ))
    ],
  ),
  bottomNavigationBar: IconButton(
      onPressed: () {
        addExercise();
      },
      icon: const Icon(Icons.add)),
);

} I've tried this code and works as you need, without setting the height of the 'Sets' scrollview.

I want to point the use of the bottomNavigationBar to the AddExercise button, instead of a Column>Listview structure. Separating the button in the bottomNavBar you can use the body atribute freely. You want to use Flutter default widgets when posible.