Question

我想创建一个简单的小吃栏，它位于屏幕的顶部，而底部却是这样。在Flutter中，我使用了本机的小吃栏，但它没有这种功能。

Answer 1

您可以使用https://pub.dartlang.org/packages/flushbar

RaisedButton(
  child: Text('Show Top Snackbar'),
  onPressed: () {
    Flushbar(
      flushbarPosition: FlushbarPosition.TOP,
    )
      ..title = "Hey Ninja"
      ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
      ..duration = Duration(seconds: 3)
      ..show(context);
  },
),

Answer 2

用 Column 包裹您的小部件并将 mainAxisAlignment 设置为 MainAxisAlignment.start。此外，将 SnackBar 的颜色设置为透明。

Column(
     mainAxisAlignment: MainAxisAlignment.start,
      children: [yourWidget()], ),

Answer 3

2021 年 1 月。也可以使用 Getx 包 - https://pub.dev/packages/get

只需使用代码

Get.snackbar(
  'message',
  'message body',
  onTap: (_) => DoSomething(),
  duration: Duration(seconds: 4),
  animationDuration: Duration(milliseconds: 800),
  snackPosition: SnackPosition.TOP,
);

奖励:) 您可以在没有上下文的情况下调用它 - 从控制器、函数、BLoC 等中调用。

查看精彩教程 https://www.youtube.com/watch?v=RaqPIoJSTtI&t=503s

Answer 4

这与快餐栏有些不同，但是如果您仍在寻找信息演示选项，我刚刚完成了一个带有下拉横幅的发布包。

https://pub.dev/packages/dropdown_banner

Answer 5

使用这个包https://pub.dev/packages/another_flushbar

Flushbar(
  message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  icon: Icon(
    Icons.info_outline,
    size: 28.0,
    color: Colors.blue[300],
    ),
  duration: Duration(seconds: 3),
  leftBarIndicatorColor: Colors.blue[300],
)..show(context);

Answer 6

我用这个得到了结果。该键由构建在小部件内部的Scaffold使用。

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(_onBuildCompleted);
  }

  var scaffoldKey = new GlobalKey<ScaffoldState>();

  _onBuildCompleted(_) {
    print("SHOWN" * 3);

    scaffoldKey.currentState.showSnackBar(
        new SnackBar(backgroundColor: Colors.blue[600], content: Continue()));
    // Navigator.of(context).push(_createRoute());
  }

有什么方法可以实现Flutter顶部小吃吧？

6 个答案: