Flutter web - setting height to 100% and not 100vh - flutter

Question

In HTML creating a page that is divided into 2 columns that span 100% of the screen height is easy
<div id="row">
<div id="column1" style="width:75%; height:100%"></div>
<div id="column2" style="width:25%; height:100%"></div>
</div>
Using Flutter this seems more complicated than it should be, i tried to achieve the above in a couple of ways: (The page's outline is CustomScrollView -> SliverToBoxAdapter -> Row -> Columns)
Using MediaQuery to set the columns' height as deviceSize.height. This failed because as the left column got bigger than the right column, the right column did not expand in size to match.
Using Expanded or Flexible (tight or loose) to try and expand the height. This did not work.
My question is how do i achieve 100% height and not 100vh height in Flutter web?
Edit:
This illustrates the problem, the right column is not expanding in size to match the left column.
CustomScrollView(
slivers: <Widget>[
SliverFillRemaining(
child: Container(
color: Colors.purple,
child: SingleChildScrollView(
child: Row(
children: <Widget>[
Container(
color: Colors.blue,
child: Column(
children: <Widget>[
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
],
),
),
Container(
color: Colors.yellow,
child: Column(
children: <Widget>[Text("test")],
),
),
],
),
),
),
),
],
);

Answer 1

Not sure if this is what you want. But based on your statement I think you are looking for two column layout as in here and as shown below in the image.
Following is the code for the same. You can adjust the flex value in the Expanded widget to acquire the required screen width ratio. but if you want to adjust the width each columns like using a drag handle or so, then this alone wont suffice.
import 'package:flutter/material.dart';
class FullHeightDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
color: Colors.red,
child: Center(
child: Text(
'Column-1',
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
),
),
),
),
Expanded(
flex: 1,
child: Container(
child: Container(
color: Colors.teal,
child: Center(
child: Text(
'Column-2',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
),
),
)
],
));
}
}
Specifying the height using MediaQuery inside a Scrollable widget could help
Following code places the columns inside a SingleChildScrollableView widget and specifies the height of the container based on MediaQuery to achieve the same. Will this help.? The LayoutBuilder is only there to show that the using the height from its constraints could also lead to error since in this case its height is also infinite.
import 'package:flutter/material.dart';
class FullHeightDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: LayoutBuilder(
builder: (context, constraints) {
var size = MediaQuery.of(context).size;
return Container(
child: Row(
children: <Widget>[
Container(
height: size.height,
// height: constraints.maxHeight,
width: constraints.maxWidth / 2,
color: Colors.red,
child: Center(
child: Text(
'Column 1',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
Container(
color: Colors.green,
height: size.height,
// height: constraints.maxHeight,
width: constraints.maxWidth / 2,
child: Center(
child: Text(
'Column 2',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
)
],
),
);
},
),
);
}
}