Цвет фона BottomNavigationBarItem во флаттере

Question

Мне нужно установить цвет фона для выбранного BottomNavigationBarItem, как это изображение

Answer 1

Насколько я вижу, вы не можете изменить цвет вкладки при использовании BottomNavigationBar. Однако могу ли я предложить перейти на TabBar? Это выглядело бы примерно так:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Scaffold(appBar: AppBar(title: Text('First'))),
          Scaffold(appBar: AppBar(title: Text('Second'))),
          Scaffold(appBar: AppBar(title: Text('Third'))),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          color: Colors.blue,
          child: TabBar(
            indicator: BoxDecoration(color: Colors.redAccent),
            tabs: <Widget>[
              Tab(child: Text("Stuff", style: TextStyle(color: Colors.white))),
              Tab(child: Text("Things", style: TextStyle(color: Colors.white))),
              Tab(child: Text("Items", style: TextStyle(color: Colors.white))),
            ],
            controller: _tabController,
          ),
        ),
      ),
    );
  }
}

Результат:

Это очень минимальный пример, но он демонстрируетСуть этого.

Answer 2

Невозможно изменить фон выбранного элемента BottomNavigationBar, потому что это не соответствует рекомендациям по дизайну.

Если вы все еще хотите использовать его таким образом, следуя примеру, приведенному в Класс BottomNavigationBar , вот обходной путь:

final _selectedItemColor = Colors.white;
final _unselectedItemColor = Colors.white30;
final _selectedBgColor = Colors.indigo;
final _unselectedBgColor = Colors.blue;
int _selectedIndex = 0;
static const TextStyle optionStyle =
    TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
    'Index 1: Business',
    style: optionStyle,
  ),
  Text(
    'Index 2: School',
    style: optionStyle,
  ),
];

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

Color _getBgColor(int index) =>
    _selectedIndex == index ? _selectedBgColor : _unselectedBgColor;

Color _getItemColor(int index) =>
    _selectedIndex == index ? _selectedItemColor : _unselectedItemColor;

Widget _buildIcon(IconData iconData, String text, int index) => Container(
      width: double.infinity,
      height: kBottomNavigationBarHeight,
      child: Material(
        color: _getBgColor(index),
        child: InkWell(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(iconData),
              Text(text,
                  style: TextStyle(fontSize: 12, color: _getItemColor(index))),
            ],
          ),
          onTap: () => _onItemTapped(index),
        ),
      ),
    );

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      selectedFontSize: 0,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: _buildIcon(Icons.home, 'Home', 0),
          title: SizedBox.shrink(),
        ),
        BottomNavigationBarItem(
          icon: _buildIcon(Icons.business, 'Business', 1),
          title: SizedBox.shrink(),
        ),
        BottomNavigationBarItem(
          icon: _buildIcon(Icons.school, 'School', 2),
          title: SizedBox.shrink(),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: _selectedItemColor,
      unselectedItemColor: _unselectedItemColor,
    ),
  );
}

Результат:

Answer 3

Вот пример изменения фона при клике:

class _MyWidgetState extends State<MyWidget> {
  IconData selectedItem = Icons.dashboard;

  List<IconData> get itemsList => _items.keys;

  Map<IconData, String> _items = {
    Icons.home: 'Home',
    Icons.drive_eta: 'Delivery',
    Icons.shopping_basket: 'Products',
    Icons.mail: 'Messages'
  };

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        onTap: (int index) {
          // todo something
          setState(() {
            selectedItem = itemsList[index];
          });
        },
        currentIndex: itemsList.indexOf(selectedItem),
        items: _items.entries.map((MapEntry<IconData, String> entry) {
          return BottomNavigationBarItem(
            icon: Icon(entry.key, color: Colors.white),
            backgroundColor: entry.key == selectedItem ? Colors.black : Colors.blueGrey,
            title: Text(entry.value),
          );
        }).toList());
  }
}