Flutter BottomNavigationBarItem背景色在颤振中

我需要将背景色设置为选定的BottomNavigationBarItem，如下图所示

---

以下是单击即可更改背景的示例：

class\u MyWidgetState扩展状态{
iconda selectedItem=Icons.dashboard；
List get itemsList=>\u items.keys；
映射项={
Icons.home:“home”，
Icons.drive_eta:“交货”，
Icons.shopping_basket:“产品”，
Icons.mail:“邮件”
};
@凌驾
小部件构建（构建上下文）{
返回底部导航栏(
onTap：（int索引）{
//做点什么
设置状态（）{
selectedItem=itemsList[index]；
});
},
currentIndex:itemsList.indexOf（selectedItem），
items:_items.entries.map（（MapEntry）{
返回底部导航BarItem(
图标：图标（entry.key，颜色：Colors.white），
backgroundColor:entry.key==selectedItem？Colors.black:Colors.blueGrey，
标题：文本（输入值），
);
}).toList（））；
}
}

据我所知，在使用

底部导航栏时，您无法更改选项卡的颜色。但是，我是否可以建议切换到
选项卡
？它看起来像这样：

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

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
静态常量字符串_title='颤振代码示例'；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：_标题，
主页：MyStatefulWidget（），
);
}
}
类MyStatefulWidget扩展了StatefulWidget{
MyStatefulWidget（{Key}）：超级（Key:Key）；
@凌驾
_MyStatefulWidgetState createState（）=>\u MyStatefulWidgetState（）；
}
类_MyStatefulWidgetState扩展状态
使用SingleTickerProviderStateMixin{
TabController\u TabController；
@凌驾
void initState（）{
super.initState（）；
_tabController=tabController（vsync:this，长度：3）；
}
@凌驾
无效处置（）{
_tabController.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：选项卡视图(
控制器：\ tab控制器，
儿童：[
脚手架（appBar:appBar（标题：Text（'First'）），
脚手架（appBar:appBar（标题：Text（'Second'）），
脚手架（appBar:appBar（标题：Text（'Third'）），
],
),
bottomNavigationBar:BottomAppBar(
子：容器(
颜色：颜色，蓝色，
孩子：TabBar(
指示器：盒子装饰（颜色：颜色。红色调），
选项卡：[
选项卡（子项：文本（“填充”，样式：文本样式（颜色：Colors.white）），
选项卡（子项：文本（“事物”，样式：文本样式（颜色：Colors.white）），
选项卡（子项：文本（“项”，样式：文本样式（颜色：Colors.white）），
],
控制器：\ tab控制器，
),
),
),
);
}
}

结果:


这是一个非常简单的示例，但它演示了其要点。
无法更改
底部导航栏
所选项目的背景，因为这不符合设计指南

如果您仍然希望以这种方式使用它，请遵循中给出的示例，下面是一个解决方法：

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

final\u selectedItemColor=Colors.white；
最终_unselectedItemColor=Colors.white30；
最终_selectedBgColor=Colors.indigo；
最终_unselectedBgColor=Colors.blue；
int _selectedIndex=0；
静态常量文本样式选项样式=
TextStyle（fontSize:30，fontWeight:fontWeight.bold）；
静态常量列表_widgetOptions=[
正文(
'索引0:主'，
样式：可选样式，
),
正文(
"指数1:业务",，
样式：可选样式，
),
正文(
"索引2:学校",，
样式：可选样式，
),
];
void\u未映射（整数索引）{
设置状态（）{
_selectedIndex=索引；
});
}
颜色_getBgColor（整数索引）=>
_selectedIndex==索引_selectedBgColor:\u unselectedBgColor；
颜色\u getItemColor（int索引）=>
_selectedIndex==索引_selectedItemColor:\u取消selectedItemColor；
Widget\u buildIcon（iconda iconda、字符串文本、int索引）=>容器(
宽度：double.infinity，
高度：kBottomNavigationBarHeight，
儿童：材料(
颜色：_getBgColor（索引），
孩子：InkWell(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
图标（Iconda），
文(文,，
样式：TextStyle（fontSize:12，颜色：_getItemColor（索引）），
],
),
onTap:（）=>\u ONITAMTAP（索引），
),
),
);
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：常量文本（“底部导航栏示例”），
),
正文：中(
子项：_widgetOptions.elementAt（_selectedIndex），
),
底部导航栏：底部导航栏(
selectedFontSize:0，
项目：[
底部导航气压计(
图标：_buildIcon（Icons.home，'home'，0），
标题：SizedBox.shrink（），
),
底部导航气压计(
图标：_buildIcon（Icons.business，'business'，1），
标题：SizedBox.shrink（），
),
底部导航气压计(
图标：_buildIcon（Icons.school，'school'，2），
标题：SizedBox.shrink（），
),
],
currentIndex:_selectedIndex，
selectedItemColor:\u selectedItemColor，
unselectedItemColor:\u unselectedItemColor，
),
);
}

结果:

发布您的代码然后不我需要一个示例请参见
底部导航栏
官方文档我已经看到了它，文档没有显示如何制作所需内容我知道如何使用底部导航栏，但问题在于将背景色设置为所选底部导航栏项