Flutter 底部导航凸起效果

BottomNavigationBar

class BottomNavigationBarWidget extends StatefulWidget {
  const BottomNavigationBarWidget({Key? key}) : super(key: key);

  @override
  State<BottomNavigationBarWidget> createState() => BottomNavigationBarState();
}

class BottomNavigationBarState extends State<BottomNavigationBarWidget> {

  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BottomNavigationBar"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,
        type: BottomNavigationBarType.fixed,
        elevation: 5,
        unselectedFontSize: 12,
        selectedFontSize: 15,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search),label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.add),label: 'Add'),
          BottomNavigationBarItem(icon: Icon(null),label: 'Cart'),
          BottomNavigationBarItem(icon: Icon(Icons.settings),label: 'Setting'),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemSelected,
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: _selectedIndex==2?Colors.red:Colors.grey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Icon(Icons.add)
            ],
          ),
          onPressed: (){
            setState(() {
              _selectedIndex = 2;
            });
          },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,  //要实现中间的按钮凸起效果，这行起作用
    );
  }

  void _onItemSelected(int value) {
    setState((){
      _selectedIndex=value;
    });
  }
}

---

BottomAppBar

class BottomAppBarWidget extends StatefulWidget {
  const BottomAppBarWidget({Key? key}) : super(key: key);

  @override
  State<BottomAppBarWidget> createState() => BottomAppBarState();
}

class BottomAppBarState extends State<BottomAppBarWidget> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomAppBar'),
      ),
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        elevation: 8.0,
        notchMargin: 5,
        shape: const CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: const Icon(Icons.home),
              color: _selectedIndex == 0 ? Colors.red : Colors.grey,
              onPressed: () {
                _onItemSelected(0);
              },
            ),
            IconButton(
              icon: const Icon(Icons.search),
              color: _selectedIndex == 1 ? Colors.red : Colors.grey,
              onPressed: () {
                _onItemSelected(1);
              },
            ),
            const SizedBox(width: 60), //中间的

            IconButton(
              icon:const Icon(Icons.message),
              color: _selectedIndex == 4 ? Colors.red : Colors.grey,
              onPressed: () {
                _onItemSelected(4);
              },
            ),

            IconButton(
              icon:const Icon(Icons.settings),
              color: _selectedIndex == 3 ? Colors.red : Colors.grey,
              onPressed: () {
                _onItemSelected(3);
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.red,
        child: const Icon(Icons.add),
        onPressed: (){
          setState(() {
            _selectedIndex = 2;
          });
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  void _onItemSelected(int value) {
    setState(() {
      _selectedIndex = value;
    });
  }
}