I have currently problems to create a basic 3-row'ish page layout in Flutter.
Two of the rows should have a fixed height and the remaining one should take the rest of the page's height.
What would be the fitting Widget structure? I guess the Expanded
one should be a part of it?
Pseudo XAML
<RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="75" />
</RowDefinition>
Wireframe
Current status
// Gets the fixed top column.
static Row _topBackgroundColumn = new Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(20),
child: Image(
image: AssetImage("assets/animation-bird-1.png"),
height: 50,
alignment: AlignmentDirectional.topStart,
)
)
],
);
static Container _contentContainer = new Container(
alignment: Alignment.center,
child: Center(
child: Text("bla")
),
);
// Gets the fixed, image-heavy bottom column.
static Container _bottomBackgroundColumn = new Container(
child:
Image(
image: AssetImage("assets/background-bottom.png"),
repeat: ImageRepeat.repeatX,
height: 50,
alignment: Alignment.bottomCenter,
)
);
static Container _pageContainer = new Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.down,
children: <Widget>[
_topBackgroundColumn, // Container with an image
_contentContainer, // Container with a label
_bottomBackgroundColumn, // Container with an image
],
),
);
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.down,
children: <Widget>[
_topBackgroundColumn, // Container with an image
Expanded(child: _contentContainer), // Container with a label
_bottomBackgroundColumn, // Container with an image
],
)
class MyColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
alignment: Alignment.center,
height: 50.0,
width: double.infinity,
color: Colors.yellow,
child: Text(
'Anything want on top',
textAlign: TextAlign.center,
),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
child: Text(
'Anything want in the middle',
textAlign: TextAlign.center,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
alignment: Alignment.center,
height: 75.0,
width: double.infinity,
color: Colors.blue,
child: Text(
'Anything want in the bottom',
textAlign: TextAlign.center,
),
),
),
],
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With