原文

https://medium.com/flutterdev...

代码

https://github.com/flutter-de...

参考

https://pub.flutter-io.cn/pac...

注释

理解如何创立动态和自定义 SnackBar 小部件在您的 Flutter 应用程序

无论何时你要编写在 Flutter 构建任何货色的代码，它都会在一个小部件中。Flutter 应用程序屏幕上的每个元素都是一个小部件。屏幕的透视图齐全依赖于用于构建应用程序的小部件的抉择和分组。此外，利用程序代码的构造是一个小部件树。

在本博客中，咱们将理解动态和自定义 SnackBar 小部件及其在 flutter 中的性能。咱们将在这个 SnackBar Widget 小部件上看到一个简略演示程序的实现。

https://pub.flutter-io.cn/pac...

在 Flutter 中，SnackBar 是一个小工具，它能够轻量级地在你的应用程序中弹出一条疾速音讯，在产生事件时短暂地标示出用户。应用 SnackBar，你能够在你的应用程序底部弹出一条音讯几秒钟。

默认状况下，SnackBar 显示在屏幕的底部，当指定的工夫实现，它将从屏幕上隐没，咱们能够使一个自定义的 SnackBar 也和它蕴含一些口头，容许用户增加或删除任何口头和图像。SnackBar 须要一个 Scaffold，带有一个 Scaffold 实例，你的 SnackBar 会立刻弹出。通过应用 scaffold，能够很容易地在小部件树中的任何地位取得 scaffold 的援用。性能。

演示模块:

如何实现 dart 文件中的代码:

你须要别离在你的代码中实现它:

首先，在这个 Dart 文件中，我创立了两个按钮，第一个按钮用于显示默认的 SnackBar，第二个按钮用于自定义 SnackBar。

Default SnackBar 默认 SnackBar

显示 SnackBar 有两个步骤。首先，您必须创立一个 SnackBar，这能够通过调用以下构造函数来实现。非常简单易用。这是明码。

final snackBar = SnackBar(content: Text('Yay! A DefaultSnackBar!'));ScaffoldMessenger._of_(context).showSnackBar(snackBar);

但默认状况下，咱们的一些要求没有失去满足。所以 May 自定义 SnackBar 正在做这件事。对于自定义 SnackBar，我必须应用 Flushbar 依赖项。这是一个十分谐和的依赖性设计您的自定义 SnackBar 依据您的抉择。

首先，在 pubspec.yaml 中增加 SnackBar 的依赖项

another_flushbar: ^1.10.24

而后必须创立一个办法来显示自定义 SnackBar。

void showFloatingFlushbar( {@required BuildContext? context,  @required String? message,  @required bool? isError}){  Flushbar? flush;  bool? _wasButtonClicked;  flush = Flushbar<bool>(    title: "Hey User",    message: message,    backgroundColor: isError! ? Colors._red_ : Colors._blueAccent_,    duration: Duration(seconds: 3),    margin: EdgeInsets.all(20),    icon: Icon(      Icons._info_outline_,      color: Colors._white_,),    mainButton: FlatButton(      onPressed: () {        flush!.dismiss(true); _// result = true_ },      child: Text(        "ADD",        style: TextStyle(color: Colors._amber_),      ),    ),) _// <bool> is the type of the result passed to dismiss() and collected by show().then((result){})_ ..show(context!).then((result) {    });}

当咱们运行应用程序时，咱们应该取得屏幕输入，就像上面的屏幕截图一样。

Custom SnackBar 自定义 SnackBar

全副代码:

import 'package:another_flushbar/flushbar.dart';import 'package:flutter/material.dart';class SnackBarView extends StatefulWidget {  const SnackBarView({Key? key}) : super(key: key);  @override  _SnackBarViewState createState() => _SnackBarViewState();}class _SnackBarViewState extends State<SnackBarView> {  @override  Widget build(BuildContext context) {    return Scaffold(      body: Column(       mainAxisAlignment: MainAxisAlignment.center,        children: [          _buildSnackBarButton()        ],      ),    );  }  Widget _buildSnackBarButton() {    return Column(      children: [        Center(          child: InkWell(            onTap: (){              final snackBar = SnackBar(content: Text('Yay! A Default SnackBar!'));              ScaffoldMessenger._of_(context).showSnackBar(snackBar);            },            child: Container(              height: 40,              width: 180,              decoration: BoxDecoration(                color: Colors._pinkAccent_,                borderRadius: BorderRadius.all(Radius.circular(15))              ),              child: Center(                child: Text("SnackBar",                style: TextStyle(                  color: Colors._white_,                  fontSize: 16,                ),),              ),            ),          ),        ),        SizedBox(height: 10,),        Center(          child: InkWell(            onTap: (){              showFloatingFlushbar(context: context,                  message: 'Custom Snackbar!',                  isError: false);              _// showSnackBar(              //     context: context,              //     message: 'Custom Snackbar!',              //     isError: false);_ },            child: Container(              height: 40,              width: 180,              decoration: BoxDecoration(                color: Colors._pinkAccent_,                borderRadius: BorderRadius.all(Radius.circular(15))              ),              child: Center(                child: Text("Custom SnackBar",                style: TextStyle(                  color: Colors._white_,                  fontSize: 16,                ),),              ),            ),          ),        ),      ],    );  }}void showFloatingFlushbar( {@required BuildContext? context,  @required String? message,  @required bool? isError}){  Flushbar? flush;  bool? _wasButtonClicked;  flush = Flushbar<bool>(    title: "Hey User",    message: message,    backgroundColor: isError! ? Colors._red_ : Colors._blueAccent_,    duration: Duration(seconds: 3),    margin: EdgeInsets.all(20),    icon: Icon(      Icons._info_outline_,      color: Colors._white_,),    mainButton: FlatButton(      onPressed: () {        flush!.dismiss(true); _// result = true_ },      child: Text(        "ADD",        style: TextStyle(color: Colors._amber_),      ),    ),) _// <bool> is the type of the result passed to dismiss() and collected by show().then((result){})_ ..show(context!).then((result) {    });}void showSnackBar(    {@required BuildContext? context,    @required String? message,    @required bool? isError}) {  final snackBar = SnackBar(    content: Text(      message!,      style: TextStyle(fontSize: 14.0, fontWeight: FontWeight._normal_),    ),    duration: Duration(seconds: 3),    backgroundColor: isError! ? Colors._red_ : Colors._green_,    width: 340.0,    padding: const EdgeInsets.symmetric(      horizontal: 8.0,    ),    behavior: SnackBarBehavior.floating,    shape: RoundedRectangleBorder(      borderRadius: BorderRadius.circular(10.0),    ),    action: SnackBarAction(      label: 'Undo',      textColor: Colors._white_,      onPressed: () {},    ),  );  ScaffoldMessenger._of_(context!).showSnackBar(snackBar);}

Conclusion:

结语:

在本文中，我曾经简略介绍了 SnackBar 小部件的根本详情，您能够依据本人的抉择批改这段代码。这是我对 SnackBar Widget On User Interaction 的一个小小介绍，它正在应用 Flutter 工作。

我心愿这个博客将提供您尝试在您的 Flutter 我的项目摸索，SnackBar 小工具充沛的信息。

如果我做错了什么，请在评论中通知我，我很乐意改良。

鼓掌如果这篇文章对你有帮忙的话。

GitHub Link:

链接:

找到 Flutter SnackBar Demo 的源代码:

https://github.com/flutter-de...

https://ducafecat.tech/
https://github.com/ducafecat
微信群 ducafecat
b 站 https://space.bilibili.com/40...

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego...