How to layout these widgets in Flutter?

user_13139718 0
Viewed 56

enter image description here

I'm developing a desktop app using Flutter, which have three widgets as above, a scrollable widget, an expended widget with a min-width, and a fixed-width widget. Notice that, the first widget is a horizontal scroll widget, so its width depends on its contents.

I know the whole width, but to set the max-width of the scrollabe widget, I need to know the min-size of the Expanded widget and the width of the fixed-width widget.

As a newbie of Flutter, I really have no idea how to layout these widgets. Andbody help!

flutter layout
2 Answers

Few ways of providing space like providing flex on Flexiable/Expnaded widget, using LayoutBuilder/MediaQuery or just provide Expanded one of it to get available space.

You can test this widget

return Scaffold(
  body: LayoutBuilder(
    // in case of needed
    builder: (context, constraints) {
      return Row(
        children: [
          SizedBox(
              width: constraints.maxWidth * .6,
              child: ListView.builder(
                itemBuilder: (context, index) => ListTile(
                  tileColor: index.isEven ? Colors.red : Colors.deepPurple,
                ),
              )),
          //or just use Expanded for available width
          Expanded(
            child: Container(
              // width:constraints.maxWidth * .4-100,
              // constraints: BoxConstraints(
              //   minWidth: 200,
              //   // constraints.maxWidth * .6 - 100,
              //   maxWidth: constraints.maxWidth * .4 - 100,
              // ),
              color: Colors.cyanAccent,
              child: Column(
                children: [
                  Text("an Expamed with min 2idth"),
                ],
              ),
            ),
          ),
          Container(
            width: 100,
            height: 200,
            color: Colors.red,
            child: Text("Fixed-width widget"),
          )
        ],
      );
    },
  ),
);
user_101571270

You can use a row and use containers with constrains to achieve this layout. For example.

Row(
 children:[
   Container(
     constrains: BoxConstrain(
       maxWidth: MediaQuery.of(context).size.width*0.5
     ),
     child: SingleChildScrollView ()
   ),
   Expanded(
     child : Container(
       constrain : BoxConstrain (
         minWidth : MediaQuery.of(context).size.width*0.2
       )
     )
   ),
   SizedBox(
    width: MediaQuery.of(context).size.width*0.3,
   )
 ]
)
user_171690370
Related