preface

Google’s launch of Flutter, a new high-performance cross-platform (Android, ios) rapid development framework, has attracted the attention of many developers in the industry. After I touched Flutter, I realized that this is really a good thing. Good things have to be shared, right?

Today I want to share with you the realization of the bottom navigation function. I think that Flutter conveys a minimalist design, where a component focuses on itself and achieves low coupling and high cohesion. Therefore, this article will only focus on the implementation of the bottom navigation function and introduce the layout idea.

What will you learn

• How to split the parts
• How to construct the Flutter layout
• How do I create bottom navigation

Let me show you the effect first.

Set up the layout

Step 1: Draw the layout view

Breaking the layout down into basic elements:

• What elements make up a page
• Which controls change as a result of user interaction and which do not

Here we need to think about the question, what is the scope of refresh?

Those of you who have used mobile apps know that you can click the bottom navigation bar, and the bottom will not be refreshed, but only the top part will be refreshed. So we can split the whole page into two parts.

The first section is the page section in the orange box, and the second section is our navigator section at the bottom. The navigator is always the same, so the navigator should be at the parent widget level among them.

Step 2: Start building the bottom navigation

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _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),
              )),
        ],
        currentIndex: _currentIndex,
        onTap: (intindex) { setState(() { _currentIndex = index; }); },),); }}Copy the code

The Scaffold layout we use here provides a bottomNavigationBar property by default, We’re going to give it a BottomNavigationBar here, and we’re going to put four BottomNavigationBar items in that BottomNavigationBar. Each item is a navigation button at the bottom.

The items in the BottomNavigationBar are an array, so there will be subscripts. The BottomNavigationBar gives us a currentIndex property, which is 0 by default, so let’s go in and look at this method.

 /// The index into [items] of the current active item.
  final int currentIndex;
Copy the code

CurrentIndex represents the index currently selected in items.

The BottomNavigationBar also provides an onTap method. Let’s look at this method again.

  /// The callback that is called when a item is tapped.
  /// The widget creating the bottom navigation bar needs to keep track of the
  /// current index and call `setState` to rebuild it with the newly provided
  /// index.
  final ValueChanged<int> onTap;
Copy the code

When an item in the bottom navigation is clicked, it calls this method and passes in the index value of the current item, which changes focus to the item on the current index.

Let’s look at the results:

Create switch page

And then we’re going to create four pages, and we’re going to map four items, and we’re only going to put one because the four pages are so similar. It is recommended that you create a DART file for each of the four pages.

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HOME'),),); }}Copy the code

Each page is a Scaffold layout with an appBar.

Displays the page on the interface

Let’s go back to the bottom navigation control. Since we control the jump through the currentIndex variable, pages must also rely on this variable for synchronization. Here we use a List to correspond to items.

List<Widget> pages = List<Widget>();
  final _bottomNavigationBarItemColor = Colors.teal;
  int _currentIndex = 0;

  @override
  voidinitState() { pages .. add(HomeScreen()) .. add(EmailScreen()) .. add(AlarmsScreen()) .. add(ProfileScreen()); }Copy the code

Then let the body part of the Scaffold layout of our BottomNavigation be the page in List.

body: pages[_bottomNavigationIndex],
Copy the code

We let _currentIndex control which page we want to display in the body position. So we can Tap our bottomNavigationItem to control the page jump.

review

After writing in this article after two years, with royal elder sister to discuss this article, found that the code is still very tender. This approach leaves some holes in the ground. You can see that.

If you toggle Element by toggling the Index of a List, two bad things happen. The first is that as soon as all pages are cut away, state is lost. The second is that Element cannot be reused, which can cause performance problems.

A better way to implement the Body part is to use IndexStack/TabBarView, which you can find in the Github repository after this article. Thanks again to Ren Yujie for asking this question ~

Related links:

Full code: github.com/Vadaski/Vad…

Youtube teaching video: www.youtube.com/watch?v=iYD…

Bilibili teaching video: www.bilibili.com/video/av280…

I will continue to share my flutter experience. If you have any questions, please feel free to reply. I will update you soon!

From 0 to 1: my Flutter technology practice | the nuggets essay, the campaign is underway