Flutter消息提示插件x_message的使用

Flutter消息提示插件x_message的使用

在Flutter中展示Toast、消息提示和加载动画，可以使用x_message插件。它提供了简单易用的API来满足各种需求。

安装

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

dependencies:
  x_message: ^0.1.0

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

使用

导入

你可以通过以下方式导入插件：

import 'package:x_message/x_message.dart';
// 或者
import 'package:x_message/src/toast.dart';
import 'package:x_message/src/message.dart';
import 'package:x_message/src/loading.dart';

基本用法

Toast

简单的Toast示例：

Toast(
    context: context,
    message: 'Toast',
);

自定义Toast样式：

Toast(
    context: context,
    message: 'Toast',
    position: ToastPosition.center,
    padding: const EdgeInsets.all(5),
    fontSize: 16,
    color: Colors.blue,
    backgroundColor: Colors.white,
    border: Border.all(
        color: Colors.blue,
        width: 1),
    borderRadius: 8,
);

设置默认样式：

Toast.defaultToEdge = 40;
Toast.defaultPosition = ToastPosition.center;
Toast.defaultDuration = const Duration(seconds: 2);
Toast.defaultPadding = const EdgeInsets.all(20);
Toast.defaultFontSize = 16;
Toast.defaultColor = Colors.grey;
Toast.defaultBackgroundColor = Colors.black;
Toast.defaultBorder = Border.all(
    color: Colors.black,
    width: 0.5,
);
Toast.defaultBorderRadius = 7;

重置默认样式：

// Toast.reset();
Toast.resetDefaultToEdge();
Toast.resetDefaultPosition();
Toast.resetDefaultDuration();
Toast.resetDefaultPadding();
Toast.resetDefaultFontSize();
Toast.resetDefaultColor();
Toast.resetDefaultBackgroundColor();
Toast.resetDefaultBorder();
Toast.resetDefaultBorderRadius();

设置自定义子组件：

Toast(
    context: context,
    child: const Icon(Icons.ac_unit),
);

消息提示（Message）

简单的消息提示：

Message(
    context: context,
    message: 'Message',
);

自定义消息提示样式：

Message(
    context: context,
    message: 'Message',
    width: 400,
    spacer: 20,
    duration: const Duration(seconds: 15),
    padding: const EdgeInsets.all(15),
    fontSize: 17,
    textAlign: TextAlign.center,
    overflow: TextOverflow.clip,
    softWrap: true,
    color: Colors.grey,
    backgroundColor: Colors.black,
    border: Border.all(
        color: Colors.black,
        width: 0.5,
    ),
    borderRadius: 7,
    // showClose: false,
    close: const Icon(
        Icons.ac_unit,
        color: Colors.grey,
    ),
);

设置默认样式：

Message.defaultWidth = 400;
Message.defaultSpacer = 20;
Message.defaultDuration = const Duration(seconds: 15);
Message.defaultPadding = const EdgeInsets.all(15);
Message.defaultFontSize = 17;
Message.defaultTextAlign = TextAlign.center;
Message.defaultOverFlow = TextOverflow.clip;
Message.defaultSoftWrap = true;
Message.defaultColor = Colors.grey;
Message.defaultBackgroundColor = Colors.black;
Message.defaultBorder = Border.all(
    color: Colors.black,
    width: 0.5,
);
Message.defaultBorderRadius = 7;
// Message.defaultShowClose = false;
Message.defaultClose = const Icon(
    Icons.ac_unit,
    color: Colors.grey,
);

重置默认样式：

// Message.reset();
Message.resetDefaultWidth();
Message.resetDefaultSpacer();
Message.resetDefaultDuration();
Message.resetDefaultPadding();
Message.resetDefaultFontSize();
Message.resetDefaultTextAlign();
Message.resetDefaultOverFlow();
Message.resetDefaultSoftWrap();
Message.resetDefaultColor();
Message.resetDefaultBackgroundColor();
Message.resetDefaultBorder();
Message.resetDefaultBorderRadius();
Message.resetDefaultShowClose();
Message.resetDefaultClose();

设置自定义子组件：

late Message message;
message = Message(
    context: context,
    child: Row(
        children: [
            const Text('Message'),
            MaterialButton(
                onPressed: () {
                message.remove();
                },
                child: const Text('remove'),
            ),
        ],
    ),
);

加载动画（Loading）

简单的加载动画：

final loading = Loading(
    context: context,
);
loading.show();
await Future.delayed(const Duration(seconds: 2));
loading.hide();

自定义加载动画样式：

final loading = Loading(
    context: context,
    child: const Icon(Icons.ac_unit),
    backgroundColor: Colors.black12,
);
loading.show();
await Future.delayed(const Duration(seconds: 2));
loading.hide();

设置默认样式：

Loading.defaultIcon = const Icon(Icons.ac_unit);
Loading.defaultBackgroundColor = Colors.black12;

重置默认样式：

// Loading.reset();
Loading.resetDefaultIcon();
Loading.resetDefaultBackgroundColor();

示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'X Message',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'X Message'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final Color _buttonColor = Colors.blue;
  final TextStyle _textStyle = const TextStyle(color: Colors.white);
  final Widget _itemSpacer = const SizedBox(height: 10);
  final Widget _groupSpacer = const SizedBox(height: 40);

  int _messageIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: <Widget>[
          MaterialButton(
            onPressed: () {
              Toast(
                context: context,
                message: 'Toast',
              );
            },
            color: _buttonColor,
            child: Text(
              'Toast',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              Toast(
                context: context,
                message: 'Toast',
                position: ToastPosition.center,
                padding: const EdgeInsets.all(5),
                fontSize: 16,
                color: Colors.blue,
                backgroundColor: Colors.white,
                border: Border.all(
                  color: Colors.blue,
                  width: 1,
                ),
                borderRadius: 8,
              );
            },
            color: _buttonColor,
            child: Text(
              'Toast Styles',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              Toast.defaultToEdge = 40;
              Toast.defaultPosition = ToastPosition.center;
              Toast.defaultDuration = const Duration(seconds: 2);
              Toast.defaultPadding = const EdgeInsets.all(20);
              Toast.defaultFontSize = 16;
              Toast.defaultColor = Colors.grey;
              Toast.defaultBackgroundColor = Colors.black;
              Toast.defaultBorder = Border.all(
                color: Colors.black,
                width: 0.5,
              );
              Toast.defaultBorderRadius = 7;
              Toast(
                context: context,
                message: 'Toast',
              );
            },
            color: _buttonColor,
            child: Text(
              'Set default styles of Toast',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              // Toast.reset();
              Toast.resetDefaultToEdge();
              Toast.resetDefaultPosition();
              Toast.resetDefaultDuration();
              Toast.resetDefaultPadding();
              Toast.resetDefaultFontSize();
              Toast.resetDefaultColor();
              Toast.resetDefaultBackgroundColor();
              Toast.resetDefaultBorder();
              Toast.resetDefaultBorderRadius();
              Toast(
                context: context,
                message: 'Toast',
              );
            },
            color: _buttonColor,
            child: Text(
              'Reset default styles of Toast',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              Toast(
                context: context,
                child: const Icon(Icons.ac_unit),
              );
            },
            color: _buttonColor,
            child: Text(
              'Toast Child',
              style: _textStyle,
            ),
          ),
          _groupSpacer,
          MaterialButton(
            onPressed: () {
              Message(
                context: context,
                message: 'Message ${_messageIndex++}',
              );
            },
            color: _buttonColor,
            child: Text(
              'Message',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              Message(
                context: context,
                message: 'Message ${_messageIndex++}',
                width: 400,
                spacer: 20,
                duration: const Duration(seconds: 15),
                padding: const EdgeInsets.all(15),
                fontSize: 17,
                textAlign: TextAlign.center,
                overflow: TextOverflow.clip,
                softWrap: true,
                color: Colors.grey,
                backgroundColor: Colors.black,
                border: Border.all(
                  color: Colors.black,
                  width: 0.5,
                ),
                borderRadius: 7,
                // showClose: false,
                close: const Icon(
                  Icons.ac_unit,
                  color: Colors.grey,
                ),
              );
            },
            color: _buttonColor,
            child: Text(
              'Message Styles',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              Message.defaultWidth = 400;
              Message.defaultSpacer = 20;
              Message.defaultDuration = const Duration(seconds: 15);
              Message.defaultPadding = const EdgeInsets.all(15);
              Message.defaultFontSize = 17;
              Message.defaultTextAlign = TextAlign.center;
              Message.defaultOverFlow = TextOverflow.clip;
              Message.defaultSoftWrap = true;
              Message.defaultColor = Colors.grey;
              Message.defaultBackgroundColor = Colors.black;
              Message.defaultBorder = Border.all(
                color: Colors.black,
                width: 0.5,
              );
              Message.defaultBorderRadius = 7;
              // Message.defaultShowClose = false;
              Message.defaultClose = const Icon(
                Icons.ac_unit,
                color: Colors.grey,
              );

              Message(
                context: context,
                message: 'Message ${_messageIndex++}',
              );
            },
            color: _buttonColor,
            child: Text(
              'Set default styles of Message',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              // Message.reset();
              Message.resetDefaultWidth();
              Message.resetDefaultSpacer();
              Message.resetDefaultDuration();
              Message.resetDefaultPadding();
              Message.resetDefaultFontSize();
              Message.resetDefaultTextAlign();
              Message.resetDefaultOverFlow();
              Message.resetDefaultSoftWrap();
              Message.resetDefaultColor();
              Message.resetDefaultBackgroundColor();
              Message.resetDefaultBorder();
              Message.resetDefaultBorderRadius();
              Message.resetDefaultShowClose();
              Message.resetDefaultClose();

              Message(
                context: context,
                message: 'Message ${_messageIndex++}',
              );
            },
            color: _buttonColor,
            child: Text(
              'Reset default styles of Message',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () {
              late Message message;
              message = Message(
                context: context,
                child: Row(
                  children: [
                    const Text('Message'),
                    MaterialButton(
                      onPressed: () {
                        message.remove();
                      },
                      child: const Text('remove'),
                    ),
                  ],
                ),
              );
            },
            color: _buttonColor,
            child: Text(
              'Message Child',
              style: _textStyle,
            ),
          ),
          _groupSpacer,
          MaterialButton(
            onPressed: () async {
              final loading = Loading(
                context: context,
              );
              loading.show();
              await Future.delayed(const Duration(seconds: 2));
              loading.hide();
            },
            color: _buttonColor,
            child: Text(
              'Loading',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () async {
              final loading = Loading(
                context: context,
                child: const Icon(Icons.ac_unit),
                backgroundColor: Colors.black12,
              );
              loading.show();
              await Future.delayed(const Duration(seconds: 2));
              loading.hide();
            },
            color: _buttonColor,
            child: Text(
              'Loading Style',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () async {
              Loading.defaultIcon = const Icon(Icons.ac_unit);
              Loading.defaultBackgroundColor = Colors.black12;

              final loading = Loading(
                context: context,
              );
              loading.show();
              await Future.delayed(const Duration(seconds: 2));
              loading.hide();
            },
            color: _buttonColor,
            child: Text(
              'Set default style of Loading',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
          MaterialButton(
            onPressed: () async {
              // Loading.reset();
              Loading.resetDefaultIcon();
              Loading.resetDefaultBackgroundColor();

              final loading = Loading(
                context: context,
              );
              loading.show();
              await Future.delayed(const Duration(seconds: 2));
              loading.hide();
            },
            color: _buttonColor,
            child: Text(
              'Reset default style of Loading',
              style: _textStyle,
            ),
          ),
          _itemSpacer,
        ],
      ),
    );
  }
}

更多关于Flutter消息提示插件x_message的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter消息提示插件x_message的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


x_message 是一个用于在 Flutter 应用中显示消息提示的插件。它可以帮助你轻松地在应用中显示各种类型的消息提示，如成功、错误、警告等。以下是如何使用 x_message 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 x_message 插件的依赖：

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

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

2. 导入插件

在你的 Dart 文件中导入 x_message 插件：

import 'package:x_message/x_message.dart';

3. 使用 XMessage 显示消息提示

x_message 提供了多种方法来显示不同类型的消息提示。以下是一些常见的用法：

显示成功消息

XMessage.success(
  context,
  message: "操作成功！",
);

显示错误消息

XMessage.error(
  context,
  message: "操作失败！",
);

显示警告消息

XMessage.warning(
  context,
  message: "请注意！",
);

显示普通消息

XMessage.info(
  context,
  message: "这是一条普通消息。",
);

自定义消息提示

你还可以自定义消息提示的样式、持续时间等：

XMessage.show(
  context,
  message: "自定义消息",
  type: XMessageType.info,  // 消息类型
  duration: Duration(seconds: 3),  // 持续时间
  position: XMessagePosition.top,  // 显示位置
);

4. 示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 x_message 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('XMessage 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  XMessage.success(
                    context,
                    message: "操作成功！",
                  );
                },
                child: Text("显示成功消息"),
              ),
              ElevatedButton(
                onPressed: () {
                  XMessage.error(
                    context,
                    message: "操作失败！",
                  );
                },
                child: Text("显示错误消息"),
              ),
              ElevatedButton(
                onPressed: () {
                  XMessage.warning(
                    context,
                    message: "请注意！",
                  );
                },
                child: Text("显示警告消息"),
              ),
              ElevatedButton(
                onPressed: () {
                  XMessage.info(
                    context,
                    message: "这是一条普通消息。",
                  );
                },
                child: Text("显示普通消息"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部