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

download

  Two 、 Customize BottomNavigationBar

2.1 Custom layout

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

void main() {
  runApp(Main());
}

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primaryColor: Colors.green,
        ),
        home: MainPage());
  }
}

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

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

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Container(
        padding: const EdgeInsets.all(100),
        child: Row(
          children: [
            Icon(
              MyIcons.home,
              size: 100,
              color: Colors.green,
            ),
            Text("This is a ttf!"),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) {
            _changePage(index);
          },
          selectedItemColor: Colors.green,
          unselectedItemColor: Colors.black38,
          backgroundColor: Colors.white,
          iconSize: 40,
          type: BottomNavigationBarType.fixed,
          items: const [
            BottomNavigationBarItem(
                icon: Icon(MyIcons.home),
                activeIcon: Icon(MyIcons.home),
                label: " home page "),
            BottomNavigationBarItem(
                icon: Icon(MyIcons.life),
                activeIcon: Icon(MyIcons.life),
                label: " life "),
            BottomNavigationBarItem(
                icon: Icon(MyIcons.money),
                activeIcon: Icon(MyIcons.money),
                label: " conduct financial transactions "),
            BottomNavigationBarItem(
                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 ：

BottomNavigationBarItem-

icon： Default icon

activeIcon： Icon when selected

label： Text

backgroundColor：BottomNavigationBarType by shifting When the background color

BottomNavigationBar-

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("index-->"+index);
    }
  );
  print("sleep 3 s");
  sleep(const Duration(seconds: 3));
  bar.select("40");
}

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

class BottomNavigationBar{

  final ValueChanged<String>? changed;

  BottomNavigationBar({
    // ValueChanged<String>? this.changed,
    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 
    this.changed?.call(index);
  }

}