Flutter浮动提示插件 floating_snackbar 的使用

floating_snackbar 是一个用于在Flutter应用中显示简洁的浮动提示（Toast/Snackbar）的插件。它提供了高度可定制化的选项，帮助开发者提升用户体验。

插件支持的平台

• Android
• iOS
• Linux
• macOS
• Web
• Windows

开始使用

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 floating_snackbar 作为依赖项：

dependencies:
  floating_snackbar: ^latest_version

然后运行 flutter pub get 来安装这个包。

2. 导入包

在你的 Dart 文件中导入该包：

import 'package:floating_snackbar/floating_snackbar.dart';

使用示例

示例1：简单的 Snackbar

下面是一个简单的Snackbar示例，它会在点击按钮时显示一条消息。

TextButton(
  onPressed: () {
    floatingSnackBar(
      message: 'Hi there! I am a floating SnackBar!',
      context: context,
    );
  },
  child: const Text('Show SnackBar 1'),
),

示例2：自定义的 Snackbar

你也可以根据需要自定义Snackbar的颜色、文本样式等属性。

TextButton(
  onPressed: () {
    floatingSnackBar(
      message: 'Developed by @emeenx on Twitter!',
      context: context,
      textColor: Colors.black,
      textStyle: const TextStyle(color: Colors.red),
      duration: const Duration(milliseconds: 4000),
      backgroundColor: Colors.white,
    );
  },
  child: const Text('Show SnackBar 2'),
),

完整的 Demo 示例

以下是一个完整的示例代码，展示了如何在Flutter应用中集成并使用 floating_snackbar：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating Snackbar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Floating Snackbar Example'),
    );
  }
}

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

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Floating Snackbar'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () {
                // minimal usage
                floatingSnackBar(
                  message: 'Hi there! I am a floating SnackBar!',
                  context: context,
                );
              },
              child: const Text('Show Simple SnackBar'),
            ),
            const SizedBox(height: 20),
            TextButton(
              onPressed: () {
                // detailed usage
                floatingSnackBar(
                  message: 'Developed by @emeenx on Twitter!',
                  context: context,
                  textColor: Colors.black,
                  textStyle: const TextStyle(color: Colors.red),
                  duration: const Duration(milliseconds: 4000),
                  backgroundColor: Colors.white,
                );
              },
              child: const Text('Show Customized SnackBar'),
            ),
          ],
        ),
      ),
    );
  }
}

通过上述步骤，你可以轻松地在自己的Flutter项目中集成并使用 floating_snackbar 插件来显示各种样式的Snackbar。如果有任何问题或需要更多功能，请访问 GitHub Issues 页面获取帮助。