Настроить BottomNavigationBar выбран BottomNavigationBarItem для приложения Flutter

Question

Я хочу добавить строку внизу выбранного BottomNavigationBarItem

Вот чего я хочу достичь

Есть ли способ, которым я могу сделать это.

Answer 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,
      )
    ],
  ),
);

Answer 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"),
        )
      ],
    ),
  ),