2020 is an extraordinary year. As an Android developer, I realized the saturation of the Android market with the advent of Flutter, not to mention that I, as a lazy dog, was forced to learn, so I recently learned about Flutter. I plan to make some functional Flutter projects, on the one hand, which is convenient for learning and on the other hand, for my later development of Flutter project. The article written by Dog brother is suitable for beginners and their compatriots who want to get started quickly. Without further ado, let’s make the bottom navigation bar of APP today.

Common bottom navigation bar

Please look at the effect drawing first

So without further ado, let’s get to the code

Let’s start by looking at the main.dart code

void main() { runApp(MyApp()); } class MyApp extends StatelessWidget {@override Widget build(BuildContext context) { Return MaterialApp(title: "bottom navigation bar of Flutter ", home: Scaffold(// appBar: appBar (// title: Text(" bottomNavigationBar of a Flutter "), //), bottomNavigationBar: BottomNavigationWidget(),), theme: themedata.light (),); }}Copy the code

The main() method is the main entrance of the Flutter program. The Scaffold Component is used together with the Scaffold component to build the APP framework, such as AppBar, Bottle NavigationBar, etc. Here we mainly do the bottom navigation bar; The Scaffold component has the bottomNavigationBar property which is used to set the bottomNavigationBar. If you want to customize a Scaffold component, you write a class that implements the bottomNavigationBar. The final value is assigned to the property bottomNavigationBar. Since everything in a Flutter is a component, it is also called the development of a Flutter as a component. Here we customize the BottomNavigationWidget component.

Here is the code for our custom BottomNavigationWidget component.

import 'package:flutter/material.dart'; import 'bottom_navigation/home_screen.dart'; import 'bottom_navigation/email_screen.dart'; import 'bottom_navigation/pages_screen.dart'; import 'bottom_navigation/airplay_screen.dart'; // The bottom navigation bar,  class BottomNavigationWidget extends StatefulWidget { @override _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState(); } class _BottomNavigationWidgetState extends the State < BottomNavigationWidget > {/ / / final definition of the navigation bar at the bottom of the font color _BottomNavigationColor = Colors.blue; Int _currentIndex = 0; Widget List<Widget> mList = List(); /// override the initState() method in the StatefulWidget abstract class for the initialization operation @override void initState() {/// use List.. The add() method is easier to write than the mlist.add () method. add(HomeScreen()) .. add(EmailScreen()) .. add(PagesScreen()) .. add(AirplayScreen()); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: mList[_currentIndex], bottomNavigationBar: [BottomNavigationBarItem(icon: icon (Icons). Home, color: BottomNavigationBar(BottomNavigationBarItem(icon: icon (Icons). _BottomNavigationColor, ), title: Text( "home", style: TextStyle(color: _BottomNavigationColor), )), BottomNavigationBarItem( icon: Icon( Icons.email, color: _BottomNavigationColor, ), title: Text( "email", style: TextStyle(color: _BottomNavigationColor), )), BottomNavigationBarItem( icon: Icon( Icons.pages, color: _BottomNavigationColor, ), title: Text( "pages", style: TextStyle(color: _BottomNavigationColor), )), BottomNavigationBarItem( icon: Icon( Icons.airplay, color: _BottomNavigationColor, ), title: Text( "airplay", style: TextStyle(color: _BottomNavigationColor),))], ///item index assigned currentIndex: _BottomNavigationColor, ///item click onTap: (int index) {setState(() {/// currentIndex = index; }); },),); }}Copy the code

Since the components we need to define are mutable, we inherit the StatefulWidget component. Here is a brief description of the differences between the StatelessWdiget component and the StatefulWidget component.

  • StatelessWdiget component: a stateless component that reuses some component.
  • StatefulWidget components: stateful components, data processing, logical processing.

Here we put the general App use of the bottom navigation bar function to achieve, by the way, with the effect of zoom after selected.

Custom irregular bottom navigation bar

Same old rule. Renderings first

As we APP makers know, many apps have this style at the bottom of the navigation bar. It is difficult to develop with Flutter native, but it is very convenient to develop with Flutter. The FloatActionButton float button is incorporated into the bottom navigation bar of a Flutter.

So here we’re going to use the same entry code that we started with, just the component that we’ve implemented with our bottomNavigationBar property and we’re going to define it separately, and we’re going to write this custom bottomNavigationBar as a separate component.

import 'dart:ui'; import 'package:flutter/material.dart'; import 'flutter/BottomAppBarDemo.dart'; import 'flutter/BottomNavigationWidget.dart'; import 'study/study.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget {@override Widget build(BuildContext context) { Return MaterialApp(title: "bottom navigation bar of Flutter ", home: Scaffold(// appBar: appBar (// title: BottomNavigationBar: BottomAppBarDemo(), BottomAppBarDemo(),), theme: ThemeData.light(), ); }}Copy the code

Let’s look at the custom BottomAppBarDemo component.

import 'package:flutter/material.dart'; import 'bottom_navigation/each_view.dart'; Class BottomAppBarDemo extends StatefulWidget {@override _BottomAppBarDemoState createState() => _BottomAppBarDemoState(); } class _BottomAppBarDemoState extends State<BottomAppBarDemo> { List<Widget> _eachView; int _index = 0; @override void initState() { super.initState(); _eachView = List(); _eachView .. add(EachViewState("Home")) .. add(EachViewState("email")) .. add(EachViewState("pages")) .. add(EachViewState("airplay")); } @override Widget build(BuildContext context) { return Scaffold( body: _eachView[_index], floatingActionButton: FloatingActionButton(/// / response to the event push to generate a new page, i.e. click the middle button to jump to the page onPressed: () {navigator.of (context).push(MaterialPageRoute(Builder: (BuildContext Context) {return EachViewState(" This is the new page "); })); }, /// Long press tooltip: "The most beautiful ", child: Icon(Icons. Add, color: colors.white,),), bottomNavigationBar: BottomAppBar(color: Colors.white, shape: CircularNotchedRectangle(), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ IconButton( icon: Icon(Icons.home), color: Colors.blue, onPressed: () {setState(() {// manually assign index _index = 0;});},), IconButton(icon: icon (icon.email), color: color.blue, onPressed: () { setState(() { _index = 1; }); }, ), IconButton( icon: Icon(Icons.av_timer), color: Colors.blue, onPressed: () { setState(() { _index = 2; }); }, ), IconButton( icon: Icon(Icons.dashboard), color: Colors.blue, onPressed: () { setState(() { _index = 3; }); },)],),), / / / will FloatActionButton with together the BottomAppBar floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, ); }}Copy the code

The main FloatActionButton component used here is integrated with the bottom navigation bar:

/ / / will FloatActionButton with together the BottomAppBar floatingActionButtonLocation: floatingActionButtonLocation. CenterDocked,Copy the code

This is the realization of two different bottom navigation bar functions of Flutter. In the future, Mr. Doggie will post the realization and principle of various functions of Flutter at any time. It is already late at night. Give dog’s article a star, after all, this is dog’s first partial Flutter article! Code if there are unreasonable places can also be pointed out to communicate with each other!