Flutter：使用底部导航栏为应用栏颜色设置动画

Posted 2023-02-23

【中文标题】Flutter：使用底部导航栏为应用栏颜色设置动画

【英文标题】：Flutter: animate appbar color with bottomnavigationbar

【发布时间】：2020-05-30 22:40:17

【问题描述】：

我不会像底部导航栏对 shift 类型那样为我的 appbar 颜色设置动画。所以appbar和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),
          ]),
    );
  

我该怎么做？ （我对 Flutter 还很陌生）谢谢！

【参考方案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]),
          ]),
    );
  

观看现场演示here。