Flutter 主题动画 AnimatedTheme

最新推荐文章于 2024-09-08 07:50:35 发布

原创最新推荐文章于 2024-09-08 07:50:35 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

此篇博客展示了如何在Flutter应用中使用AnimatedTheme组件来创建动态主题切换效果。通过点击，实现了Card颜色在红色和蓝色之间的平滑过渡，同时详细介绍了 AnimatedTheme 的用法及其在界面中的实际应用。

通过源代码更能理解AnimatedTheme

import 'package:flutter/material.dart';

class AnimatedThemeDemo extends StatefulWidget {
  const AnimatedThemeDemo({Key? key}) : super(key: key);

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

class _AnimatedThemeDemoState extends State<AnimatedThemeDemo> {
  Color _myColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Card主题颜色的改变"),
        ),
        body: AnimatedTheme(
          duration: Duration(seconds: 5),
          data: ThemeData(
            primarySwatch: Colors.yellow,
            buttonColor: Colors.red,
            cardColor: _myColor,
          ),
          child: InkWell(
            child: Column(
              children: [
                Card(
                  child: Container(
                    width: 200,
                    height: 200,
                    child: Text("请点方块"),
                  ),
                ),
              ],
            ),
            onTap: () {
              setState(() {
                _myColor = _myColor == Colors.red ? Colors.blue : Colors.red;
                print("object");
              });
            },
          ),
        ),
      ),
    );
  }
}