Flutter实用工具插件mc_utils的使用

Flutter实用工具插件mc_utils的使用

MC Utils 插件介绍

MC Utils 是一个Flutter插件，提供了多种实用功能，包括视频播放器、自定义TextField、自定义图片、自定义按钮、自定义图标、自定义文本、自定义下拉按钮、自定义列表等。 该插件支持Android和iOS平台。

安装插件

首先，你需要在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  mc_utils: ^<版本号>

然后运行以下命令来安装插件：

flutter pub get

示例代码

下面是一个完整的示例代码，展示了如何使用mc_utils插件的各种功能。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化插件
  await McUtils().initialize(
    onClick: (payload) {
      print('Notification clicked with payload: $payload');
    },
    onRead: (payload) {
      print('Notification read with payload: $payload');
    },
    onReply: (payload) {
      print('Notification replied with payload: $payload');
    },
  );

  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const Home(),
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: AppBarTheme(backgroundColor: Colors.grey[200]),
      ),
    );
  }
}

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

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MC Utils Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 发送通知
            await McUtils().showNotificationMessage(
              model: NotificationMessage(
                id: 1,
                tag: 'tag1',
                title: 'New Notification',
                body: 'This is the body of the notification',
                image: 'https://example.com/image.jpg',
                payload: {'id': 55, "name": "ali"},
                groupKey: 'chat',
              ),
            );
          },
          child: Text('Send Notification'),
        ),
      ),
    );
  }
}

使用说明

1. 初始化插件：

   await McUtils().initialize(
     onClick: (payload) {
       print('Notification clicked with payload: $payload');
     },
     onRead: (payload) {
       print('Notification read with payload: $payload');
     },
     onReply: (payload) {
       print('Notification replied with payload: $payload');
     },
   );
   

   这段代码用于初始化mc_utils插件，并设置点击、读取和回复通知的回调函数。

2. 发送通知：

   await McUtils().showNotificationMessage(
     model: NotificationMessage(
       id: 1,
       tag: 'tag1',
       title: 'New Notification',
       body: 'This is the body of the notification',
       image: 'https://example.com/image.jpg',
       payload: {'id': 55, "name": "ali"},
       groupKey: 'chat',
     ),
   );
   

   这段代码用于显示一条新的通知消息。

3. 接收通知：

   FirebaseMessaging.onBackgroundMessage(handeleBachgroundMessage);
   Future<void> handeleBachgroundMessage(RemoteMessage message) async {
     var payloadData = message.data;
     log(payloadData.toString());
     var model = NotificationModel.fromMap(payloadData);
     McCustomNotification().showNotificationMessage(
       model: NotificationMessage(
         id: 1,
         tag: message.notification?.android?.tag,
         title: model.title,
         body: model.body,
         image: model.image,
         payload: model.payload,
         onRead: (payload) {
           print('Notification read with payload: $payload');
         },
         onReply: (payload) {
           print('Notification replied with payload: $payload');
         },
       ),
     );
   }