【Flutter实战】底部导航栏

底部导航栏实现，加载系统自带图标和自定义图标。

先看运行效果：

Flutter代码实现

使用BottomNavigationBar，如下所示：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wanandroid_flutter/route/page/project_page.dart';

import 'home_page.dart';
import 'knowledge_page.dart';
import 'navigation_page.dart';

class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
  //底部导航页面索引
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    
    
    //尺寸适配初始化
    initScreenUtil();


    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavBarItems,//默认的导航样式列表
        currentIndex: _currentIndex,//当前页面索引
        selectedItemColor: Colors.deepOrange,//被选中的item颜色
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
        elevation: 10.w,
        selectedFontSize: 12.w,
        unselectedFontSize: 12.w,
        onTap: (index){
    
    
          setState(() {
    
    
            _currentIndex = index;
          });
        },
      ),
      body: pages[_currentIndex],//根据索引找到具体页面
    );
  }

  final List<BottomNavigationBarItem> bottomNavBarItems = [
    const BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: "首页",
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.dashboard_customize_outlined),
      label: "知识体系",
    ),
    const BottomNavigationBarItem(icon: Icon(Icons.navigation_outlined), label: "导航"),
    const BottomNavigationBarItem(icon: Icon(Icons.person_outlined), label: "我的"),
  ];

  final pages = <Widget>[
    HomePage(),
    KnowledgePage(),
    NavigationPage(),
    ProjectPage()
  ];

  void initScreenUtil() {
    
    
  //尺寸适配
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        designSize: const Size(375, 812),
        context: context,
        minTextAdapt: true,
        orientation: Orientation.portrait);
  }
}

上述导航栏加载系统图标selectedItemColor才能作用到图标上，否则，图标不会变成selectedItemColor的颜色。如果需要使用自定义的图标，且需要选中后颜色改变，那么上述代码需要部分改变。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - assets/images/mine.png
    - assets/images/mine_selected.png

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wanandroid_flutter/route/page/project_page.dart';

import 'home_page.dart';
import 'knowledge_page.dart';
import 'navigation_page.dart';

class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    
    
    //尺寸适配初始化
    initScreenUtil();


    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavBarItems,
        currentIndex: _currentIndex,
        selectedItemColor: Colors.deepOrange,
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
        elevation: 10.w,
        selectedFontSize: 12.w,
        unselectedFontSize: 12.w,
        onTap: (index){
    
    
          setState(() {
    
    
            _currentIndex = index;
          });
        },
      ),
      body: pages[_currentIndex],
    );
  }

  final List<BottomNavigationBarItem> bottomNavBarItems = [
    const BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: "首页",
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.dashboard_customize_outlined),
      label: "知识体系",
    ),
    const BottomNavigationBarItem(icon: Icon(Icons.navigation_outlined), label: "导航"),
    //主要是这里改变，加载自定义的图标
    const BottomNavigationBarItem(icon: SizedBox(width: 24,height: 24,child: Image(image: AssetImage("assets/images/mine.png"))),
        label: "我的",activeIcon: SizedBox(width: 24,height: 24,child: Image(image: AssetImage("assets/images/mine_selected.png")))),
  ];

  final pages = <Widget>[
    HomePage(),
    KnowledgePage(),
    NavigationPage(),
    ProjectPage()
  ];

  void initScreenUtil() {
    
    
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        designSize: const Size(375, 812),
        context: context,
        minTextAdapt: true,
        orientation: Orientation.portrait);
  }
}

代码地址
wanandroid_flutter