Flutter主题管理插件im_themed的使用

功能

im_themed 插件允许在运行时更改 ThemeData。

特性

• 支持基本的 ThemeData 解析和编码为 JSON

开始使用

安装

在终端中运行以下命令来添加插件：

flutter pub add im_themed

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

dependencies:
  im_themed: <last_version>

使用示例

完整的示例代码可以在 这里 查看。

示例代码

void main() async {
  runApp(
    const ImThemedApp(
      app: MainPage(),
    ),
  );
}

主页面代码

import 'dart:convert';

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

ThemeData initialTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.light,
);

void main() async {
  runApp(
    const ImThemedApp(
      app: MainPage(),
    ),
  );
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  [@override](/user/override)
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final JsonEncoder encoder = const JsonEncoder.withIndent('  ');
  late final textController = TextEditingController(
    text: encoder.convert(context.theme.toJson()),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ImThemedApp(
      initialTheme: initialTheme,
      app: Builder(
        builder: (context) {
          return MaterialApp(
            theme: context.theme,
            debugShowCheckedModeBanner: false,
            home: Scaffold(
              appBar: AppBar(
                backgroundColor: Theme.of(context).colorScheme.primary,
                title: Text(
                  '实时主题编辑器',
                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                            color: Theme.of(context).colorScheme.onPrimary,
                          ) ??
                      TextStyle(color: Theme.of(context).colorScheme.onPrimary),
                ),
              ),
              body: SafeArea(
                top: false,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Expanded(
                      child: TextField(
                        controller: textController,
                        decoration: const InputDecoration(
                          contentPadding: EdgeInsets.all(20.0),
                        ),
                        expands: true,
                        minLines: null,
                        maxLines: null,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ElevatedButton(
                        onPressed: updateAppTheme,
                        child: const Padding(
                          padding: EdgeInsets.all(10.0),
                          child: Text('应用主题'),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        }
      ),
    );
  }

  void updateAppTheme() {
    try {
      final themeData = ThemeDataJsonConverterExtension.fromJson(
        jsonDecode(textController.text),
      );
      setState(() {
        initialTheme = themeData;
      });
    } catch (error) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(error.toString()),
        ),
      );
    }
  }
}

在这个示例中，我们创建了一个简单的应用程序，其中包含一个文本框和一个按钮。用户可以输入主题数据的 JSON 表示形式，并通过点击“应用主题”按钮将其应用到当前主题。

关键代码解释

1. 初始化主题

   ThemeData initialTheme = ThemeData(
     primarySwatch: Colors.blue,
     brightness: Brightness.light,
   );
   

   这里定义了初始主题。

2. 构建方法

   [@override](/user/override)
   Widget build(BuildContext context) {
     return ImThemedApp(
       initialTheme: initialTheme,
       app: Builder(
         builder: (context) {
           return MaterialApp(
             theme: context.theme,
             debugShowCheckedModeBanner: false,
             home: Scaffold(
               appBar: AppBar(
                 backgroundColor: Theme.of(context).colorScheme.primary,
                 title: Text(
                   '实时主题编辑器',
                   style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                             color: Theme.of(context).colorScheme.onPrimary,
                           ) ??
                       TextStyle(color: Theme.of(context).colorScheme.onPrimary),
                 ),
               ),
               body: SafeArea(
                 top: false,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: [
                     Expanded(
                       child: TextField(
                         controller: textController,
                         decoration: const InputDecoration(
                           contentPadding: EdgeInsets.all(20.0),
                         ),
                         expands: true,
                         minLines: null,
                         maxLines: null,
                       ),
                     ),
                     Padding(
                       padding: const EdgeInsets.all(8.0),
                       child: ElevatedButton(
                         onPressed: updateAppTheme,
                         child: const Padding(
                           padding: EdgeInsets.all(10.0),
                           child: Text('应用主题'),
                         ),
                       ),
                     ),
                   ],
                 ),
               ),
             ),
           );
         }
       ),
     );
   }
   

   构建方法中，我们使用 ImThemedApp 来包裹我们的 MaterialApp，并将初始主题传递给它。文本框用于输入 JSON 格式的主题数据，按钮用于更新主题。

3. 更新主题

   void updateAppTheme() {
     try {
       final themeData = ThemeDataJsonConverterExtension.fromJson(
         jsonDecode(textController.text),
       );
       setState(() {
         initialTheme = themeData;
       });
     } catch (error) {
       ScaffoldMessenger.of(context).showSnackBar(
         SnackBar(
           content: Text(error.toString()),
         ),
       );
     }
   }