Flutter主题切换插件cute_theme的使用

Flutter主题切换插件cute_theme的使用

在您的Flutter项目中添加依赖项：

dependencies:
  ...
  cute_theme_annotation: any

dev_dependencies:
  ...
  cute_theme: any
  build_runner: any

接下来，导入flutter_cute.dart文件并添加部分指令：

import 'package:cute_theme_annotation/cute_theme_annotation.dart';

part 'app_theme.cute.dart';

创建基础主题类：

@CuteTheme()
class $AppTheme {
  $AppTheme({
    required Brightness brightness,
    required Color colorBackground,
    required BorderRadius borderRadiusMd,
    required TextStyle textTitleSmall,
    required EdgeInsets paddingMd,
  });
}

运行代码生成器：

flutter run build_runner build --delete-conflicting-outputs

创建主题：

class AppThemes {
  static AppTheme get light {
    return AppTheme(
      brightness: Brightness.light,
      colorBackground: Colors.white,
      borderRadiusMd: BorderRadius.circular(8),
      textTitleSmall: TextStyle(fontWeight: FontWeight.w500),
      paddingMd: BorderRadius.circular(8),
    );
  }

  static AppTheme get dark {
    return AppTheme(
      brightness: Brightness.dark,
      colorBackground: Colors.black,
      borderRadiusMd: BorderRadius.circular(8),
      textTitleSmall: TextStyle(fontWeight: FontWeight.w500),
      paddingMd: EdgeInsets.all(8),
    );
  }
}

添加扩展：

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
        brightness: AppThemes.light.brightness, 
        extensions: [AppThemes.light]
    ),
    darkTheme: ThemeData(
        brightness: AppThemes.dark.brightness, 
        extensions: [AppThemes.dark]
    ),
  );
}

最后使用它！

[@override](/user/override)
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      color: AppTheme.of(context).colorBackground,
      borderRadius: AppTheme.of(context).borderRadiusMd,
    ),
    child: Padding(
      padding: AppTheme.of(context).paddingMd,
      child: Text("CuteTheme", style: AppTheme.of(context).textTitleSmall),
    ),
  );
}

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

1 回复

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


cute_theme 是一个用于 Flutter 应用的主题切换插件，它可以帮助开发者轻松地管理和切换应用的主题。以下是如何使用 cute_theme 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  cute_theme: ^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. 初始化 CuteTheme

在 main.dart 文件中，初始化 CuteTheme 并设置默认主题：

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

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

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

4. 切换主题

在应用中，你可以使用 CuteTheme 提供的 setTheme 方法来切换主题。例如，在 MyHomePage 中添加一个按钮来切换主题：

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cute Theme Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final cuteTheme = CuteTheme.of(context);
            if (cuteTheme.currentTheme == AppThemes.lightTheme) {
              cuteTheme.setTheme(AppThemes.darkTheme);
            } else {
              cuteTheme.setTheme(AppThemes.lightTheme);
            }
          },
          child: Text('切换主题'),
        ),
      ),
    );
  }
}
回到顶部