How to layout these widgets in Flutter? - flutter

Question

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!

Answer 1

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"),
)
],
);
},
),
);

Answer 2

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,
)
]
)