如何在没有脚手架的情况下显示 snackBar

Question

我试图在我的应用程序中显示 snackbar 以通知用户，但没有脚手架它显示错误。我当前的代码是：

scaffoldKey.currentState?.showSnackBar(
    new SnackBar(
      backgroundColor: color ?? Colors.red,
      duration: Duration(milliseconds: milliseconds),
      content: Container(
        height: 50.0,
        child: Center(
          child: new Text(
            title,
            style: AppTheme.textStyle.lightText.copyWith(color: Colors.white),
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    ),
  )

Answer 1

它可以获取当前上下文并像这样显示 snackbar：

void _showToast(BuildContext context) {
  final scaffold = Scaffold.of(context);
  scaffold.showSnackBar(
    SnackBar(
      content: const Text('Updating..'),
    ),
  );
}

this._showToast(context);

Answer 2

不，这是不可能的。 Snackbar 是脚手架的一部分。它必须有一个支架 parent。 Snackbar

在脚手架内部parent，你可以像下面那样做

BuildContext con=context;
final snackBar = SnackBar(content: Text(message));
Scaffold.of(con).showSnackBar(snackBar);

Answer 3

使用https://pub.dev/packages/get

然后您只需调用 Get.snackbar() 即可在您希望显示的位置显示快餐栏。

Get.snackbar('Hi', 'i am a modern snackbar');

注意

当你也没有上下文时，你可以使用这个包。

Answer 4

Scaffold.of(context).showSnackBar() 已弃用。您现在应该使用 ScaffoldMessenger。

示例：ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Clicked!")));

Here 列出了新方法的好处。

Answer 5

如果您可以从访问上下文 ，只需调用

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

如果您没有上下文（例如：显示网络请求错误），请根据

的回答使用此代码段

我们将使用属性 scaffoldMessengerKey，它允许我们仅通过一个 GlobalKey 显示小吃店而无需上下文。此外，无需添加像 Get 这样的第三方包。

首先创建一个globals.dart来存储一个GlobalKey

//globals.dart

import 'package:flutter/material.dart';

final GlobalKey<ScaffoldMessengerState> snackbarKey =
    GlobalKey<ScaffoldMessengerState>();

其次，将scaffoldMessengerKey属性添加到MaterialApp

//main.dart

import 'globals.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      scaffoldMessengerKey: snackbarKey, // <= this
      ...

最后，在任何地方引用这个Key来显示一个Snackbar

// anywhere

import 'globals.dart';

final SnackBar snackBar = SnackBar(content: Text("your snackbar message"));
snackbarKey.currentState?.showSnackBar(snackBar);

如何在没有脚手架的情况下显示 snackBar

How to show snackBar without Scaffold

dart

snackbar

flutter

flutter-layout