flutter 底部导航凸起效果

Flutter 中可以通过 `BottomAppBar` 和 `FloatingActionButton` 来实现底部导航凸起效果。

首先，使用 `Scaffold` 组件包裹页面内容，并将 `BottomAppBar` 组件作为 `Scaffold` 的底部导航栏。`BottomAppBar` 组件包含一个 `FloatingActionButtonLocation` 属性，用于设置浮动操作按钮的位置。在这里，我们可以使用 `FloatingActionButtonLocation.centerDocked` 将浮动操作按钮放置在底部导航栏中间的位置。

接下来，为了让底部导航栏有凸起的效果，我们还需要为 `BottomAppBar` 组件设置 `shape` 属性。通过使用 `CircularNotchedRectangle` 类来创建一个圆形凸起的形状，我们可以将 `shape` 属性设置为 `CircularNotchedRectangle()`。

最后，在 `FloatingActionButton` 组件中设置 `elevation` 属性，可以让浮动操作按钮在被点击时有一个升起的效果。

下面是一个示例代码，演示了如何使用 `BottomAppBar` 和 `FloatingActionButton` 来实现底部导航凸起效果：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Navigation Bar Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  List<Widget> _widgetOptions = <Widget>[
    Text('Home'),
    Text('Messages'),
    Text('Profile'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bottom Navigation Bar Demo'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              onPressed: () {
                _onItemTapped(0);
              },
            ),
            IconButton(
              icon: Icon(Icons.message),
              onPressed: () {
                _onItemTapped(1);
              },
            ),
            SizedBox(width: 40),
            IconButton(
              icon: Icon(Icons.person),
              onPressed: () {
                _onItemTapped(2);
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        elevation: 8.0,
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

运行该示例代码，即可看到底部导航栏有凸起的效果。