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?
See Question&Answers more detail:
os