The use of Flutter in BottomNavigationBar explanation | Flutter Widgets

This is the 17th day of my participation in Gwen Challenge

preface

Before we talk about PageView when the simple use of a BottomNavigationBar, today we talk about his use and some optimization.

Look at the effect

The above is a collection of all the effects that we are going to talk about today. Now let’s talk about how to implement them in detail

Basic use

As in the previous version, we typically use the bottomNavigationBar property in the Scaffold to display at the bottom

Overall page and public methods


/// BottomNavigationBar page
class BottomNavigationBarPage extends StatefulWidget {
  BottomNavigationBarPage({Key? key}) : super(key: key);

  @override
  _BottomNavigationBarPageState createState() =>
      _BottomNavigationBarPageState();
}

class _BottomNavigationBarPageState extends State<BottomNavigationBarPage> {
  // Index of the current subitem
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView - ZeroFlutter'),
      ),
      body: [bodyWidget],
      // Bottom navigation bar
      bottomNavigationBar: [BottomNavigationBarWidget];
  }

  /// Tab to change
  void onTabChanged(intvalue) { currentIndex = value; setState(() {}); }}Copy the code

Bottom navigation bar

// Bottom navigation bar
BottomNavigationBar(
  // Current page index
  currentIndex: currentIndex,
  // Navigate the subitem set
  items: [
    // Navigation child
    BottomNavigationBarItem(
      / / icon
      icon: Icon(Icons.home),
      // Text content
      label: 'home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message_rounded),
      label: 'message',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.people),
      label: 'I',
    ),
  ],
  onTap: onTabChanged,
)
Copy the code

Here we add the ability to select index changes and 3 subitemsets

currentIndexCurrently selected index
itemsItem sets
- BottomNavigationBarItemchildren
  - iconIcon (this can be any Widget)
  - labelThe text

See the effect

Various custom styles

There are various parameters that can be adjusted to reproduce our design drawing, among which there are a few points to note

selectedItemColor 与 unselectedItemColorCollocation is used
- Mainly determines the color of the text
- There is noiconTheme.color, also determine the icon color
- fixedColorCan’t withselectedItemColorAt the same time use
selectedIconTheme 与 unselectedIconThemeCollocation is used

BottomNavigationBar(
  // Current page index
  currentIndex: currentIndex,
  // Background color
  backgroundColor: Colors.black,
  // Select the color
  selectedItemColor: Colors.orange,
  // Set the color
  // fixedColor:Colors.orange,
  // Unselected color
  unselectedItemColor: Colors.lightGreen,
  // Select the icon theme
  selectedIconTheme: IconThemeData(
    // Icon color
    color: Colors.red,
    // Icon size
    size: 32.// Icon transparency
    opacity: 1.0,),// The icon theme is not selected
  unselectedIconTheme: IconThemeData(
    color: Colors.blue,
    size: 24,
    opacity: 0.5,
  ),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message_rounded),
      label: 'message',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.people),
      label: 'I',
    ),
  ],
  onTap: onTabChanged,
)
Copy the code

See the effect

Uniform text size

There will be a change of text size when the above effect is switched between selected and unselected. Interaction and PM say this is not good, how to do?

BottomNavigationBar(
  currentIndex: currentIndex,
  // Set the text size
  selectedFontSize: 14,
  unselectedFontSize: 14,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message_rounded),
      label: 'message',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.people),
      label: 'I',
    ),
  ],
  onTap: onTabChanged,
)
Copy the code

Take a look at the source code default, as follows, so we unified change to a value can be

selectedFontSize = 14
unselectedFontSize = 12

See the effect

Text is displayed only when selected

The following effect is very rare, but there are apps to do so. Compared to color differentiation, this effect is also very good

BottomNavigationBar(
  currentIndex: currentIndex,
  // Displays the selected text
  showSelectedLabels: true.// Displays the problem when not selected
  showUnselectedLabels: false,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message_rounded),
      label: 'message',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.people),
      label: 'I',
    ),
  ],
  onTap: onTabChanged,
)
Copy the code

See the effect

Select the background and change color together

Let’s set type here: BottomNavigationBarType. Shifting actually by default, when you have more than three items will automatically switch to this type can be set to compulsory BottomNavigationBarType. Fixed don’t this effect

BottomNavigationBar(
  currentIndex: currentIndex,
  // Displays the selected text
  type: BottomNavigationBarType.shifting,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'home'.// Set the background color
      backgroundColor: Colors.blue,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message_rounded),
      label: 'message'.// Set the background color
      backgroundColor: Colors.red,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.people),
      label: 'I'.// Set the background color
      backgroundColor: Colors.orange,
    ),
  ],
  onTap: onTabChanged,
)
Copy the code

Here we need to set the backgroundColor for each BottomNavigationBarItem to switch colors

See the effect

Remove the splash effect

Interaction and PM said again, this water ripple effect is not good, how to remove it?

// Remove the long press effect
Theme(
  data: ThemeData(
    // Remove the water ripple effect
    splashColor: Colors.transparent,
    // Remove the long press effect
    // highlightColor: Colors.transparent,
  ),
  child: BottomNavigationBar(
    // Current page index
    currentIndex: currentIndex,
    selectedFontSize: 14,
    unselectedFontSize: 14.// Navigate the subitem set
    items: [
      // Navigation child
      BottomNavigationBarItem(
        / / icon
        icon: Icon(Icons.home),
        // Text content
        label: 'home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.message_rounded),
        label: 'message',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.people),
        label: 'I',
      ),
    ],
    onTap: onTabChanged,
  ),
)
Copy the code

All the controls in Flutter are widgets, including the Theme Settings, so all we need to do here is nest a Theme and set the water ripple property to transparent

See the effect

Remove the long press prompt

Like the above hints, is generally not used, need to get rid of how to do?

BottomNavigationBar(
  currentIndex: currentIndex,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'home'.// Set the prompt to null
      tooltip: ' ',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message_rounded),
      label: 'message',
      tooltip: ' ',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.people),
      label: 'I',
      tooltip: ' ',
    ),
  ],
  onTap: onTabChanged,
)
Copy the code

All you need to do is set the tooltip to null

See the effect

Custom ICONS

In order to show the brand characteristics of our App, each icon is different. Here, we can directly set icon to Image.

BottomNavigationBar(
  currentIndex: currentIndex,
  selectedItemColor: Colors.purple[800],
  items: [
    BottomNavigationBarItem(
      // Default icon
      icon: getItemIcon('assets/icons/icon_home_unselect.png'),
      // Select the icon
      activeIcon: getItemIcon('assets/icons/icon_home.png'),
      label: 'home',
    ),
    BottomNavigationBarItem(
      icon: getItemIcon('assets/icons/icon_msg_unselect.png'),
      activeIcon: getItemIcon('assets/icons/icon_msg.png'),
      label: 'message',
    ),
    BottomNavigationBarItem(
      icon: getItemIcon('assets/icons/icon_me_unselect.png'),
      activeIcon: getItemIcon('assets/icons/icon_me.png'),
      label: 'I',
    ),
  ],
  onTap: onTabChanged,
)
Copy the code

iconUnselected icon
activeIconSelect the icon

getItemIcon

/// Get project Icon
  Widget getItemIcon(String icon) {
    return Image.asset(
      icon,
      width: 24,
      height: 24,); }Copy the code

See the effect

Source warehouse

Based on the latest version of Flutter 🔥

Flutter Widgets warehouse

Refer to the link

Flutter-BottomNavigationBar

Pay attention to column

This article has been included in the column at 👇 below, you can follow it directly
Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible

The use of Flutter in BottomNavigationBar explanation | Flutter Widgets

preface

Look at the effect

Basic use

Overall page and public methods

Bottom navigation bar

See the effect

Various custom styles

See the effect

Uniform text size

See the effect

Text is displayed only when selected

See the effect

Select the background and change color together

See the effect

Remove the splash effect

See the effect

Remove the long press prompt

See the effect

Custom ICONS

getItemIcon

See the effect

Source warehouse

Refer to the link

Pay attention to column

Related Posts

The practice of strategic patterns

Java multithreading – Learn more about interrupts and Volatile through thread interrupts

ViewModelScope for coroutines