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

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

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,
    );
  }
}

转载于

https://blog.csdn.net/mubowen666/article/details/104569812/