一、创建pages文件目录，根页面为Root

二、Home首页简单结构代码（其他页面同理）

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
        title: const Text(
          "首页",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
      ),
      body: const Center(
        child: Text(
          "首页页面",
          style: TextStyle(color: Colors.red, fontSize: 20),
        ),
      ),
    );
  }
}

三、root文件代码

import 'package:flutter/material.dart';
import 'package:fkapp/pages/Home/home_page.dart'; //首页
import 'package:fkapp/pages/Categroy/categroy_page.dart'; //分类
import 'package:fkapp/pages/Cart/cart_page.dart'; //购物车
import 'package:fkapp/pages/My/my_page.dart'; //我的

class rootPages extends StatefulWidget {
  const rootPages({super.key});

  @override
  State<rootPages> createState() => _rootPagesState();
}

class _rootPagesState extends State<rootPages> {
  List pages = [HomePage(), CategoryPage(), CartPage(), MyPage()];
  int _currentIndex = 0; //底部选中索引
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[_currentIndex], //通过索引展示不同的页面
      bottomNavigationBar: Theme(
          //自定义底部导航栏主题
          data: ThemeData(
              splashColor: Colors.transparent, //解决点击长按底部导航栏背景色
              highlightColor: Colors.transparent),
          child: BottomNavigationBar(
            selectedFontSize: 14, //选中文字大小
            unselectedFontSize: 14, //未选中的文字大小
            selectedItemColor: Colors.green, //选中文字颜色
            unselectedItemColor: Colors.grey, //未选中文字颜色
            currentIndex: _currentIndex, //当前选中的item的索引
            onTap: (int index) {
              setState(() {
                _currentIndex = index;
              });
            },
            type: BottomNavigationBarType.fixed, //解决底部items的数量超过3个的情况下颜色透明的
            items: [
              BottomNavigationBarItem(
                  icon: Image.asset(
                    'assets/home_nor.png',
                    gaplessPlayback: true,
                  ), //图标未选中状态
                  activeIcon: Image.asset(
                    'assets/home_sel.png',
                    gaplessPlayback:
                        true, //解决image组件会将原来的图片清空，造成一开始点击底部item会有跳动的问题，gaplessPlayback设置为true表示不清空原来的图片
                  ), //图标选中状态
                  label: "首页"),
              BottomNavigationBarItem(
                  icon: Image.asset(
                    'assets/category_nor.png',
                    gaplessPlayback: true,
                  ),
                  activeIcon: Image.asset(
                    'assets/category_sel.png',
                    gaplessPlayback: true,
                  ),
                  label: "分类"),
              BottomNavigationBarItem(
                  icon: Image.asset(
                    'assets/cart_nor.png',
                    gaplessPlayback: true,
                  ),
                  activeIcon: Image.asset(
                    'assets/cart_sel.png',
                    gaplessPlayback: true,
                  ),
                  label: "购物车"),
              BottomNavigationBarItem(
                  icon: Image.asset(
                    'assets/mine_nor.png',
                    gaplessPlayback: true,
                  ),
                  activeIcon: Image.asset(
                    'assets/mine_sel.png',
                    gaplessPlayback: true,
                  ),
                  label: "我的"),
            ],
          )),
    );
  }
}

4、main.dart页面

import 'package:fkapp/pages/Root/page_root.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const rootPages() ,//导入根页面
    );
  }
}