Flutter----去掉底部导航栏的水波纹效果

在群里有好几次被人问到了，Flutter自带的底部导航栏，点击会有水波纹的效果，要怎么去掉。当时我也很懵，不是觉得这应该很简单吗？怎么被问了好几次。现在我就把这个解决方法告诉你们。

其实处理问题的方式很简单。

• 1. 自己去copy源码找到地方自己修改
• 2. 自己去想办法（当然这是说废话。。。你不想方法，感觉第二天可以去财务结账了！）

好了我就不说废话了，直接说正题了。

正常来说我们建立一个底部导航栏代码如下：

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

class _MyHomePageState extends State<MyHomePage> {

  final List pages=[
    Text("1"),
    Text("2"),
  ];
  int _currentIndex = 0;
  var currentPage;

  @override
  void initState() {
    super.initState();
    currentPage = pages[_currentIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('去掉水波纹效果'),
        centerTitle: true,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index){
          setState(() {
            _currentIndex = index;
            currentPage = pages[_currentIndex];
          });
        },
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
          BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('设置')),
        ],
      ),
      body: currentPage,
    );
  }
}

这是按照官方给的方式，效果自然不用多说，会有水波纹的效果！

这时候我们就想了，水波纹效果是怎么出来的。如果你做过水波纹效果的Widget那么你自然能想到。我们在使用Inkwell的时候，设置了三个参数，分别为brightness，splashColor，highlightColor。那么这时候你会不会想到，让这三个参数，全部改一遍试试。

那么局部修改的方法是什么呢？有个Theme组件，在data属性里面改这参数。

Theme(
          data: ThemeData(
            brightness: Brightness.light,
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
          ),
          child: child,
        ）

好了方法有了，我们来试试：

修改后的代码如下：

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

class _MyHomePageState extends State<MyHomePage> {

  final List pages=[
    Text("1"),
    Text("2"),
  ];
  int _currentIndex = 0;
  var currentPage;

  @override
  void initState() {
    super.initState();
    currentPage = pages[_currentIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('去掉水波纹效果'),
        centerTitle: true,
      ),
      bottomNavigationBar: Theme(
        data: ThemeData(
          brightness: Brightness.light,
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index){
            setState(() {
              _currentIndex = index;
              currentPage = pages[_currentIndex];
            });
          },
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
            BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('设置')),
          ],
        ),
      ),
      body: currentPage,
    );
  }
}

现在就没问题了！ 效果自己去实践！

附上另一种搞笑方法： 你可以将BottomNavigationBar用CupertinoTabBar包起来效果也是一样的！！！哈哈当然不建议啊，毕竟看名字就知道这是ios适配的组件！