Flutter主题动画切换插件flutter_animated_theme的使用

Flutter主题动画切换插件flutter_animated_theme的使用

在Flutter中自定义主题切换时的动画效果。这一想法受到Telegram主题切换动画的启发。经过研究，我发现Flutter中并没有类似的实现，因此这个包应运而生。

开始使用

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_animated_theme: ^1.0.0

可用动画

相信我，实际的动画效果比演示中的要流畅得多，由于这是GIF演示，所以看起来有些卡顿。

动画类型 淡入动画（默认） 缩放动画 圆形动画
结果

如何使用

首先，我们声明我们的浅色和深色主题。

final lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.white,
  accentColor: Colors.greenAccent,
  bottomAppBarColor: Colors.greenAccent,
  hintColor: Colors.yellowAccent,
  textTheme: TextTheme(
    title: TextStyle(
      color: Colors.white,
    ),
  ),
);

final darkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.black,
  accentColor: Colors.blueAccent,
  hintColor: Colors.deepOrangeAccent,
  bottomAppBarColor: Colors.grey,
  textTheme: TextTheme(
    title: TextStyle(
      color: Colors.white,
    ),
  ),
);

然后导入包文件：

import 'package:flutter_animated_theme/animated_theme_app.dart';
import 'package:flutter_animated_theme/animation_type.dart';

接下来，在构建函数中使用包内的定制应用。这只会为你的应用添加动画功能，你仍然可以使用MaterialApp的所有功能。在应用类的构建函数中添加以下代码：

return AnimatedThemeApp(
  debugShowCheckedModeBanner: false,
  themeMode: ThemeMode.light,
  theme: lightTheme,
  darkTheme: darkTheme,
  home: // Your home page,
);

现在你会得到默认的淡入动画，该动画默认持续时间为600毫秒。

你可以通过以下方式来自定义动画：

return AnimatedThemeApp(
  debugShowCheckedModeBanner: false,
  themeMode: ThemeMode.light,
  animationDuration: Duration(milliseconds: 500),
  animationType: AnimationType.CIRCULAR_ANIMATED_THEME,
  theme: lightTheme,
  darkTheme: darkTheme,
  home: // Your home page,
);

你可以将动画类型更改为当前已实现的任何一种动画。

enum AnimationType {
  FADE_ANIMATED_THEME,
  SCALE_ANIMATED_THEME,
  CIRCULAR_ANIMATED_THEME,
}

同时，你可以根据需求调整动画持续时间。

如果你想要切换主题，只需保持浅色和深色主题不变，并根据用户的偏好更改ThemeMode值即可。

实现方式

你可以在首选平台查看这篇文章，详细了解该包是如何实现的。

我们的目标

我们正在努力实现更多的动画效果以增强该包的功能，因此请随时告诉我们你的想法，以便我们可以将其公开发布。

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_animated_theme_example/app.dart';

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

import 'package:flutter/material.dart';
import 'package:flutter_animated_theme/animated_theme_app.dart';
import 'package:flutter_animated_theme/animation_type.dart';

final lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.white,
  accentColor: Colors.greenAccent,
  bottomAppBarColor: Colors.greenAccent,
  hintColor: Colors.yellowAccent,
  textTheme: TextTheme(
    title: TextStyle(
      color: Colors.white,
    ),
  ),
);

final darkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.black,
  accentColor: Colors.blueAccent,
  hintColor: Colors.deepOrangeAccent,
  bottomAppBarColor: Colors.grey,
  textTheme: TextTheme(
    title: TextStyle(
      color: Colors.white,
    ),
  ),
);

class App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedThemeApp(
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.light,
      animationDuration: Duration(milliseconds: 500),
      animationType: AnimationType.CIRCULAR_ANIMATED_THEME,
      theme: lightTheme,
      darkTheme: darkTheme,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Theme Example'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

更多关于Flutter主题动画切换插件flutter_animated_theme的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter主题动画切换插件flutter_animated_theme的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_animated_theme 是一个用于在 Flutter 应用中实现主题切换动画的插件。它允许你在不同的主题之间进行平滑的过渡动画，从而提升用户体验。以下是使用 flutter_animated_theme 插件的步骤和示例代码。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_animated_theme 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_animated_theme: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 创建主题

你可以定义多个主题，并使用 ThemeData 来配置它们。例如：

import 'package:flutter/material.dart';

final lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  accentColor: Colors.blueAccent,
);

final darkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.indigo,
  accentColor: Colors.indigoAccent,
);

3. 使用 AnimatedTheme

在你的应用的顶层使用 AnimatedTheme 来包裹 MaterialApp，并设置初始主题和动画时间。

import 'package:flutter/material.dart';
import 'package:flutter_animated_theme/flutter_animated_theme.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeData _currentTheme = lightTheme;

  void _toggleTheme() {
    setState(() {
      _currentTheme = _currentTheme == lightTheme ? darkTheme : lightTheme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedTheme(
      data: _currentTheme,
      duration: Duration(milliseconds: 500),
      child: MaterialApp(
        title: 'Flutter Animated Theme Demo',
        theme: _currentTheme,
        home: MyHomePage(toggleTheme: _toggleTheme),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final VoidCallback toggleTheme;

  MyHomePage({required this.toggleTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Theme Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: toggleTheme,
          child: Text('Toggle Theme'),
        ),
      ),
    );
  }
}

4. 运行应用

现在你可以运行应用，点击按钮来切换主题，并观察主题之间的平滑过渡动画。

5. 自定义动画

你可以通过调整 AnimatedTheme 的 duration 和 curve 属性来自定义动画的持续时间和动画曲线。

AnimatedTheme(
  data: _currentTheme,
  duration: Duration(milliseconds: 1000),
  curve: Curves.easeInOut,
  child: MaterialApp(
    title: 'Flutter Animated Theme Demo',
    theme: _currentTheme,
    home: MyHomePage(toggleTheme: _toggleTheme),
  ),
);
回到顶部