Implement a bottom navigation bar with flutter

Nowadays, when you open an App, such as wechat or Alipay, you will see a bottom navigation bar to switch to different display pages. I’m going to do that with the Flutter today.

---

In the Flutter, basically everything is a component. The Flutter already has a bottom navigation component — the BottomNavigationBar — so using the Flutter to achieve bottom navigation is a simple matter of knowing how to use it.

1. First, use the IDE to implement the general structure of the code

import 'package:flutter/material.dart';

class BottomNav extends StatefulWidget {
  @override
  _BottomNavState createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  @override
  Widget build(BuildContext context) {
    returnContainer( ); }}Copy the code

I used VS Code and have a plugin to install the Flutter and DART. To implement the above structure, just type stful in the editor and a prompt will appear, as shown in the figure below:

The VS Code editor has dart support that is very friendly and has plenty of tips to take advantage of when coding. The only drawback is the lack of the Flutter inspector.

2. Implement the build method for _BottomNavState

class _BottomNavState extends State<BottomNav> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bottom Navigation Demo')),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
        ],
        fixedColor: Colors.green,
        currentIndex: 0,
        onTap: (intidx) {} ), ); }}Copy the code

At this point, using the emulator to see the effect is as follows:

3. Add the interaction

At this point, we’ve achieved a general effect, but you’ll notice that clicking on the icon at the bottom of the toggle has no effect. Now, add the interaction to the bottom navigation.

• Define variable _currentIndex, and replace the value of BottomNavagationBar’s currentIndex with _currentIndex

int _currentIndex = 0;
Copy the code

• BottomNavagationBar onTap method

void onItemTapped(intidx) { setState(() { _currentIndex = idx; })}Copy the code

At this point, the bottom navigation bar is complete.

For the complete code, see bottom_navagation_bar.dart

The last

I’ve been learning flutter and will be documenting my progress on Github.

Questions welcome to put forward, we discuss together, progress together.

The resources

BottomNavigationBar class