Flutter主题切换插件tai_themer的使用

特性

  • 使用ColorSet为项目定义颜色，可以支持单一颜色或同时支持亮色模式和暗色模式。

开始使用

首先安装该插件，并通过ColorSet构造函数构建您的颜色信息。推荐将它们存储为变量，然后在主题或其他需要的地方使用。

使用示例

颜色的使用

// 定义主颜色
var colorPrimary = ColorSet(Color(0xFFFF3030));

// 定义主颜色上的文本颜色，支持亮色和暗色模式
var colorOnPrimary = ColorSet.adaptive(light: Colors.black, dark: Colors.white);

主题的使用

// 自定义主题
var myTheme = TaiTheme(ThemeData(
  primaryColor: colorPrimary.color, // 使用之前定义的颜色
  scaffoldBackgroundColor: Colors.grey[200], // 设置背景颜色
));

// 创建一个支持亮色和暗色模式的主题
var adaptiveTheme = TaiTheme.adaptive(
  light: ThemeData(
    primaryColor: Colors.blue,
    scaffoldBackgroundColor: Colors.white,
  ),
  dark: ThemeData(
    primaryColor: Colors.indigo,
    scaffoldBackgroundColor: Colors.black,
  ),
);

// 设置自定义的文本主题（可选）
myTheme.setTextTheme(TextTheme(
  headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  bodyText1: TextStyle(fontSize: 16),
));

// 在应用中使用主题
final ThemeData currentTheme = myTheme.data; // 获取当前主题
final ThemeData lightTheme = myTheme.light; // 获取亮色主题
final ThemeData darkTheme = myTheme.dark; // 获取暗色主题

完整示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用tai_themer插件进行主题切换：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Switcher Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late TaiTheme _theme;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化TaiTheme
    _theme = TaiTheme(
      ThemeData(
        primaryColor: ColorSet(Color(0xFF6200EE)).color, // 紫色为主色调
        scaffoldBackgroundColor: Colors.grey[200],
      ),
      adaptive: true, // 启用亮色/暗色模式
      lightTheme: ThemeData(
        primaryColor: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
      ),
      darkTheme: ThemeData(
        primaryColor: Colors.indigo,
        scaffoldBackgroundColor: Colors.black,
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主题切换示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '当前主题颜色',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到亮色模式
                _theme.setBrightness(Brightness.light);
              },
              child: Text('切换到亮色模式'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                // 切换到暗色模式
                _theme.setBrightness(Brightness.dark);
              },
              child: Text('切换到暗色模式'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


tai_themer 是一个用于 Flutter 应用主题切换的插件，它允许开发者轻松地在应用中实现主题的动态切换。以下是如何使用 tai_themer 插件的详细步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 tai_themer 依赖：

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

然后运行 flutter pub get 来安装依赖。

2. 创建主题

在 lib 目录下创建一个 themes 文件夹，并在其中定义你的主题。例如，创建 app_themes.dart 文件：

import 'package:flutter/material.dart';

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

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

3. 初始化 tai_themer

在 main.dart 文件中初始化 tai_themer，并将其包裹在 MaterialApp 外面：

import 'package:flutter/material.dart';
import 'package:tai_themer/tai_themer.dart';
import 'themes/app_themes.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return TaiThemer(
      themes: {
        'light': AppThemes.lightTheme,
        'dark': AppThemes.darkTheme,
      },
      initialTheme: 'light',
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: TaiThemer.of(context).currentTheme,
        home: MyHomePage(),
      ),
    );
  }
}

4. 切换主题

在需要切换主题的地方，使用 TaiThemer.of(context).setTheme('theme_name') 来切换主题。例如，在 MyHomePage 中添加一个按钮来切换主题：

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Switcher'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme: ${TaiThemer.of(context).currentThemeName}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                TaiThemer.of(context).setTheme('dark');
              },
              child: Text('Switch to Dark Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                TaiThemer.of(context).setTheme('light');
              },
              child: Text('Switch to Light Theme'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部