Flutter自定义Snackbar插件smart_snackbars的使用

Creativity of using this package is endless.

This package facilitates you to create very highly customized SnackBars on the go with any animation curve. More creative examples are on the way.

Features

smart_snackbars_gif

Getting Started

Just add the dependency of smart_snackbars to your pubspec.yaml file and you can create amazing SnackBars using your creativity.

dependencies:
  smart_snackbars: ^latest_version

Replace ^latest_version with the latest version available on pub.dev.

Usage

A snackbar with pre-defined UI

Here’s an example of how to show a templated Snackbar with a predefined UI:

SmartSnackBars.showTemplatedSnackbar(
  context: context,
  backgroundColor: Colors.green,
  animateFrom: AnimateFrom.fromTop,
  leading: Container(
    margin: const EdgeInsets.only(right: 10),
    padding: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.white.withOpacity(0.2),
    ),
    child: const Icon(
      Icons.check,
      color: Colors.white,
    ),
  ),
  titleWidget: const Text(
    "Good Job",
    style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 20,
    ),
  ),
  subTitleWidget: const Padding(
    padding: EdgeInsets.only(top: 8.0),
    child: Text(
      "Data is submitted",
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w600,
        fontSize: 16,
      ),
    ),
  ),
  trailing: GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {},
    child: const Icon(
      Icons.close,
      color: Colors.white,
    ),
  ),
);

A persisting SnackBar with dismissible capabilities

Here’s an example of how to show a persisting Snackbar with dismissible capabilities:

SmartSnackBars.showCustomSnackBar(
  context: context,
  persist: true,
  duration: const Duration(milliseconds: 1000),
  animationCurve: Curves.bounceOut,
  child: Container(
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.circular(5),
    ),
    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
    child: Row(
      children: [
        const SizedBox(
          width: 5,
        ),
        Container(
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.black.withOpacity(0.2),
          ),
          child: const Icon(
            Icons.info_outline,
            color: Colors.white,
          ),
        ),
        const SizedBox(width: 10),
        const Text(
          "Data is deleted",
          style: TextStyle(
            color: Colors.white,
            fontSize: 14,
            fontWeight: FontWeight.bold,
          ),
        ),
        const Spacer(),
        const Icon(
          Icons.close,
          color: Colors.white,
        ),
        const SizedBox(width: 20),
      ],
    ),
  ),
);

A snackbar showing a network call and loading indicator

Here’s an example of how to show a Snackbar with a network call and loading indicator:

SmartSnackBars.showCustomSnackBar(
  context: context,
  duration: const Duration(milliseconds: 1000),
  animateFrom: AnimateFrom.fromBottom,
  distanceToTravel: 0.0,
  outerPadding: const EdgeInsets.all(0),
  child: Column(
    children: [
      SizedBox(
        height: 5,
        child: LinearProgressIndicator(
          backgroundColor: Colors.black.withOpacity(0.7),
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
        color: Colors.black.withOpacity(0.7),
        child: Row(
          children: [
            const Icon(
              Icons.info_outline_rounded,
              color: Colors.white,
              size: 24,
            ),
            const SizedBox(width: 10),
            const Text(
              "Sending Data To Server...",
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
            const Spacer(),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 5),
              decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.2),
                border: Border.all(
                  color: Colors.blue,
                  width: 2,
                ),
                borderRadius: BorderRadius.circular(5),
              ),
              child: const Text(
                "Stop",
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
            const SizedBox(width: 20)
          ],
        ),
      ),
    ],
  ),
);

Additional Information

We will be more than happy with your contributions. Please contribute to smart_snackbars this GitHub repo.

Example Code

Here is a complete example demo that shows how to use the smart_snackbars package in a Flutter application:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Smart SnackBars Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Smart SnackBars Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void showTemplatedSnackbar(BuildContext context) {
    SmartSnackBars.showTemplatedSnackbar(
      context: context,
      backgroundColor: Colors.green,
      animateFrom: AnimateFrom.fromTop,
      leading: Container(
        margin: const EdgeInsets.only(right: 10),
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white.withOpacity(0.2),
        ),
        child: const Icon(
          Icons.check,
          color: Colors.white,
        ),
      ),
      titleWidget: const Text(
        "Good Job",
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 20,
        ),
      ),
      subTitleWidget: const Padding(
        padding: EdgeInsets.only(top: 8.0),
        child: Text(
          "Data is submitted",
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontSize: 16,
          ),
        ),
      ),
      trailing: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {},
        child: const Icon(
          Icons.close,
          color: Colors.white,
        ),
      ),
    );
  }

  void showCustomSnackBar(BuildContext context) {
    SmartSnackBars.showCustomSnackBar(
      context: context,
      persist: true,
      duration: const Duration(milliseconds: 1000),
      animationCurve: Curves.bounceOut,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.amber,
          borderRadius: BorderRadius.circular(5),
        ),
        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
        child: Row(
          children: [
            const SizedBox(
              width: 5,
            ),
            Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.black.withOpacity(0.2),
              ),
              child: const Icon(
                Icons.info_outline,
                color: Colors.white,
              ),
            ),
            const SizedBox(width: 10),
            const Text(
              "Data is deleted",
              style: TextStyle(
                color: Colors.white,
                fontSize: 14,
                fontWeight: FontWeight.bold,
              ),
            ),
            const Spacer(),
            const Icon(
              Icons.close,
              color: Colors.white,
            ),
            const SizedBox(width: 20),
          ],
        ),
      ),
    );
  }

  void showStickySnackBar(BuildContext context) {
    SmartSnackBars.showCustomSnackBar(
      context: context,
      duration: const Duration(milliseconds: 1000),
      animateFrom: AnimateFrom.fromBottom,
      distanceToTravel: 0.0,
      outerPadding: const EdgeInsets.all(0),
      child: Column(
        children: [
          SizedBox(
            height: 5,
            child: LinearProgressIndicator(
              backgroundColor: Colors.black.withOpacity(0.7),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
            color: Colors.black.withOpacity(0.7),
            child: Row(
              children: [
                const Icon(
                  Icons.info_outline_rounded,
                  color: Colors.white,
                  size: 24,
                ),
                const SizedBox(width: 10),
                const Text(
                  "Sending Data To Server...",
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
                const Spacer(),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 5),
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.2),
                    border: Border.all(
                      color: Colors.blue,
                      width: 2,
                    ),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  child: const Text(
                    "Stop",
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
                const SizedBox(width: 20)
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => showTemplatedSnackbar(context),
              child: Container(
                color: Colors.blue,
                padding: const EdgeInsets.all(8),
                child: const Text(
                  "Show Templated SnackBar",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            const SizedBox(height: 10),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => showCustomSnackBar(context),
              child: Container(
                color: Colors.blue,
                padding: const EdgeInsets.all(8),
                child: const Text(
                  "Show Dismissible SnackBar",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            const SizedBox(height: 10),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => showStickySnackBar(context),
              child: Container(
                color: Colors.blue,
                padding: const EdgeInsets.all(8),
                child: const Text(
                  "Show Sticky SnackBar",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This demo includes three buttons that each trigger a different type of Snackbar using the smart_snackbars package. You can run this code in your Flutter project to see the SnackBars in action.

更多关于Flutter自定义Snackbar插件smart_snackbars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•1 天前

更多关于Flutter自定义Snackbar插件smart_snackbars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter中使用smart_snackbars插件来自定义Snackbar的一个示例代码。首先，确保你已经在pubspec.yaml文件中添加了smart_snackbars依赖项：

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

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

以下是一个完整的示例，展示如何使用smart_snackbars来自定义Snackbar：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final SmartSnackbarController _snackbarController = SmartSnackbarController();

  @override
  void dispose() {
    _snackbarController.dispose();
    super.dispose();
  }

  void _showCustomSnackbar() {
    _snackbarController.showSnackbar(
      SmartSnackbar.custom(
        backgroundColor: Colors.green,
        content: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '这是一个自定义Snackbar',
              style: TextStyle(color: Colors.white),
            ),
            Icon(Icons.close, color: Colors.white),
          ],
        ),
        duration: Duration(seconds: 3),
        action: SmartSnackbarAction(
          label: '操作',
          onPressed: () {
            // 在这里处理点击事件
            print('操作按钮被点击');
          },
        ),
        onDismissed: () {
          // Snackbar消失时的回调
          print('Snackbar已消失');
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Smart Snackbars Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showCustomSnackbar,
          child: Text('显示自定义Snackbar'),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

导入smart_snackbars包。
创建一个SmartSnackbarController实例来管理Snackbar的显示。
在按钮点击事件中调用_showCustomSnackbar函数，该函数使用_snackbarController.showSnackbar方法来显示一个自定义的Snackbar。
自定义Snackbar包括背景颜色、内容布局（一个包含文本和图标的Row）、持续时间、操作按钮以及消失时的回调。

请注意，smart_snackbars的具体API可能会有所变化，因此建议查阅最新的官方文档以获取最准确的信息。如果插件版本更新，确保根据新版本的API调整代码。