bottom_nav_layout
?It is a quick flutter app layout for building an app with a bottom nav bar. You can get an app with fluent behavior running in 15 lines of code.
bottom_nav_layout
?Add the following to your pubspec.yaml
file.
dependencies:
bottom_nav_layout: ^3.0.10
import 'package:bottom_nav_layout/bottom_nav_layout.dart';
void main() => runApp(MaterialApp(
home: BottomNavLayout(
// The app's destinations
pages: [
(_) => Center(child: Text("Welcome to bottom_nav_layout")),
(_) => SliderPage(),
(_) => Center(child: TextField(decoration: InputDecoration(hintText: 'Go..'))),
],
bottomNavigationBar: (currentIndex, onTap) => BottomNavigationBar(
currentIndex: currentIndex,
onTap: (index) => onTap(index),
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.linear_scale), label: 'Slider'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
],
),
),
));
Done. You have a complete, working application.
Name | Description | Default |
---|---|---|
pages |
The app's destinations. | N/A |
bottomNavigationBar |
The bottom navbar of the layout. | N/A |
savePageState |
When false, the pages are reinitialized every time they are navigated. (Material behavior). When true, the pages are initialized once and hidden/shown on navigation. (Cupertino behavior) | false |
lazyLoadPages |
When false, pages are created in the beginning. When true, pages are created when they are navigated for the first time. | false |
pageStack |
Navigation stack that remembers pages visited. Enhances back button management on Android. | ReorderToFrontPageStack for Android, NoPageStack for iOS |
extendBody |
Passed to Scaffold.extendBody . |
false |
resizeToAvoidBottomInset |
Passed to Scaffold.resizeToAvoidBottomInset . |
true |
pageTransitionData |
Animation configuration for page transitions. | null |
The state changes you made in a page such as scroll amount, sub-navigation, form inputs etc. are preserved. You can enable it as per Cupertino Design Guidelines or disable it as per Material Design Guidelines
savePageState: true, // Default is false
The layout offers the option to lazily create the pages using the passed in page builders. When lazyLoadPages
is set to true, the pages are not created until they are navigated to for the first time. This is useful when a non-initial page;
lazyLoadPages: true, // Default is false
Documentation | Example |
---|---|
documentation | back stack example, programmatic navigation example |
The layout remembers the order of pages navigated and when back button is pressed, navigates back to the previously navigated page.
// Default is ReorderToFrontPageStack for Android and NoPageStack for iOS.
pageStack: ReorderToFrontPageStack(initialPage: 0),
There are many useful page back stack behaviors implemented such as reorder-to-front and replace-except-first. You can also implement your own.
You also specify the initialPage
inside PageStack
.
To change the current page programmatically, you can use
// Navigate to a page.
myPageStack.push(2);
// Navigate back to the previous page on the stack.
myPageStack.pop();
// PageStacks inherit ListQueue.
var top = myPageStack.peek();
var length = myPageStack.length;
Documentation | Example |
---|---|
- | example |
You can set an transition animation between pages. Create your own AnimationBuilder
or use one of the built in ones.
These animation work with both bottom navbar and Android back button.
// Default is null.
pageTransitionData: PageTransitionData(
builder: PrebuiltAnimationBuilderBuilders.zoomInAndFadeOut,
duration: 150,
direction: AnimationDirection.inAndOut,
),
Documentation | Example |
---|---|
documentation | example |
The layout maintains a flat navigation pattern.
Figure: Flat Navigation
Benefits
Navigator
per page is trivial to set up.To do this, the page should have a Navigator
widget that use the passed in GlobalKey
as its key.
pages: [
(navKey) => Navigator(
key: navKey,
initialRoute: "/",
onGenerateRoute: (routeSettings) => MaterialPageRoute(
builder: (context) {
if (routeSettings.name == "/")
return OverviewPage();
else if (routeSettings.name == "/details")
return DetailsPage();
else
return Center(child: Text("Unknown route."));
},
),
),
(_) => SliderPage(),
(_) => SliderPage(),
],
Documentation | Example |
---|---|
documentation | example |
So far, we only worked on Material bottom nav bar. The layout supports any bottom bar.
Example usage of flutter_snake_navigationbar
:
bottomNavigationBar: (currentIndex, onTap) => SnakeNavigationBar.color(
currentIndex: currentIndex,
onTap: (index) => onTap(index),
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.linear_scale), label: 'Slider'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
],
),
Any feedback is appreciated. 🚀🚀
I love talking about code. Find me on discord at ViraL#2868
If you like this work, please consider 👍 the package and ⭐ the repo. It is appreciated.
If you have queries, feel free to create an issue.
If you would like to contribute, feel free to create a PR.