Flutter消息提示插件flutter_toast_message_bar的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter消息提示插件flutter_toast_message_bar的使用

在您的应用中添加消息提示，可以使用FlutterToastMessageBar。以下是详细的步骤和示例代码。

使用

首先，将 FlutterToastMessageBar 添加到您的 Flutter 应用中：

FlutterToastMessageBar(
  messageText: const Text('添加您的消息提示文本！'),
  messageColor: Colors.amber,
);

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 FlutterToastMessageBar。

示例代码

import 'package:flutter/material.dart';
import 'package:toast_message_bar/toast_message_bar.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(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Toast Message Bar Demo'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  Future<void> _incrementCounter() async {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '点击加号按钮以显示消息提示',
            ),
            const Text(
              '您已经点击了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await _incrementCounter();

          /// 忽略：同步使用BuildContext
          await FlutterToastMessageBar(
            /// 设置背景颜色
            backgroundColor: HexColor('#008B98'),

            /// 设置标题
            title: '自定义标题',

            /// 设置标题颜色
            titleColor: Colors.white,

            /// 设置消息文本
            message: '自定义消息文本 !!',

            /// 设置消息文本颜色
            messageColor: Colors.white,

            /// 设置消息显示时长
            duration: const Duration(seconds: 3),
          ).show(context);
        },
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF$hexColor";
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_toast_message_bar插件的详细代码示例。这个插件允许你在应用中显示消息提示条，非常适合用于显示简短的通知或警告信息。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_toast_message_bar依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_toast_message_bar: ^x.y.z  # 请将x.y.z替换为最新版本号

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

步骤 2: 导入插件

在你的Flutter项目的Dart文件中导入插件。

import 'package:flutter_toast_message_bar/flutter_toast_message_bar.dart';

步骤 3: 配置MaterialApp

确保你的MaterialApp中包裹了ToastMessageBar。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Toast Message Bar Example'),
        ),
        body: ToastMessageBar(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

步骤 4: 显示消息提示

在你的MyHomePage或其他页面中，使用ToastMessageBarService来显示消息。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              ToastMessageBarService.showMessage(
                context: context,
                message: 'This is a success message!',
                type: ToastMessageType.success,
                duration: ToastMessageDuration.short,
              );
            },
            child: Text('Show Success Message'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              ToastMessageBarService.showMessage(
                context: context,
                message: 'This is an error message!',
                type: ToastMessageType.error,
                duration: ToastMessageDuration.long,
              );
            },
            child: Text('Show Error Message'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              ToastMessageBarService.showMessage(
                context: context,
                message: 'This is a warning message!',
                type: ToastMessageType.warning,
                duration: ToastMessageDuration.medium,
              );
            },
            child: Text('Show Warning Message'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              ToastMessageBarService.showMessage(
                context: context,
                message: 'This is an info message!',
                type: ToastMessageType.info,
                duration: ToastMessageDuration.short,
              );
            },
            child: Text('Show Info Message'),
          ),
        ],
      ),
    );
  }
}

解释

  1. 添加依赖：在pubspec.yaml中添加flutter_toast_message_bar依赖。
  2. 导入插件：在需要显示消息的Dart文件中导入flutter_toast_message_bar。
  3. 配置MaterialApp：在MaterialApp的home属性中包裹ToastMessageBar。
  4. 显示消息提示：使用ToastMessageBarService.showMessage方法来显示不同类型的消息提示。

这个示例展示了如何显示成功、错误、警告和信息四种类型的消息提示，并且可以通过参数设置消息的显示时长。

希望这能帮助你更好地使用flutter_toast_message_bar插件！

回到顶部