Flutter：使用bottomnavigationbar为应用栏颜色设置动画

Question

我不会像设置导航栏的bottomnavigationbar一样为我的应用栏颜色设置动画。因此，应用程序栏和底部导航栏会同时更改颜色。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int _tabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dash')),
      body: Container(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _tabIndex,
        onTap: (value) => setState(() => _tabIndex = value),
          type: BottomNavigationBarType.shifting,
          unselectedItemColor: Theme.of(context).unselectedWidgetColor,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.dashboard), title: Text('Dash'), backgroundColor: Colors.blue),
            BottomNavigationBarItem(
                icon: Icon(Icons.insert_chart), title: Text('Data'), backgroundColor: Colors.red),
            BottomNavigationBarItem(
                icon: Icon(Icons.monetization_on), title: Text('Income'), backgroundColor: Colors.orange),
          ]),
    );
  }
}

我该怎么做？ （我是新来的人）谢谢！

Answer 1

非常简单。只需根据所选索引更改颜色。

您去这里

   import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _tabIndex = 0;
  var colors = [Colors.blue, Colors.red, Colors.orange];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dash'),
        backgroundColor: colors[_tabIndex],
      ),
      body: Container(),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _tabIndex,
          onTap: (value) => setState(() => _tabIndex = value),
          type: BottomNavigationBarType.shifting,
          unselectedItemColor: Theme.of(context).unselectedWidgetColor,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.dashboard),
                title: Text('Dash'),
                backgroundColor: colors[0]),
            BottomNavigationBarItem(
                icon: Icon(Icons.insert_chart),
                title: Text('Data'),
                backgroundColor: colors[1]),
            BottomNavigationBarItem(
                icon: Icon(Icons.monetization_on),
                title: Text('Income'),
                backgroundColor: colors[2]),
          ]),
    );
  }
}