为 Flutter App 自定义 BottomNavigationBar 选择的 BottomNavigationBarItem答案

【问题标题】：Customize BottomNavigationBar selected BottomNavigationBarItem for Flutter App为 Flutter App 自定义 BottomNavigationBar 选择的 BottomNavigationBarItem
【发布时间】：2020-02-17 14:18:02
【问题描述】：

我想在选中的BottomNavigationBarItem底部添加一行

这是我想要实现的目标

有什么办法可以做到这一点。

【问题讨论】：

这可能会有所帮助stackoverflow.com/questions/45484998/…
好像是 TabLayout

标签： ios user-interface flutter mobile dart

【解决方案1】：

您可以简单地使用 TabBar + TabBarView 来实现这一点。

//out of build method
final TabController _controller = TabController(
    length: 3
);

//inside build method
Scaffold(
  body: TabBarView(
    controller: _controller,
    children: <Widget>[
      Center(
        child: Text('page one'),
      ),
      Center(
        child: Text('page two'),
      ),
      Center(
        child: Text('page three'),
      ),
    ],
  ),
  bottomNavigationBar: TabBar(
    controller: _controller,
    indicator: //change decoration here,
    tabs: <Widget>[
      Icon(
        Icons.dashboard,
      ),
      Icon(
        Icons.card_giftcard,
      ),
      Icon(
        Icons.headset,
      )
    ],
  ),
);

【讨论】：

【解决方案2】：

    bottomNavigationBar: new Theme(
    data: Theme.of(context).copyWith(
        // sets the background color of the `BottomNavigationBar`
        canvasColor: Colors.green,
        // sets the active color of the `BottomNavigationBar` if `Brightness` is light
        primaryColor: Colors.red,
        textTheme: Theme
            .of(context)
            .textTheme
            .copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
    child: new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.add),
          title: new Text("Add"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.delete),
          title: new Text("Delete"),
        )
      ],
    ),
  ),

【讨论】：

这不会在所选标签栏项目下创建行。