Flutter消息提示插件toast_msg的使用

Flutter消息提示插件toast_msg的使用

本项目是一个新的Flutter插件项目。该插件包包含针对Android和/或iOS的平台特定实现代码。

开始使用

要开始使用此Flutter插件，首先需要在你的项目中引入toast_msg包。你可以通过在pubspec.yaml文件中添加依赖来完成这一步：

dependencies:
  toast_msg: ^1.0.0

然后运行flutter pub get以获取该依赖。

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用toast_msg插件。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:toast_msg/toast_msg_service.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  final _focusNode = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetector(
        onTap: () => _focusNode.unfocus(), // 点击空白处时收起键盘
        child: Scaffold(
          appBar: AppBar(
            title: const Text('插件示例应用'),
          ),
          body:  ToastMsgMain(
            margin: const EdgeInsets.symmetric(horizontal: 16),
            // positionValue: 200,
            child:  Column(
              children: [
                const Expanded(
                  child: Center(
                    child: Text('Hello!'), // 显示 "Hello!" 文字
                  ),
                ),
                TextField(autofocus: true, decoration: const InputDecoration(border: OutlineInputBorder()), focusNode: _focusNode,) // 显示一个TextField
              ],
            )),
          floatingActionButton: ElevatedButton(onPressed: (){
            ToastMsgStream.instance.showToast(
              ToastData(
                // title: 'Test Msg', 
                customTitle: _buildCustomTitle(), // 自定义标题
                backgroundColor: Colors.green, // 背景色
                titleStyle: const TextStyle(color: Colors.white), // 文字样式
                iconWidget: const Icon(Icons.info) // 图标
              ),
            );
          }, child: const Icon(Icons.publish)), // 显示一个按钮
        ),
      ),
    );
  }

  Widget _buildCustomTitle() {
    return Text.rich(
                TextSpan(
                  style: const TextStyle(color: Colors.black),
                  children: [
                    const TextSpan(
                      text: '消息内容',
                    ),
                    const TextSpan(text: ' '),
                    TextSpan(
                      text: '点击这里!',
                      style: const TextStyle(color: Colors.red),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          debugPrint('点击这里! 被点击'); // 点击事件处理
                        },
                    )
                  ],
                ),
              );
  }
}

代码解释

• 导入库：

  import 'package:flutter/gestures.dart';
  import 'package:flutter/material.dart';
  import 'package:toast_msg/toast_msg_service.dart';
  

• 主函数：

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

• 创建应用：

  class MyApp extends StatefulWidget {
    const MyApp({super.key});
  
    [@override](/user/override)
    State<MyApp> createState() => _MyAppState();
  }
  

• 初始化状态：

  class _MyAppState extends State<MyApp> {
  
    [@override](/user/override)
    void initState() {
      super.initState();
    }
  

• 创建焦点节点：

  final _focusNode = FocusNode();
  

• 构建UI：

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetector(
        onTap: () => _focusNode.unfocus(), // 点击空白处时收起键盘
        child: Scaffold(
          appBar: AppBar(
            title: const Text('插件示例应用'),
          ),
          body:  ToastMsgMain(
            margin: const EdgeInsets.symmetric(horizontal: 16),
            // positionValue: 200,
            child:  Column(
              children: [
                const Expanded(
                  child: Center(
                    child: Text('Hello!'), // 显示 "Hello!" 文字
                  ),
                ),
                TextField(autofocus: true, decoration: const InputDecoration(border: OutlineInputBorder()), focusNode: _focusNode,) // 显示一个TextField
              ],
            )),
          floatingActionButton: ElevatedButton(onPressed: (){
            ToastMsgStream.instance.showToast(
              ToastData(
                // title: 'Test Msg', 
                customTitle: _buildCustomTitle(), // 自定义标题
                backgroundColor: Colors.green, // 背景色
                titleStyle: const TextStyle(color: Colors.white), // 文字样式
                iconWidget: const Icon(Icons.info) // 图标
              ),
            );
          }, child: const Icon(Icons.publish)), // 显示一个按钮
        ),
      ),
    );
  }
  

• 自定义标题：

  Widget _buildCustomTitle() {
    return Text.rich(
                TextSpan(
                  style: const TextStyle(color: Colors.black),
                  children: [
                    const TextSpan(
                      text: '消息内容',
                    ),
                    const TextSpan(text: ' '),
                    TextSpan(
                      text: '点击这里!',
                      style: const TextStyle(color: Colors.red),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          debugPrint('点击这里! 被点击'); // 点击事件处理
                        },
                    )
                  ],
                ),
              );
  }