Flutter聊天界面主题定制插件chat_uikit_theme的使用

Flutter聊天界面主题定制插件chat_uikit_theme的使用

开始使用

要使用聊天界面的主题定制插件chat_uikit_theme，你需要遵循以下步骤：

1. 实现ChatUIKitThemeMixin
   如果你想使用主题，首先需要在你的状态类中实现ChatUIKitThemeMixin。

   class _NextWidgetState extends State<NextWidget> with ChatUIKitThemeMixin {}
   

2. 覆盖themeBuilder方法
   覆盖themeBuilder方法来构建你的主题。当你使用themeBuilder时，无需再覆盖build方法。

   // 这里传递的主题是已经设置好的主题，你可以从中获取值。
   Widget themeBuilder(BuildContext context, ChatUIKitTheme theme) {
     // 返回一些小部件
   }
   

3. 设置主题

   • 颜色 使用ChatUIKitTheme.instance.setColor方法来设置颜色。

     ChatUIKitTheme.instance.setColor(
         ChatUIKitColor.light(primaryHue: 203),
     );
     

   • 字体 使用ChatUIKitTheme.instance.setFont方法来设置字体大小。

     ChatUIKitTheme.instance.setFont(
         ChatUIKitFont.fontSize(ChatUIKitFontSize.normal),
     );
     

示例代码

以下是一个完整的示例，展示了如何使用chat_uikit_theme插件来自定义聊天界面的主题。

import 'package:chat_uikit_theme/chat_uikit_theme.dart';
import 'package:example/next_widget.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 应用程序的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

// 1. 当你想要使用ChatUIKitTheme时，使用"with"关键字
class _MyHomePageState extends State<MyHomePage> with ChatUIKitThemeMixin {
  int _counter = 0;

  // 2. 使用themeBuilder来包装你的小部件。当使用themeBuilder时，无需覆盖build方法
  [@override](/user/override)
  Widget themeBuilder(BuildContext context, ChatUIKitTheme theme) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Text(
            '文本',
            style: TextStyle(
              fontSize: theme.font.bodyMedium.fontSize,
              color: theme.color.primaryColor5,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                if (_counter % 2 == 1) {
                  // 3. 使用ChatUIKitTheme.instance来设置字体或颜色
                  ChatUIKitTheme.instance.setFont(
                      ChatUIKitFont.fontSize(ChatUIKitFontSize.normal));
                  ChatUIKitTheme.instance.setColor(
                    ChatUIKitColor.light(primaryHue: 203),
                  );
                } else {
                  // 3. 使用ChatUIKitTheme.instance来设置字体或颜色
                  ChatUIKitTheme.instance.setFont(
                      ChatUIKitFont.fontSize(ChatUIKitFontSize.superLarge));
                  ChatUIKitTheme.instance
                      .setColor(ChatUIKitColor.dark(primaryHue: 10));
                }

                _counter++;
              });
            },
            child: const Text('切换字体大小'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return const NextWidget();
              }));
            },
            child: const Text('下一个页面'),
          ),
        ],
      ),
    );
  }
}