Flutter – Custom BottomBar
App Bar is one of the most popular things that we see in most of the apps. This App bar is used to show options such as a menu, profile, and settings to navigate to different screens. It is one of the most efficient ways to communicate with the app. In this article, we are going to see how to implement a Custom App Bar in the Flutter app.
Follow the steps to implement Custom App Bar in our app Flutter App:
Step 1: Navigate to main.dart() file and return Material App()
First, we have declared MyApp() in runApp in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme as primaryColorSwatch and given the color green. Then we have given our first screen of or slider app in the home: BottomBar()
Step 2: Design the Bottom Navbar
Now we have declared BottomNavbar in which we have given color as white. After that, we have created a container of a specific height. In that container, we have given 4 IconButtons() wrapped in a Row() Widget. And given the main Axis Alignment. In the state class, we set the state where the current Index is equal to the index. Now to every Icon button we have declared different icons and declared onPressed method to each of them.
Complete Source Code:
Complete Source Code for First Screen: