I need to design a screen that shows a different widget (selectedWidget) depending on which button is selected. Problem is that the content is dynamic and I have to use ListView.builder for all the APIs. And ListView.builder only works when the Row containing listview is wrapped in Expanded widget. I want to have two buttons just below my ListView, which I'm not able to achieve due to the Expanded widget which covers up the entire Column in which the ListView is present.

The code gives the basic structure which I've been using. selectedWidget is the ListView.builder widget which will be selected according to the FlatButton selected. Also the Column which contains the selectedWidget has dynamic height. It should adjust according to the size of the listview, so I cannot define a fixed height or even a maxHeight. I can only give minHeight here. And the two buttons below my ListView should be right below my ListView and take the width of the Column with flex 3.

I've also tried disabling the scroll for ListView and using SingleChildScrollView, but then my two buttons below the ListView also start scrolling, which I don't want. I need them to be static on the screen and only the ListView should scroll.

I need a solution for the above problem. I need a workaround for this Expanded widget which doesn't let me align my buttons right below my listview and gives white space. Please share if there is any alternative to ListView.builder because I don't think I can use ListView.builder without the Expanded widget. I've tried every possible structure with ListView and Expanded widget.

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
    children:[
      Expanded(
          child: Row(
          Expanded(flex: 2,
            child: Column(
                children: [
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                ]
            )
           ),
          Expanded(flex: 3, 
            child: Column(
                children: [
                    Expanded(selectedWidget),
                    Row(children: [FlatButton(), FlatButton()], )
                ]
            )
          ),
      )
      )
    ],);
  }

}


Solution 1: yellowgray

Maybe you can use Flexible and set shrinkWrap: true, inside ListView. The following 2 buttons may not need Expand widget after that.

child: Column(
  children: [
    Flexible(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) => Text(index.toString()),
        itemCount: 6,
      ),
    ),
    Row(
      ... // 2 Buttons