Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a 3 row Flutter layout with one dynamic height row

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

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

enter image description here

like image 291
Tobonaut Avatar asked Dec 14 '18 13:12

Tobonaut


2 Answers

 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
       ],
     )
like image 129
Andrey Turkovsky Avatar answered Oct 17 '22 02:10

Andrey Turkovsky


enter image description here

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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
like image 39
Miguel Ruivo Avatar answered Oct 17 '22 01:10

Miguel Ruivo