更改 Flutter Snackbar 的位置

Question

當不滿足某些條件時，我想在按鈕上方顯示一條簡單的消失錯誤消息。 Flutter 的 Snackbar 似乎非常適合這個目的。

但是，我很難將 Snackbar 的位置更改為屏幕最底部以外的任何位置。 這可能嗎？ 如果沒有，是否有更適合此目的的 Widget？

我目前的小吃店代碼：

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

恐怕你不能那樣做。

帶有可選操作的輕量級消息，會在屏幕底部短暫顯示。

你可以改變它的行為和高度

Answer 3

抱歉不行。 但是您可以使用https://api.flutter.dev/flutter/widgets/Overlay-class.html在另一個小部件上顯示小部件（在您的情況下，就像工具提示小部件一樣）並創建一個類似於 Snackbar 小部件的小部件

Answer 4

您可以使用Flushbar而不是SnackBar

檢查它以獲取更多詳細信息

沖水桿

Answer 5

對我有用：

您可以使用“對齊”包裝容器。

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

Answer 6

您可以嘗試將行為設置為SnackBarBehavior.floating並根據需要設置邊距。

SnackBar(
  behavior: SnackBarBehavior.floating,
  margin: EdgeInsets.only(bottom: 100.0),
  content: Text("Hello World!"),
);

Answer 7

類似的問題： 有沒有辦法實現Flutter頂級零食吧？

我沒有關於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);