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

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);
  }

}

copyright notice
author[Xiang Yu Han],Please bring the original link to reprint, thank you.
https://en.chowdera.com/2022/131/202205102051104450.html

Random recommended