Flutter消息提示插件simple

Flutter消息提示插件simple_snackbar的使用

展示美丽的Snack Bar并显示消息：

成功
错误
警告
信息

DEMO

使用方法

// 定义
final snackBar = simpleSnackBar(
    // 必填
    buildContext: context,
    // 必填
    messageText: "This is an info",
    backgroundColor: Colors.white,
    displayDismiss: false,
    textColor: Colors.black,
    snackBarType: SnackBarType.info);

// 显示
ScaffoldMessenger.of(context).showSnackBar(snackBar);

完整示例Demo

以下是一个完整的示例代码，展示了如何在应用中使用simple_snackbar插件来显示不同类型的Snack Bar。

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

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

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Simple Snack bar Demo"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: const Text("显示成功Snack Bar"),
                onPressed: () {
                  final snackBar = simpleSnackBar(
                      // 必填
                      buildContext: context,
                      // 必填
                      messageText: "Success message",
                      backgroundColor: Colors.white,
                      displayDismiss: false,
                      textColor: Colors.black,
                      snackBarType: SnackBarType.success);
                  ScaffoldMessenger.of(context)
                    ..hideCurrentSnackBar() // 隐藏当前Snack Bar
                    ..showSnackBar(snackBar); // 显示新的Snack Bar
                },
              ),
              ElevatedButton(
                child: const Text("显示错误Snack Bar"),
                onPressed: () {
                  final snackBar = simpleSnackBar(
                      // 必填
                      buildContext: context,
                      // 必填
                      messageText: "This is an error",
                      backgroundColor: Colors.white,
                      displayDismiss: false,
                      textColor: Colors.black,
                      snackBarType: SnackBarType.error);
                  ScaffoldMessenger.of(context)
                    ..hideCurrentSnackBar()
                    ..showSnackBar(snackBar);
                },
              ),
              ElevatedButton(
                child: const Text("显示警告Snack Bar"),
                onPressed: () {
                  final snackBar = simpleSnackBar(
                      // 必填
                      buildContext: context,
                      // 必填
                      messageText: "This is a warning",
                      backgroundColor: Colors.white,
                      displayDismiss: false,
                      textColor: Colors.black,
                      snackBarType: SnackBarType.warning);
                  ScaffoldMessenger.of(context)
                    ..hideCurrentSnackBar()
                    ..showSnackBar(snackBar);
                },
              ),
              ElevatedButton(
                child: const Text("显示信息Snack Bar"),
                onPressed: () {
                  final snackBar = simpleSnackBar(
                      // 必填
                      buildContext: context,
                      // 必填
                      messageText: "This is an info",
                      backgroundColor: Colors.white,
                      displayDismiss: false,
                      textColor: Colors.black,
                      snackBarType: SnackBarType.info);
                  ScaffoldMessenger.of(context)
                    ..hideCurrentSnackBar()
                    ..showSnackBar(snackBar);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

eggper 1楼

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

当然，下面是一个关于如何使用 simple_snackbar 插件在 Flutter 中显示消息提示的代码案例。

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

dependencies:
  flutter:
    sdk: flutter
  simple_snackbar: ^latest_version # 请替换为实际的最新版本号

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

接下来，在你的 Flutter 应用中使用 SimpleSnackbar。以下是一个完整的示例代码，展示了如何在一个按钮点击事件后显示一个简单的消息提示。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Snackbar Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示消息提示
            showSnackBar(
              context,
              content: '这是一个消息提示!',
              backgroundColor: Colors.blue,
              textColor: Colors.white,
              duration: Duration(seconds: 2),
            );
          },
          child: Text('显示消息提示'),
        ),
      ),
    );
  }
}

// 封装 showSnackBar 函数以便复用
void showSnackBar(BuildContext context, {
  required String content,
  Color backgroundColor = Colors.grey,
  Color textColor = Colors.white,
  Duration duration = const Duration(seconds: 1),
}) {
  // 使用 ScaffoldMessenger 显示 Snackbar
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(content, style: TextStyle(color: textColor)),
      backgroundColor: backgroundColor,
      duration: duration,
    ),
  );
}

注意：虽然上述代码使用的是 Flutter 自带的 SnackBar 而不是 simple_snackbar 插件的具体实现，因为 simple_snackbar 插件的具体 API 可能与 Flutter 自带的 SnackBar 有所不同，但大多数消息提示插件的使用方式是类似的。

然而，根据 simple_snackbar 插件的文档（假设它类似于其他消息提示插件），你可能只需要稍微修改 showSnackBar 函数以适应插件的 API。例如，如果 simple_snackbar 提供了自己的 show 方法，你可以这样使用：

// 假设 simple_snackbar 插件提供了一个名为 SimpleSnackbar 的类
void showSimpleSnackBar(BuildContext context, String content) {
  SimpleSnackbar.show(
    context,
    message: content,
    backgroundColor: Colors.blue,
    textColor: Colors.white,
    duration: Duration(seconds: 2),
  );
}

请注意，上述 SimpleSnackbar.show 方法是假设性的，你需要查阅 simple_snackbar 插件的实际文档来获取正确的使用方法和参数。

由于我无法直接访问最新的插件文档和代码，因此上述代码是一个基于通用实践的示例。在实际使用中，请务必参考 simple_snackbar 插件的官方文档和示例代码。