Flutter轻量级消息提示插件snackify的使用

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

Flutter轻量级消息提示插件snackify的使用

Snackify 是一个用于Flutter的轻量级消息提示插件，提供了多种自定义选项来显示消息提示（SnackBar），如背景颜色、文本样式等。以下是该插件的基本用法和详细配置。

支持作者

如果你觉得这个插件对你有帮助，可以通过 Buy Me a Coffee 支持作者。

特性

  • 可定制的SnackBar：支持背景颜色、文本样式等多种自定义选项。
  • SnackType：设置不同类型的消息提示（成功、错误、警告、信息）。
  • 显示时长：设置SnackBar的显示时间。
  • 持久SnackBar：可以设置为手动关闭。
  • 位置：可以在屏幕顶部或底部显示。
  • 文本转语音(TTS)：可以将消息内容读出来。

使用方法

基本示例

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

void showCustomSnackbar(BuildContext context) {
  Snackify.show(
    context: context,
    type: SnackType.success,
    title: Text('Hello !'),
    subtitle: Text('This is a custom Snackbar.'),
    ttsConfig: TTSConfiguration(speakOnShow: true),
    duration: const Duration(seconds: 3),
    animationDuration: const Duration(milliseconds: 500),
    backgroundGradient: const LinearGradient(colors: [Colors.teal, Colors.greenAccent]),
    position: SnackPosition.bottom,
    persistent: false, // 设置为true表示需要手动关闭
  );
}

不同类型的SnackBar

成功类型

Snackify.show(
  type: SnackType.success,
  ///...
);

错误类型

Snackify.show(
  type: SnackType.error,
  ///...
);

警告类型

Snackify.show(
  type: SnackType.warning,
  ///...
);

信息类型

Snackify.show(
  type: SnackType.info,
  ///...
);

参数说明

  • context: 当前的BuildContext。
  • type: 消息提示的类型（SnackType.success, SnackType.error, SnackType.warning, SnackType.info, SnackType.custom）。
  • title: 消息提示的标题。
  • subtitle: 标题下方的副标题。
  • offset: 屏幕上的偏移量，默认是(0, 0)。
  • delay: 显示前的延迟时间。
  • duration: 消息提示显示的时间，默认是3秒。
  • animationDuration: 动画持续时间。
  • backgroundGradient: 自定义背景渐变色。
  • position: 消息提示的位置，默认是底部（SnackPosition.bottom），也可以设置为顶部（SnackPosition.top）。
  • snackShadow: 阴影效果。
  • persistent: 是否需要手动关闭，默认是false。
  • action: 可选的自定义按钮。
  • ttsConfig: 文本转语音配置。

完整示例代码

以下是一个完整的示例，展示了如何在应用中使用不同的消息提示类型：

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:snackify/snackify.dart';
import 'package:snackify/tts_config.dart';

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

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

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snackify Example'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                Snackify.show(
                  context: context,
                  type: SnackType.success,
                  title: Text(
                    'Well Done !',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  subtitle: Text(
                    'You have successfully done it !',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  ttsConfig: TTSConfiguration(speakOnShow: true),
                  duration: const Duration(seconds: 3),
                  animationDuration: const Duration(milliseconds: 1000),
                  backgroundGradient: const LinearGradient(
                    colors: [Colors.teal, Colors.greenAccent],
                  ),
                  position: SnackPosition.bottom,
                );
              },
              child: const Text("Success"),
            ),
            ElevatedButton(
              onPressed: () {
                Snackify.show(
                  context: context,
                  type: SnackType.error,
                  backgroundGradient: const LinearGradient(
                    colors: [Colors.redAccent, Colors.deepOrange],
                  ),
                  duration: const Duration(seconds: 3),
                  title: Text(
                    'Oops ...',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  subtitle: Text(
                    'Wrong password !',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  ttsConfig: TTSConfiguration(speakOnShow: true),
                  animationDuration: const Duration(milliseconds: 1000),
                  position: SnackPosition.bottom,
                );
              },
              child: const Text("Error"),
            ),
            ElevatedButton(
              onPressed: () {
                Snackify.show(
                  context: context,
                  type: SnackType.warning,
                  duration: const Duration(seconds: 3),
                  title: Text(
                    'Password is weak !',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  subtitle: Text(
                    'Try to enter a strong password.',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  action: TextButton(
                    onPressed: () {
                      log('Undo button is pressed');
                    },
                    child: ElevatedButton(
                      onPressed: () {},
                      child: Text(
                        'Undo',
                        style: GoogleFonts.poppins(color: Colors.black),
                      ),
                    ),
                  ),
                  ttsConfig: TTSConfiguration(speakOnShow: true),
                  animationDuration: const Duration(milliseconds: 1000),
                  backgroundGradient: const LinearGradient(
                    colors: [Colors.orange, Colors.yellow],
                  ),
                  position: SnackPosition.bottom,
                );
              },
              child: const Text("Warning"),
            ),
            ElevatedButton(
              onPressed: () {
                Snackify.show(
                  context: context,
                  type: SnackType.info,
                  duration: const Duration(seconds: 3),
                  title: Text(
                    'Do you know ?',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  subtitle: Text(
                    'You have ₹156 cash in your wallet !',
                    style: GoogleFonts.poppins(color: Colors.white),
                  ),
                  snackShadow: [
                    const BoxShadow(
                      color: Colors.grey,
                      blurRadius: 6.0,
                      spreadRadius: 2.0,
                      offset: Offset(4, 4),
                    ),
                  ],
                  persistent: true,
                  ttsConfig: TTSConfiguration(speakOnShow: true),
                  animationDuration: const Duration(milliseconds: 1000),
                  backgroundGradient: const LinearGradient(
                    colors: [Colors.blue, Colors.lightBlueAccent],
                  ),
                  position: SnackPosition.bottom,
                );
              },
              child: const Text("Info"),
            ),
          ],
        ),
      ),
    );
  }
}

通过上述示例，你可以根据自己的需求灵活使用 Snackify 来展示不同类型的消息提示，并进行丰富的自定义设置。希望这些示例能帮助你更好地理解和使用 Snackify 插件。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用轻量级消息提示插件snackify的示例代码。这个插件可以帮助你快速实现底部弹出的消息提示（Snackbar）。

1. 添加依赖

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

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

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

2. 导入插件

在你需要使用Snackbar的Dart文件中导入插件：

import 'package:snackify/snackify.dart';

3. 初始化Snackify

在你的主应用程序入口（通常是main.dart或app.dart）中初始化Snackify：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Snackify.init(context);  // 初始化Snackify
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

4. 使用Snackify显示消息

现在你可以在任何地方使用Snackify.showSnackBar方法来显示消息提示。例如，在一个按钮点击事件中：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snackify Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示Snackbar
            Snackify.showSnackBar(
              context,
              content: Text('这是一个消息提示！'),
              duration: Duration(seconds: 3),  // 可选：设置持续时间
              backgroundColor: Colors.blue,  // 可选：设置背景颜色
              action: SnackBarAction(
                label: '点击我',
                onPressed: () {
                  // 点击动作
                  print('Snackbar按钮被点击');
                },
              ),
            );
          },
          child: Text('显示Snackbar'),
        ),
      ),
    );
  }
}

完整示例代码

将上述所有代码片段组合起来，你将得到一个完整的Flutter应用程序，该应用程序使用snackify插件来显示一个带有动作的Snackbar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Snackify.init(context);
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snackify Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Snackify.showSnackBar(
              context,
              content: Text('这是一个消息提示！'),
              duration: Duration(seconds: 3),
              backgroundColor: Colors.blue,
              action: SnackBarAction(
                label: '点击我',
                onPressed: () {
                  print('Snackbar按钮被点击');
                },
              ),
            );
          },
          child: Text('显示Snackbar'),
        ),
      ),
    );
  }
}

这样，你就成功地在Flutter项目中使用了snackify插件来显示轻量级的消息提示。

回到顶部