Flutter flushbar/snackbar 样式答案

【问题标题】：Flutter flushbar/snackbar stylingFlutter flushbar/snackbar 样式
【发布时间】：2020-02-29 19:41:52
【问题描述】：

我在颤振中使用众所周知的flushbar 包来显示flushbars/snackbars。

https://pub.dev/documentation/flushbar/latest/

我正在显示一个错误刷新条，其中有一个很小的title、一个很大的message 和一个action/main-button。

问题是我的flushbar 看起来不太好，因为title + message 位于action/main-button 旁边的一行中。这使得消息非常不可读，因为在多行上并且刷新条的宽度非常大。有没有办法让title 和message 位于action/main-button 上方，以便标题和消息使用flushbar 的全长并且flushbar 不那么宽？

我的flushbar-code atm：

    Flushbar(
      duration: Duration(seconds: _getFlushbarDuration(message)),
      icon: Icon(FontAwesomeIcons.exclamationTriangle, color: Colors.red),
      title: 'ERREUR',
      isDismissible: true,
      dismissDirection: FlushbarDismissDirection.HORIZONTAL,
      message: message,
      backgroundColor: Colors.blueGrey[700],
      leftBarIndicatorColor: Colors.red,
      mainButton: FlatButton(
        onPressed: onPressMethod,
        child:
            Text('$buttonText', style: TextStyle(color: Colors.lightBlue[500])),
      ),
    ).show(this.context);

本网站有助于了解使用小吃店的最佳做法：

在 Anatomy 下的 Action 标签中：

https://material.io/components/snackbars/#anatomy

如果一个动作很长，它可以显示在第三行。

更新 1：

我已经设法做一些与我想要的类似的事情，尽管冲洗条的高度仍然很大。顶部的冲洗条的整个部分都可以移除 + 这个解决方案似乎不是最漂亮的，代码方面：

    Flushbar(
      duration: Duration(seconds: _getFlushbarDuration(message)),
      icon: Icon(FontAwesomeIcons.exclamationTriangle, color: Colors.red),
      messageText: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('ERREUR',
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
          Text('$message', style: TextStyle(color: Colors.lightBlue[50])),
          Container(
            alignment: Alignment.bottomRight,
            child: FlatButton(
              onPressed: onPressMethod,
              child: Text('$buttonText',
                  style: TextStyle(color: Colors.lightBlue[500])),
            ),
          ),
        ],
      ),
      padding: const EdgeInsets.only(top: 50, bottom: 10),
      isDismissible: true,
      dismissDirection: FlushbarDismissDirection.HORIZONTAL,
      backgroundColor: Colors.blueGrey[700],
      leftBarIndicatorColor: Colors.red,
    ).show(this.context);

更新 2：

这看起来更好，但我现在无法获得图标的动画，因为我为图标添加了一个带边距的容器。我仍然不满意我必须在messageText 中制作小部件。在默认的SnackBar() 小部件中进行此设置是否更合适？

    Flushbar(
      duration: Duration(seconds: _getFlushbarDuration(message)),
      icon: Container(
        margin: const EdgeInsets.only(bottom: 50),
        child: Icon(FontAwesomeIcons.exclamationTriangle, color: Colors.red),
      ),
      messageText: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('ERREUR',
              style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
          Text(
            '$message',
            style: TextStyle(color: Colors.lightBlue[50]),
            softWrap: true,
          ),
          Align(
            alignment: Alignment.centerRight,
            child: FlatButton(
              onPressed: onPressMethod,
              child: Text('$buttonText',
                  style: TextStyle(color: Colors.lightBlue[500])),
            ),
          ),
        ],
      ),
      isDismissible: true,
      dismissDirection: FlushbarDismissDirection.HORIZONTAL,
      backgroundColor: Colors.blueGrey[700],
      leftBarIndicatorColor: Colors.red,
    ).show(this.context);

【问题讨论】：

标签： flutter styling snackbar

【解决方案1】：

flushbar 已停产。我建议使用ScaffoldMessenger 来显示 SnackBar。您可以关注此guide 了解更多详情。

如果您想在 SnackBar 上显示“标题”和“消息”，可以在要显示的字符串上添加换行符 \n。

final snackBar = SnackBar(
  content: Text('Title \nMessage'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);

ScaffoldMessenger.of(context).showSnackBar(snackBar);

【讨论】：