flutteruser-interfacemobile-developmentflutter-widgetflutter-design

I want to put height constraints on a Flexible widget


My screen has three widgets :

  1. First one is a ListView of widgets, the number of widgets can be incremented with a button. I want the ListView to take only the required space that's why I wrapped it in Flexible, but I don't want it to exceed the height of 266. (If it takes more than 266px, it becomes scrollable).
  2. Second one is a widget that will take all the remaining space, it's wrapped in Expended.
  3. Third one is just a button with defined height.

The code is something like :

Scaffold(
  body : Column(
           children:[
               Flexible(child: Widget1()),
               Expanded(child: Widget2()),
               Button(),
          ])
)

I tried wrapping the Flexible in a ConstrainedBox and gave it a max height of 266, but the Widget1 took all the 266 height.

In short, I want Widget1 to take the required space, but it can't exceed 266. Anyone has a solution for this?


Solution

  • In listview add the property shrinkwrap: true, and wrap the Widget1 with container with BoxConstraints, maxheight: 266.

    class UpdateListViewExample extends StatefulWidget {
      const UpdateListViewExample({Key? key}) : super(key: key);
    
      @override
      State<UpdateListViewExample> createState() => _UpdateListViewExampleState();
    }
    
    class _UpdateListViewExampleState extends State<UpdateListViewExample> {
      List list = [];
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
              body: Column(children: [
            Flexible(
              child: Container(
                constraints: const BoxConstraints(
                  maxHeight: 266,
                ),
                color: Colors.grey,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Widget1(list: list),
                ),
              ),
            ),
            const Expanded(child: Widget2()),
            ElevatedButton(
              onPressed: () {
                list.add(list.length + 1);
                setState(() {});
              },
              child: const Text("Click Me"),
            ),
          ])),
        );
      }
    }
    
    class Widget1 extends StatelessWidget {
      const Widget1({Key? key, required this.list}) : super(key: key);
    
      final List list;
    
      @override
      Widget build(BuildContext context) {
        return ListView(
          shrinkWrap: true,
          children: [
            for (var item in list)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 40,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: Text(
                    '$item',
                    style: const TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              )
          ],
        );
      }
    }
    
    class Widget2 extends StatelessWidget {
      const Widget2({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    }