Tobonaut
Tobonaut

Reputation: 2485

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

Upvotes: 6

Views: 9737

Answers (2)

Miguel Ruivo
Miguel Ruivo

Reputation: 17736

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

Upvotes: 7

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

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

Upvotes: 12

Related Questions