How to create Header/Footer/Main layout in Flutter

Question

I'm Working on creating the attached layout in Flutter. While I create something that works it is really complicated and ugly (code-wise). I would like suggestions on how to create it?

NOTE: I only wish to create it with standard layouts (Row/Column/Center/ etc..) I don't wish to use widgets like BottomNavigationBar.

Answer 1

You can do it like this, (pls read the commends in the code)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //You should use `Scaffold` if you have `TextField` in body.
      //Otherwise on focus your `TextField` won`t scroll when keyboard popup.
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            //Header Container
            Container(
              padding: const EdgeInsets.all(8.0),
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text("Header"),
            ),

            //Body Container
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(horizontal: 30.0),
                child: Column(
                  children: <Widget>[
                    Container(
                      color: Colors.red,
                      height: 200.0,
                      alignment: Alignment.center,
                      child: Text("Content 1"),
                    ),
                    Container(
                      color: Colors.green,
                      height: 300.0,
                      alignment: Alignment.center,
                      child: Text("Content 1"),
                    ),
                    //TextField nearly at bottom
                    TextField(
                      decoration: InputDecoration(hintText: "Enter Text Here"),
                    ),
                  ],
                ),
              ),
            ),

            //Footer Container
            //Here you will get unexpected behaviour when keyboard pops-up. 
            //So its better to use `bottomNavigationBar` to avoid this.
            Container(
              padding: const EdgeInsets.all(8.0),
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text("Footer"),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

Try Column with three children, Header and Footer have a specific size and Content occupies the remaining of the space.

Column(
            children: [
              Container(height: 100, child: HeaderWidget),
              Expanded(child: ContentWidget),
              Container(height: 100, child: FooterWidget),
            ]

Scroll will be applied on the Content.