Wechat official account: [programmer refers to north] follow for more tutorials and typography skills. Questions or suggestions, please leave a message on the public account;

Please indicate the source of reprint:learnandfish.com/

An overview of the

In this paper, the main implementation of a mock idle fish bottom navigation bar implementation, this effect is often used in the project, we will start from scratch.

rendering

Imitation idle fish bottom navigation bar

To implement the BottomNavigationBar we need to use the BottomNavigationBar and FloatingActionButton, which is the component we said FloatingActionButton, Let’s start with the BottomNavigationBar component.

BottomNavigationBar

The BottomNavigationBar is a component that belongs to the Scaffold at the bottom of the page. Usually used with BottomNavigationBarItem. BottomNavigationBarItem is a child option of BottomNavigationBar.

BottomNavigationBar constructor and common properties
BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
  });
Copy the code
The property name Attribute value type instructions
items A collection of type BottomNavigationBarItem Child display items of the bottom navigation bar
onTap ValueChanged Click the callback of the display item in the bottom navigation bar, and the int value returned is the subscript of the selected child item
currentIndex int The index of the current display item
type BottomNavigationBarType Fixed and shifting types are included, and the display effect is different
iconSize double The size of the child icon
BottomNavigationBarItem constructor and common properties

This component is used in conjunction with the BottomNavigationBar as a child item to be displayed in the BottomNavigationBar, consisting of ICONS and text.

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  });
Copy the code
The property name Attribute value type instructions
icon Widget Icon components that need to be displayed, mostly Icon
title Widget The Text component that needs to be displayed, mostly Text
activeIcon Widget Icon displayed when selected, mostly icon
backgroundColor Color BottomNavigationBarType is the background color when the task is shifting

Click on the bottom navigation bar to switch the page or update the data. Some page states need to be dynamically changed, so we need to inherit the StatefulWidget.

class BottomNavigationPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return_BottomNavigationPageState(); }}Copy the code

Next, we need to prepare the subitems to be displayed in the navigation bar and click the interface corresponding to each subitem.

// Switch to the page in the bottom navigation bar
final pages = <Widget>[
  HomePage(),
  SecondPage(),
  ThirdPage(),
  FourPage(),
  FivePage()
];

// All the children to be displayed in the bottom navigation bar
final List<BottomNavigationBarItem> bottomNavBarItems = [
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
    title: Text("Idle fish")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.blur_circular),
      title: Text("Pond")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.add),
      title: Text("Sell it for nothing.")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.message),
      title: Text("News")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("I")),];Copy the code

For ease of display, only one text is displayed in the middle of the page in each interface. After all this is done, you can directly use the bottomNavigationBar in the Scaffold of the BottomNavigationPage page and specify the items, type and other properties.

Scaffold(
      appBar: AppBar(
        title: Text("Bottom navigation page"),
      ),
      body: pages[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavBarItems,
        onTap: _changePage,
        currentIndex: this._currentIndex,
        type: BottomNavigationBarType.fixed, 
      ),
Copy the code

At this point, basic navigation bar at the bottom of the function is implemented, but here are a must pay attention to the point, BottomNavigationBar if children more than 4, do not specify a type type, default to BottomNavigationBarType. Shifting type, No more than four for BottomNavigationBarType. Fixed type, more than four, if you do not specify type: BottomNavigationBarType. Fixed, the navigation bar at the bottom of the color will disappear, the need to pay attention to the pit.

To optimize the

In that Scaffold, floatingActionButton property is used to implement the floatingActionButton property.

Scaffold(
      appBar: AppBar(
        title: Text("Bottom navigation page"),
      ),
      body: pages[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavBarItems,
        onTap: _changePage,
        currentIndex: this._currentIndex,
        type: BottomNavigationBarType.fixed,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.add,
          size: 36,
        ),
        onPressed: _pressAdd,
        backgroundColor: Colors.yellow,
        foregroundColor: Colors.black,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
Copy the code

FloatingActionButtonLocation for FloatingActionButton button location specified above, centerDocked value just realize the effect that we need, you can try the other values. Both the _changePage and _pressAdd methods refresh the page by changing the current subscript value, and both refresh the page by using the setState method.

The complete code has not been uploaded to the warehouse. If necessary, you can leave a message in the background and I will send it to you. Later upload warehouse.

Thank you for reading, your reading is my motivation to move forward.