persistent_bottom_nav_bar 1.1.0 persistent_bottom_nav_bar: ^1.1.0 copied to clipboard
A DO ALL persistent bottom navigation bar for flutter. It includes a total of 8 nav bar styles in addition to being optionally platform specific.
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
import 'screens.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Persistent Bottom Navigation Bar example project',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PersistentTabController _controller;
@override
void initState() {
super.initState();
_controller = PersistentTabController(initialIndex: 0);
}
List<Widget> _buildScreens() {
return [HomeScreen(), HomeScreen(), HomeScreen(), HomeScreen()];
}
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Icon(Icons.home),
title: ("Home"),
activeColor: Colors.blue,
inactiveColor: Colors.grey,
isTranslucent: false,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.search),
title: ("Search"),
activeColor: Colors.teal,
inactiveColor: Colors.grey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.message),
title: ("Chat"),
activeColor: Colors.deepOrange,
inactiveColor: Colors.grey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.settings),
title: ("Settings"),
activeColor: Colors.indigo,
inactiveColor: Colors.grey,
),
];
}
@override
Widget build(BuildContext context) {
return PersistentTabView(
controller: _controller,
items: _navBarsItems(),
screens: _buildScreens(),
showElevation: false,
isCurved: true,
backgroundColor: const Color(0xFFEBEEF1),
iconSize: 26.0,
navBarStyle:
NavBarStyle.style8, // Choose the nav bar style with this property
onItemSelected: (index) {
print(index);
},
);
}
}