dart - Creating a Sticky Site Footer

Question

I have not been able to locate any documentation for creating footer nav bars with Flutter/Dart. I know that "crossAxisAlignment: CrossAxisAlignment.end" can be used to pull content to the bottom of a column. However, I'm not sure how to render a site footer that sticks to the bottom of the screen. There are various solutions in flex and css grid, but not clear on what implementation would look like in this platform.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override

  Widget build(BuildContext context) {

    Widget siteLogo = new Container(
      padding: const EdgeInsets.only(top: 100.0),
      child: new Image.asset(
        'images/logo.png',
        width: 180.0,
        height: 180.0,
      ),
    );

    Widget titleTextSection = new Container(
      padding: const EdgeInsets.only(left: 80.0, right: 80.0, top: 30.0, bottom: 20.0),
        child: new Text(
        ''' Welcome to The Site''',
            textAlign: TextAlign.center,
        style: new TextStyle(
          fontSize: 35.0,
          fontWeight: FontWeight.w500,
        ),
      ),
    );

    Widget subtitleTextSection = new Container(
      padding: const EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
      child: new Text(
        '''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet Donec imperdiet.''',
        textAlign: TextAlign.center,
        style: new TextStyle(
            fontSize: 15.0,
            fontWeight: FontWeight.w400
        ),
      ),
    );


//    footer
    Column signInLink(String label) {

      return new Column(
        mainAxisAlignment: MainAxisAlignment.center,

        children: [
          new Container(
            child: new Text(
              label,
              style: new TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w400,
                  color: const Color(0xFFf735e9)
              ),
            ),
          ),
        ],
      );
    }


    Column existingAccountLink(String label) {

      return new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Container(
            child: new Text(
              label,
              style: new TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w400,
                  color: const Color(0xFFeceff1)
              ),
            ),
          ),
        ],
      );
    }

    Widget footer = new Container(
      height: 50.0,
      decoration: new BoxDecoration(color: Colors.black),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          existingAccountLink('Already have an account?'),
          signInLink('SIGN IN'),
        ],
      ),
    );

    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Scaffold(
        body: new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage('images/backgroundimg.jpg'),
              fit: BoxFit.cover,
            ),
          ),
          child: new ListView(
            children: [
              siteLogo,
              titleTextSection,
              subtitleTextSection,
              footer,
            ],
          ),
        )
      ),
    );
  }
}

As you can see, I am currently using ListView to layout the widgets. The only thing I can think of right now is to put the whole ListView in a single column, crossAxisAlign to End so everything gets pulled down, and then style each widget relative to the footer. There must be a better way though?

Answer 1

Since you are using Scaffold, you can use bottomNavigationBar to have a 'sticky' bottom widget. (And potentially use BottomNavigationBar if you want to)

new Scaffold(
  appBar: new AppBar(title: new Text("Title")),
  body: new ListView.builder(
    itemBuilder: (context, index) {
      return new ListTile(
        title: new Text("title $index"),
      );
    },
  ),
  bottomNavigationBar: new Container(
    height: 40.0,
    color: Colors.red,
  ),
);

Alternatively your

The only thing I can think of right now is to put the whole ListView in a single column

is not a bad idea at all. That's how things works in flutter. Although MainAxisAlignement.end is not the right way to do it.

You could achieve the same layout as with bottomNavigationBar without a Scaffold, using a Column this way :

new Column(
  children: <Widget>[
    new Expanded(
      child: new ListView.builder(
        itemBuilder: (context, index) {
          return new ListTile(
            title: new Text("title $index"),
          );
        },
      ),
    ),
    new Container(
      height: 40.0,
      color: Colors.red,
    ),
  ],
),