Flutter Footer Widget
A new Flutter package which helps developers in creating Customizable Scrollable Footer for both Android and IOS Apps.
See Package here on pub store.
In this tutorial i am going to show you how you can create your own custom Footer Widget in flutter using the package i created called footer.
Getting Started
To use this package :
- add the dependency footer to your pubspec.yaml file.
dependencies:
flutter:
sdk:flutter
footer:Imports
To be able to use the FooterView class you need to import the footer classes from the library
import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';FooterView Class
The flutter footer uses a component called FooterView. The FooterView Component takes 3 arguments which are as follows:
- children : this is a Scrollable List of Widgets
- footer : Takes a Footer Component that takes a Customizable Widget e.g a Container Widget
- flex : This takes an integer from 1–10. This flex the footer space of the screen with 2 being the default.
NB: The children and footer parameters are mandatory. See Example
The Footer Component takes four arguments with one being Mandatory ie child Widget ,see Fig below above.
Simple Example
In this Example i will show you how you can simply use the FooterView Widget inside a Scaffold body.
- Note that when the children list is not overflowing the Footer will be fixed right at the bottom of the Page.
- If there is overflow the whole page will become scrollable and the footer wont be fixed . See gif image below.
import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: new Text('Footer View Example')
),
body: new FooterView(
children:<Widget>[
new Padding(
padding: new EdgeInsets.only(top:200.0),
child: Center(
child: new Text('Scrollable View'),
),
),
],
footer: new Footer(
child: Padding(
padding: new EdgeInsets.all(10.0),
child: Text('I am a Customizable footer!!')
),
),
flex: 1, //default flex is 2
),
);
}
So as you can probably see that by default the widget align the footer at the bottom of the page.,Just like any other footer.
To change the space taken by the Customizable Footer Widget you would have to change and play around with flex property in the FooterView from 1–10 . With default being flex 2 which take only 20% of the page from bottom up meaning if you assign flex: 1 it takes 10% ,flex: 3 , 30% and so on.
Now it time to make our footer more appealing. In this section im going to add a row of icons and the Text field. See image of code below
So on the above code i have replaced the Text child with the Padding . The Padding has a Row with a Card each containg an icon. I have hidden the other two Containers with card since they use the same code, just to reduce the space.
You can also probably notice that inside the Footer widget i have also added padding and backgroundColor which are the default anywere probably wont change anything if you dont.
See image output of the above code.
Last but not least i will add a bunch of text and padding just below our Row of icons just to make it more alive. See code below
Scrollable FooterView Demo
Below is a Full Example
import 'package:flutter/material.dart';
import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';
void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget {
// This widget is the root of your application.
static Map<int, Color> color = {
50:Color.fromRGBO(4, 131, 184, .1),
100:Color.fromRGBO(4, 131, 184, .2),
200:Color.fromRGBO(4, 131, 184, .3),
300:Color.fromRGBO(4, 131, 184, .4),
400:Color.fromRGBO(4, 131, 184, .5),
500:Color.fromRGBO(4, 131, 184, .6),
600:Color.fromRGBO(4, 131, 184, .7),
700:Color.fromRGBO(4, 131, 184, .8),
800:Color.fromRGBO(4, 131, 184, .9),
900:Color.fromRGBO(4, 131, 184, 1),
};
//MaterialColor myColor = MaterialColor(0xFF162A49, color);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Footer',
theme: ThemeData(
primarySwatch: MaterialColor(0xFF162A49, color),
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: FooterPage(),
);
}
}class FooterPage extends StatefulWidget {
@override
FooterPageState createState() {
return new FooterPageState();
}
}class FooterPageState extends State<FooterPage> { @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text('Flutter Footer View',style: TextStyle(fontWeight:FontWeight.w200),)
),
drawer: new Drawer(),
body: FooterView(
children: <Widget>[
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Padding(
padding: EdgeInsets.only(top:50,left: 70),
child: new Text('Scrollable View Section'),
)
],
),
],
footer: new Footer(
child: new Padding(
padding: EdgeInsets.all(5.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children:<Widget>[
new Center(
child:new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
height: 45.0,
width: 45.0,
child: Center(
child:Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
),
child: IconButton(
icon: new Icon(Icons.audiotrack,size: 20.0,),
color: Color(0xFF162A49),
onPressed: () {},
),
),
)
),
new Container(
height: 45.0,
width: 45.0,
child: Center(
child:Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
),
child: IconButton(
icon: new Icon(Icons.fingerprint,size: 20.0,),
color: Color(0xFF162A49),
onPressed: () {},
),
),
)
),
new Container(
height: 45.0,
width: 45.0,
child: Center(
child:Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
),
child: IconButton(
icon: new Icon(Icons.call,size: 20.0,),
color: Color(0xFF162A49),
onPressed: () {},
),
),
)
),
],
),
), Text('Copyright ©2020, All Rights Reserved.',style: TextStyle(fontWeight:FontWeight.w300, fontSize: 12.0, color: Color(0xFF162A49)),),
Text('Powered by Nexsport',style: TextStyle(fontWeight:FontWeight.w300, fontSize: 12.0,color: Color(0xFF162A49)),),
]
),
),
)
),
floatingActionButton: new FloatingActionButton(
elevation: 10.0,
child: new Icon(Icons.chat),
backgroundColor: Color(0xFF162A49),
onPressed: (){
}
),
);
}
}
Summary
- Footer package which allows you to create you own customizable footer.
- The package gives you the default background on where the footer , and the rest of the content on the page is to be placed.
Please feel Free to add Comments below, and if you have any queries and feel free to raise issues on the Github Repo
All contributions and pull requests from the github repo are welcome.
Created and Maintained by
- Author: Tafadzwa Lameck Nyamukapa :
- Email: [tafadzwalnyamukapa@gmail.com]
- Open for any collaboration and Remote Work!!
- Happy Fluttering!!
