sz_fancy_bottom_navigation 0.1.4 sz_fancy_bottom_navigation: ^0.1.4 copied to clipboard
An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customisable..
import 'package:sz_fancy_bottom_navigation/sz_fancy_bottom_navigation.dart';
import 'package:flutter/material.dart';
import 'second_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey bottomNavigationKey = GlobalKey();
PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Fancy Bottom Navigation"),
),
body: PageView(
controller: _pageController,
children: <Widget>[
_getPage(0),
_getPage(1),
_getPage(2),
],
),
bottomNavigationBar: FancyBottomNavigation(
pageController: _pageController,
tabs: [
TabData(
iconData: Icons.home,
title: "Home",
onclick: () {
final FancyBottomNavigationState fState = bottomNavigationKey
.currentState as FancyBottomNavigationState;
fState.setPage(2);
}),
TabData(
iconData: Icons.search,
title: "Search",
onclick: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => SecondPage()))),
TabData(iconData: Icons.shopping_cart, title: "Basket"),
],
initialSelection: 1,
key: bottomNavigationKey,
gradient: LinearGradient(colors: [
Color.fromRGBO(253, 110, 106, 1),
Color.fromRGBO(255, 198, 0, 1)
]),
),
drawer: Drawer(
child: ListView(
children: <Widget>[Text("Hello"), Text("World")],
),
),
);
}
_getPage(int page) {
switch (page) {
case 0:
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("This is the home page"),
RaisedButton(
child: Text(
"Start new page",
style: TextStyle(color: Colors.white),
),
color: Theme.of(context).primaryColor,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => SecondPage()));
},
),
RaisedButton(
child: Text(
"Change to page 3",
style: TextStyle(color: Colors.white),
),
color: Theme.of(context).accentColor,
onPressed: () {
final FancyBottomNavigationState fState = bottomNavigationKey
.currentState as FancyBottomNavigationState;
fState.setPage(2);
},
)
],
);
case 1:
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("This is the search page"),
RaisedButton(
child: Text(
"Start new page",
style: TextStyle(color: Colors.white),
),
color: Theme.of(context).primaryColor,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => SecondPage()));
},
)
],
);
default:
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("This is the basket page"),
RaisedButton(
child: Text(
"Start new page",
style: TextStyle(color: Colors.white),
),
color: Theme.of(context).primaryColor,
onPressed: () {},
)
],
);
}
}
}