Flutter tabbar水波纹效果如何取消?

  1. 系统自带的有水波纹效果, 查看官方文档, 没有对应的api 取消
  2. 换种思路,自定义tabbar
  3. 自定义tabbar 主要使用到 TabBar 和 TabController 两者配合。
  4. 欢迎指点,留言。
    直接上代码:
class _HomeWidget extends State with SingleTickerProviderStateMixin {
 TabController _tabController;
  int _currentIndex = 0;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this, initialIndex: _currentIndex);
  }

@override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      builder: (c) => snapshotProvider,
      child: Scaffold(
        body: IndexedStack(
          index: _currentIndex,
          children: [
            Widget1(),
            Widget2(),
            Widget3(),
            Widget4(),
          ],
        ),
        bottomNavigationBar: _bottom(context),
      ),
    );
  }

 Widget _bottom(BuildContext context) {
    return Container(
      height: Constant.TAB_BAR_HEIGHT + XScreen.bottomSafeHeight,
      width: double.infinity,
      color: Color(0xe6FAFAFA),
      child: TabBar(
        indicatorWeight: 0.000001,
        onTap: _onNavigation,
        tabs: [
          _item(
              “首页",
              _currentIndex == 0
                  ? Icon()
                  : Icon( )),
          _item(
              ”商城“,
              _currentIndex == 1
                  ? Icon( )
                  : Icon()),
          _item(
              ”购物车“,
              _currentIndex == 2
                  ? Icon()
                  : Icon()),
          _item(
              ”我的“,
              _currentIndex == 3
                  ? Icon()
                  : Icon())
        ],
        controller: _tabController,
        labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 10.0),
        unselectedLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 10.0),
        labelColor: Color(0xFFC4B079),
        unselectedLabelColor: Color(0xff8E8E93),
        labelPadding: EdgeInsets.only(top: 3, bottom: 3 + XScreen.bottomSafeHeight),
      ),
    );
  }

  Widget _item(String title, Icon icon) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          icon,
          Container(
            child: Text(
              title,
            ),
          )
        ],
      ),
    );
  }
}

你可能感兴趣的:(tabbar,取消水波纹效果,flutter,Dart,Flutter从零到未来)