Flutter顶部提示插件top_snackbar的使用

Features

• 可定制样式：包括文本、背景颜色、前导图标等。
• 响应式布局设计：使用Media Queries适应各种屏幕尺寸。
• 预定义的消息类型方法：默认样式和图标。
• 作为覆盖层：不会干扰小部件树或受上下文变化影响。

Demo

Usage

Installation

在 pubspec.yaml 文件中添加 top_snackbar：

dependencies:
  top_snackbar: ^0.0.6 # 使用最新版本

Import

在 Dart 文件中导入 top_snackbar：

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

Custom Top Snackbar Widget

要显示自定义的顶部提示消息，可以使用 CustomTopSnackbar.show 方法：

CustomTopSnackbar.show(
  context,
  'Your message here',
  // 可选参数，根据需要自定义更多属性
  leadingIcon: Icons.copy,
  backgroundColor: Colors.blue,
);

Pre-defined Message Types

该库提供了不同消息类型的预定义方法，带有默认样式和图标：

• Info：显示信息性消息。

  CustomTopSnackbar.showInfo(context, 'Info message');
  

• Success：显示成功消息。

  CustomTopSnackbar.showSuccess(context, 'Success message');
  

• Error：显示错误消息。

  CustomTopSnackbar.showError(context, 'Error message');
  

• Warning：显示警告消息。

  CustomTopSnackbar.showWarning(context, 'Warning message');
  

示例代码

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

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:top_snackbar/top_snackbar.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Top Snackbar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snackbar Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // 自定义仅包含文本的提示
            ElevatedButton(
              onPressed: () {
                CustomTopSnackbar.show(
                    context, 'This is an example of a custom snackbar');
              },
              child: const Text("Custom Snackbar"),
            ),

            // 自定义包含图标和文本的提示
            ElevatedButton(
              onPressed: () {
                CustomTopSnackbar.show(context,
                    'This is an example of a custom snackbar with an icon',
                    leadingIcon: CupertinoIcons.checkmark_alt_circle_fill);
              },
              child: const Text("Custom Snackbar with Icon"),
            ),

            // 信息风格的提示
            ElevatedButton(
              onPressed: () {
                CustomTopSnackbar.showInfo(
                    context, 'This is an example of an info snackbar');
              },
              child: const Text("Info Snackbar"),
            ),

            // 成功风格的提示
            ElevatedButton(
              onPressed: () {
                CustomTopSnackbar.showSuccess(
                    context, 'This is an example of a success snackbar');
              },
              child: const Text("Success Snackbar"),
            ),

            // 警告风格的提示
            ElevatedButton(
              onPressed: () {
                CustomTopSnackbar.showWarning(
                    context, 'This is an example of a warning snackbar');
              },
              child: const Text("Warning Snackbar"),
            ),

            // 错误风格的提示
            ElevatedButton(
              onPressed: () {
                CustomTopSnackbar.showError(
                    context, 'This is an example of an error snackbar');
              },
              child: const Text("Error Snackbar"),
            ),
          ],
        ),
      ),
    );
  }
}

通过以上示例代码，您可以轻松地在 Flutter 应用中使用 top_snackbar 插件来显示顶部提示消息。希望这对您有所帮助！