视频直播app源码，Flutter实战底部导航栏

视频直播app源码，Flutter实战底部导航栏

 

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的颜色。如果需要使用自定义的图标，且需要选中后颜色改变，那么上述代码需要部分改变。

以上就是 视频直播app源码，Flutter实战底部导航栏，更多内容欢迎关注之后的文章