【flutter底部导航栏】

    import 'package:flutter/material.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    
    import 'application_page.dart';
    import 'article_page.dart';
    import 'home_page.dart';
    import 'mine_page.dart';
    
    class MainPage extends StatefulWidget {
      const MainPage({Key? key}) : super(key: key);
    
      @override
      State<MainPage> createState() => _MainPageState();
    }
    
    class _MainPageState extends State<MainPage> {
      int _currentIndex = 0;
      final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
      static final List<Widget> _pagesList = [
    const HomePage(),
    const ApplicationPage(),
    const ArticlePage(),
    const MinePage(),
      ];
    
      @override
      Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      // appBar: AppBar(
      //   title: Text(_titles[_currentIndex]),
      // ),
      body: IndexedStack(
        index: _currentIndex,
        children: _pagesList,
      ),
      //1、普通底部栏
      // bottomNavigationBar: BottomNavigationBar(
      //   backgroundColor: Colors.brown,
      //   currentIndex: _currentIndex,
      //   type: BottomNavigationBarType.fixed,
      //   // items: MyTabBar.items,
      //   items: [
      //     BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      //     BottomNavigationBarItem(
      //         icon: Icon(Icons.settings_applications), label: '应用'),
      //     BottomNavigationBarItem(icon: Icon(Icons.article), label: '资讯'),
      //     BottomNavigationBarItem(icon: Icon(Icons.person), label: '个人'),
      //   ],
      //   selectedItemColor: Colors.white,
      //   unselectedItemColor: Colors.grey,
      //   selectedFontSize: 14.sp,
      //   unselectedFontSize: 14.sp,
      //   onTap: (value) {
      //     setState(() {
      //       _currentIndex = value;
      //     });
      //   },
      // ),
      // 底部凸起凹陷导航栏
      bottomNavigationBar: BottomAppBar(
        color: Colors.brown,
        shape: const CircularNotchedRectangle(), //凹陷
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            _buildIconButton(0, Icon(Icons.home, size: 24.r)),
            _buildIconButton(1, Icon(Icons.settings_applications, size: 24.r)),
            SizedBox(
              width: 50.w,
            ),
            _buildIconButton(2, Icon(Icons.article, size: 24.r)),
            _buildIconButton(3, Icon(Icons.person, size: 24.r)),
          ],
        ),
      ),
    
      ///中间图片凸起
      floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [Icon(Icons.add)])),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
      }
    
      Widget _buildIconButton(int index, Icon icon) {
    return IconButton(
      icon: icon,
      color: _currentIndex == index ? Colors.blue : Colors.grey,
      onPressed: () {
        setState(() {
          _currentIndex = index;
        });
      },
    );
      }
    }
    
    
    
    dart
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-13/IsGP1QmOLYudBZ5X8ptTgSFiJVzw.png)