The released package here on pubstore A new Flutter package which helps developers in creating Customisable Footer for both Android and IOS Apps.
To use this package :
- add the dependancy to your pubspec.yaml file.
dependencies:
flutter:
sdk:flutter
footer:The flutter footer uses a component called FooterView. The FooterView Component takes three 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 interger 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
FooterView(
children: <Widget>[
... //this is a Scrollable List of Widgets
],
footer : Footer( //this takes the Footer Component which has 4 arguments with one being mandatory ie the child
child: Container(), //This take a Cusstomisable Widget eg Container, Column e.t.c
... //See Description Below for the other arguments of the Footer Component
),
flex: 2 //this take an interger that ranges from 1-10 with 2 being the default for the Footer Area
)The Footer Component takes four arguments with one being Mandatory ie child Widget ,see Fig below.
Footer(
child: Container(), //The child Widget is mandatory takes any Customisable Widget for the footer
backgroundColor : Colors.grey.shade200 // defines the background Colors of the Footer with default Colors.grey.shade200
padding: EdgeInsets.all(5.0),// Takes EdgeInsetsGeometry with default being EdgeInsets.all(5.0)
alignment: Alignment.bottomCenter //this is of type Aligment with default being Alignment.bottomCenter
)After installing the footer package remember the imports
import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';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: Text('I am a Customizable footer!!'),
padding: EdgeInsets.all(10.0),
),
flex: 1, //default flex is 2
),
);
}
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 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)),),
]
),
padding: EdgeInsets.all(5.0),
)
),
floatingActionButton: new FloatingActionButton(
elevation: 10.0,
child: new Icon(Icons.chat),
backgroundColor: Color(0xFF162A49),
onPressed: (){
}
),
);
}
}
I Welcome and i encourage all Pull Requests
- Author: Tafadzwa Lameck Nyamukapa :
- Email: [tafadzwalnyamukapa@gmail.com]
- Open for any colleboration and Remote Work!!
- Happy Fluttering!!
MIT License
Copyright (c) 2020 Tafadzwa Lameck Nyamukapa
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.