Flutter外观管理插件appearance的使用

Flutter外观管理插件appearance的使用

Appearance

Flutter 包，可以轻松地在您的应用中实现浅色、深色和系统主题模式，并且在应用重启时持久化主题模式。

🚀 示例：Appearance

屏幕截图

Appearance Demo 1 Appearance Demo 2

安装

1. 在 pubspec.yaml 文件中添加依赖项：

获取最新版本，请参阅 pub.dev 的 “安装” 选项卡。

dependencies:
  appearance: ^latest_version

2. 导入包

import 'package:appearance/appearance.dart';

如何使用

1. 初始化 SharedPreferencesManager 单例以使用 SharedPreferences，并在 runApp() 方法之前调用。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SharedPreferencesManager.instance.init();
  runApp(const MyApp());
}

2. 使用关键字 with 扩展您的根类 AppearanceState。

class _MyAppState extends State<MyApp> with AppearanceState { }

3. 将您的 MaterialApp 或 CupertinoApp 包裹在 BuildWithAppearance 中。

BuildWithAppearance(
    initial: ThemeMode.light, // 可选参数，默认值为 [ThemeMode.system]
    builder: (context) => MaterialApp()
);

使用 MaterialApp

BuildWithAppearance(
    initial: ThemeMode.light, // 可选参数，默认值为 [ThemeMode.system]
    builder: (context) => MaterialApp(
        title: 'Appearance (Material Example)',
        themeMode: Appearance.of(context)?.mode,
        theme: ThemeData(
            brightness: Brightness.light,
        ),
        darkTheme: ThemeData(
            brightness: Brightness.dark,
        ),
        home: const HomeMaterialPage(),
    ),
);

使用 CupertinoApp

BuildWithAppearance(
    initial: ThemeMode.light, // 可选参数，默认值为 [ThemeMode.system]
    builder: (context) {
        return CupertinoApp(
            title: 'Appearance (Cupertino Example)',
            theme: CupertinoThemeData(
                brightness: Appearance.of(context)?.cupertinoBrightness!,
            ),
            localizationsDelegates: const [
                DefaultMaterialLocalizations.delegate,
                DefaultCupertinoLocalizations.delegate,
                DefaultWidgetsLocalizations.delegate,
            ],
            home: HomeCupertinoPage(),
        );
    },
);

特性

  • 浅色、深色和系统 模式选项，用于更改应用程序的主题。
  • 主题持久化：使用 SharedPreferences 保存主题，并在重启时保持不变。
  • 自动监听主题模式变化，无需额外添加监听器。
  • 支持 Material 和 Cupertino 应用。

参数

  • initial: [可选] 设置应用的初始 ThemeMode。默认值为 ThemeMode.system。

更改主题模式

您可以使用 setMode 方法来更改应用的主题模式。

// 设置主题模式为系统
Appearance.of(context)?.setMode(ThemeMode.system),

// 设置主题模式为浅色
Appearance.of(context)?.setMode(ThemeMode.light),

// 设置主题模式为深色
Appearance.of(context)?.setMode(ThemeMode.dark),

获取主题模式

// 获取当前活动的主题模式
Appearance.of(context)?.mode

获取 Cupertino 主题亮度

// 获取当前活动的 Cupertino 主题亮度
Appearance.of(context)?.cupertinoBrightness!,

更多关于Flutter外观管理插件appearance的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter外观管理插件appearance的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用appearance插件来进行外观管理的一个简单示例。appearance插件本身不是一个官方或广泛认可的Flutter插件名称，但我们可以假设你指的是如何通过Flutter的主题（Theme）和外观（Appearance）管理UI风格。

在Flutter中，主题管理通常通过ThemeData类来实现，它允许我们定义应用程序的全局颜色、字体、形状等。虽然没有一个特定的appearance插件，但我们可以使用Flutter的主题系统来模拟类似的功能。

下面是一个简单的示例，展示如何使用ThemeData来管理Flutter应用的外观：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Appearance Demo',
      theme: ThemeData(
        // 定义主题的颜色
        primarySwatch: Colors.blue,
        // 自定义文本主题
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 32, color: Colors.deepPurple),
          bodyText1: TextStyle(fontSize: 16, color: Colors.black),
        ),
        // 自定义按钮样式
        buttonTheme: ButtonThemeData(
          buttonColor: Colors.green,
          textTheme: ButtonTextTheme.primary,
        ),
        // 自定义应用栏样式
        appBarTheme: AppBarTheme(
          color: Colors.blueGrey,
          titleTextStyle: TextStyle(color: Colors.white),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Appearance Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Headline 1',
              style: theme.textTheme.headline1,
            ),
            SizedBox(height: 20),
            Text(
              'Body Text 1',
              style: theme.textTheme.bodyText1,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Styled Button'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 定义全局主题：在MaterialApp的theme属性中，我们定义了一个ThemeData对象，它包含了我们的颜色方案、文本主题、按钮主题和应用栏主题。

  2. 使用主题：在MyHomePage中，我们通过Theme.of(context)获取当前的主题，并应用到我们的小部件上，比如文本和按钮。

这种方式允许我们在一个地方集中管理应用的外观，从而确保整个应用的一致性和可维护性。如果你指的是某个特定的第三方appearance插件，那么你可能需要查阅该插件的文档来获取具体的用法示例。不过，上述方法是Flutter中管理外观的通用和推荐方式。

回到顶部