Question

我想在不满足某些条件的情况下，在按钮上的上方上显示一条简单的消失错误消息。 Flutter的Snackbar似乎非常适合此目的。

但是，我很难将Snackbar的位置更改为屏幕底部以外的任何位置。这可能吗？如果不是，是否有一个更适合此目的的小部件？

我当前的小吃条代码：

class ContinueButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(
          bottom: 24.0, top: 24.0),
      child: Align(
        alignment: FractionalOffset.bottomCenter,
        child: MaterialButton(
          onPressed: () {
            final snackBar = SnackBar(
              content: Text('Yay! A SnackBar!'),
            );
            Scaffold.of(context).showSnackBar(snackBar);
          },

          child: Text('Continue'),
          height: 40.0,
          minWidth: 300.0,
          color: Colors.greenAccent,
        ),
      ),
    );
  }
}

Answer 1

您可以通过在小吃店内放置一个容器来实现此目的。由于小吃店可以使用任何小部件，并且可以将其背景颜色更改为透明，因此可以使用带有自定义填充和边框的容器来给人一种错觉的定位。

SnackBar(content: Container(
  //color: Colors.white,
  decoration: BoxDecoration(color: Colors.white, border: Border.all(width: 2.0, color: Colors.black), borderRadius: BorderRadius.circular(20)),
  margin: EdgeInsets.fromLTRB(0, 0, 0, 75),
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text('Yay! A SnackBar!'),
  ),
), backgroundColor: Colors.transparent, elevation: 1000, behavior: SnackBarBehavior.floating,);

Answer 2

您可以使用 Flushbar 代替 SnackBar

检查更多细节

flushbar

Answer 3

类似的问题：Is there any way to achieve a Flutter top snackbar?

我没有关于Snackbar的解决方案。
是否有一个更适合此目的的小部件？是的
我提供使用Flushbar软件包的替代方法
您可以使用flushbarPosition更改通知位置：FlushbarPosition.TOP
https://github.com/AndreHaueisen/flushbar

        Flushbar(
      title: "Hey Ninja",
      message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP,
      flushbarStyle: FlushbarStyle.FLOATING,
      reverseAnimationCurve: Curves.decelerate,
      forwardAnimationCurve: Curves.elasticOut,
      backgroundColor: Colors.red,
      boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)],
      backgroundGradient: LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: false,
      duration: Duration(seconds: 4),
      icon: Icon(
        Icons.check,
        color: Colors.greenAccent,
      ),
      mainButton: FlatButton(
        onPressed: () {},
        child: Text(
          "CLAP",
          style: TextStyle(color: Colors.amber),
        ),
      ),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: "ShadowsIntoLightTwo"),
      ),
      messageText: Text(
        "You killed that giant monster in the city. Congratulations!",
        style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: "ShadowsIntoLightTwo"),
      ),
    )..show(context);

Answer 4

恐怕你做不到。

A lightweight message with an optional action which briefly displays at the bottom of the screen.

您只需更改其behavior和elevation

Answer 5

不幸的是，没有。但是，您可以使用https://api.flutter.dev/flutter/widgets/Overlay-class.html在另一个窗口小部件上显示一个窗口小部件（在您的情况下，就像工具提示窗口小部件一样），并创建类似于Snackbar窗口小部件的窗口小部件

Answer 6

为我工作：

您可以使用“对齐”包装容器。

SnackBar(
    content: GestureDetector(
      onTap: () {
        controller?.close();
      },
      child: Align(
        alignment: Alignment.topCenter,
        child: Container( ........

更改Flutter Snackbar的位置

6 个答案: