current position:Home>Fleet series 9: Custom bottomnavigationbar

Fleet series 9: Custom bottomnavigationbar

2022-05-15 07:48:25Xiang Yu Han

Source code address :GitHub - hhbbeijing/flutter_app_test    Submission date :2022-5-10

In the last chapter, we have been able to customize the picture library , In this example, we will combine ttf Customize bottomNavigationBar, As an enterprise app Part of .

One 、 Make TTF

1.1 take png Convert to SVG:

PNG turn SVG – Online will PNG Convert document to SVG

After successful conversion, you can preview the picture , Otherwise, the display fails .

2.2 Make TTF

website :iconfont- Alibaba vector icon library

After logging in , Upload SVG Go to your own project


  Two 、 Customize BottomNavigationBar

2.1 Custom layout

import 'package:flutter/material.dart';
import 'package:flutter_app_test/pages/example/ttf/MyIcons.dart';

void main() {

class Main extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
        home: MainPage());

class MainPage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<MainPage> {
  late int currentIndex;

  void initState() {
    currentIndex = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Container(
        padding: const EdgeInsets.all(100),
        child: Row(
          children: [
              size: 100,
            Text("This is a ttf!"),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) {
          unselectedItemColor: Colors.black38,
          backgroundColor: Colors.white,
          iconSize: 40,
          type: BottomNavigationBarType.fixed,
          items: const [
                icon: Icon(MyIcons.home),
                activeIcon: Icon(MyIcons.home),
                label: " home page "),
                icon: Icon(,
                activeIcon: Icon(,
                label: " life "),
                icon: Icon(,
                activeIcon: Icon(,
                label: " conduct financial transactions "),
                icon: Icon(MyIcons.mine),
                activeIcon: Icon(MyIcons.mine),
                label: " my "),

  /* Switch pages */
  void _changePage(int index) {
    /* If the navigation item you click is not the current item    Switch  */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;

Attribute meaning :


icon: Default icon

activeIcon: Icon when selected

label: Text

backgroundColor:BottomNavigationBarType by shifting When the background color


items: Collection of internal elements 
currentIndex: Currently selected 
backgroundColor: Background color 
selectedItemColor: The color of the selected item in the picture and text 
unselectedItemColor: Pictures and text  not  The color of the selection 
iconSize: Icon size 

type: Type of bottom navigation bar , Yes fixed and shifting Two types , The display effect is different

onTap: Click the callback function 

2.2 Callback function

by ! What kind of thing is this ???

Don't worry. , To look down :

  /// Called when one of the [items] is tapped.
  /// The stateful widget that creates the bottom navigation bar needs to keep
  /// track of the index of the selected [BottomNavigationBarItem] and call
  /// `setState` to rebuild the bottom navigation bar with the new [currentIndex].
  final ValueChanged<int>? onTap;

First look at the following definition : A modifier is defined, but final Of int type , be known as currentIndex Properties of .

  /// The index into [items] for the current active [BottomNavigationBarItem].
  final int currentIndex;

Okay , We use the source code , Observe the following :

/// Signature for callbacks that report that an underlying value has changed.
/// See also:
///  * [ValueSetter], for callbacks that report that a value has been set.
typedef ValueChanged<T> = void Function(T value);

final ValueChanged<int>? onTap;

Try to explain : Defines a modifier as final Callback function for , When int When the type value changes , Trigger callback .

2.3 Callback function example

import 'dart:io';

void main(){
  BottomNavigationBar bar = BottomNavigationBar(
      changed: (index){
  print("sleep 3 s");
  sleep(const Duration(seconds: 3));"40");

// Alias function 
typedef ValueChanged<T> = void Function(T value);

class BottomNavigationBar{

  final ValueChanged<String>? changed;

    // ValueChanged<String>? this.changed,

  // Change state 
  void select(String index){
    print(this.changed == null);
    //this.changed  Not empty   perform  call;
    // call Will be index field value , give ValueChanged, It can be understood that the value has changed , Then callback 


copyright notice
author[Xiang Yu Han],Please bring the original link to reprint, thank you.

Random recommended