Flutter主题管理插件nui_theme的使用

Flutter主题管理插件nui_theme的使用

nui_theme 是一个用于 Flutter 的主题管理插件。它可以帮助开发者轻松地管理和切换应用的主题样式。

获取开始

安装插件

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

dependencies:
  nui_theme: ^0.1.0

然后运行以下命令以获取依赖项:

flutter pub get

使用示例

以下是一个完整的示例,展示如何使用 nui_theme 插件来管理应用的主题。

主题定义

首先,我们需要定义一些主题样式。这些样式可以包括颜色、字体大小等。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义两个主题
    final lightTheme = ThemeData(
      primaryColor: Colors.blue,
      scaffoldBackgroundColor: Colors.white,
      textTheme: TextTheme(
        bodyText1: TextStyle(color: Colors.black),
      ),
    );

    final darkTheme = ThemeData(
      primaryColor: Colors.grey[800],
      scaffoldBackgroundColor: Colors.grey[900],
      textTheme: TextTheme(
        bodyText1: TextStyle(color: Colors.white),
      ),
    );

    return ThemeProvider(
      initialTheme: lightTheme, // 初始主题为亮色主题
      themes: [lightTheme, darkTheme], // 可用主题列表
      child: MaterialApp(
        title: 'nui_theme 示例',
        theme: ThemeProvider.themeOf(context), // 使用当前主题
        home: MyHomePage(),
      ),
    );
  }
}

切换主题

在应用中,我们可以通过按钮或其他交互方式来切换主题。

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('nui_theme 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前主题:${ThemeProvider.themeOf(context).primaryColor}',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到下一个主题
                ThemeProvider.of(context).switchTheme();
              },
              child: Text('切换主题'),
            ),
          ],
        ),
      ),
    );
  }
}
1 回复

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


nui_theme 是一个用于 Flutter 的主题管理插件,它可以帮助开发者更轻松地管理和切换应用的主题。通过 nui_theme,你可以定义多个主题,并在运行时动态切换它们。以下是如何使用 nui_theme 的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 nui_theme 依赖:

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

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

2. 定义主题

你可以定义多个主题,每个主题可以包含不同的颜色、字体、样式等。

import 'package:nui_theme/nui_theme.dart';

final lightTheme = AppTheme(
  primaryColor: Colors.blue,
  accentColor: Colors.blueAccent,
  textTheme: TextTheme(
    bodyText1: TextStyle(color: Colors.black),
    bodyText2: TextStyle(color: Colors.black87),
  ),
);

final darkTheme = AppTheme(
  primaryColor: Colors.indigo,
  accentColor: Colors.indigoAccent,
  textTheme: TextTheme(
    bodyText1: TextStyle(color: Colors.white),
    bodyText2: TextStyle(color: Colors.white70),
  ),
);

3. 初始化主题管理

在你的应用启动时,初始化 nui_theme 并设置默认主题。

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

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

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

4. 切换主题

你可以在应用的任何地方通过 ThemeManager 来切换主题。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, World!',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            ElevatedButton(
              onPressed: () {
                ThemeManager.of(context).setTheme(lightTheme);
              },
              child: Text('Light Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                ThemeManager.of(context).setTheme(darkTheme);
              },
              child: Text('Dark Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 使用主题

在应用的其他部分,你可以通过 Theme.of(context) 来获取当前主题的样式。

Text(
  'This is some text',
  style: Theme.of(context).textTheme.bodyText1,
);

6. 保存主题偏好

你还可以将用户选择的主题偏好保存到本地存储中,以便在应用重启时恢复用户的选择。

import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveThemePreference(String themeName) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('theme', themeName);
}

Future<AppTheme> loadThemePreference() async {
  final prefs = await SharedPreferences.getInstance();
  final themeName = prefs.getString('theme') ?? 'light';
  return themeName == 'light' ? lightTheme : darkTheme;
}

在应用启动时加载保存的主题:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final savedTheme = await loadThemePreference();
  runApp(MyApp(savedTheme));
}

class MyApp extends StatelessWidget {
  final AppTheme savedTheme;

  MyApp(this.savedTheme);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ThemeManager(
      defaultTheme: savedTheme,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeManager.of(context).themeData,
        home: MyHomePage(),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!