在 Flutter 中打开应用程序时如何显示 Snackbar 或底部工作表？

Posted 2023-02-23

【中文标题】在 Flutter 中打开应用程序时如何显示 Snackbar 或底部工作表？

【英文标题】：How to show a Snackbar or bottom sheet when the app opens in Flutter?

【发布时间】：2018-12-29 17:32:01

【问题描述】：

所以我有一个要求，我需要在应用程序启动时显示Snackbar，但是当我尝试这样做时，它给了我上下文错误。我如何知道我的 Widget 树已经构建并使用上下文来显示Snackbar。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    Scaffold.of(context).showSnackBar(SnackBar(content: Text('Welcome User')));
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  

【问题讨论】：

请包含一个重现您遇到的问题的代码的 sn-p

在***.com/questions/45948168/…查看答案

【参考方案1】：

创建ScaffoldState 类型的GlobalKey，以确保您定位正确的脚手架以在其上显示 SnackBar。

将目标 Scaffold 的键设置为您创建的键。

在您的 initState() 函数中，使用 WidgetsBinding 类和 addPostFrameCallback 在构建布局时执行您的代码。在回调中显示您的 SnackBar。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  var _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() 
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) => _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Welcome User'))));
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  

【讨论】：

嗯，成功了！你能告诉我这个函数是做什么的吗？有没有类似的函数来监听 WidgetTree 的状态。

【参考方案2】：

您不需要GlobalKey、Builder 或任何类似的典型内容。只需使用ScaffoldMessenger.of(context).showSnackBar()。

完整代码：

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget 
  @override
  _HomePageState createState() => _HomePageState();


class _HomePageState extends State<HomePage> 
  @override
  void initState() 
    super.initState();
    final snackBar = SnackBar(content: Text('Hi'));
    Future(() => ScaffoldMessenger.of(context).showSnackBar(snackBar));
  

  @override
  Widget build(BuildContext context) => Scaffold();

【讨论】：

还值得一提的是，这是一个重大变更 API，目前还没有在稳定频道上可用。最有可能在主频道上。

如何在每次应用程序进入前台时显示此内容？目前，它只会在页面重建时显示。如果应用程序进入前台，则不会重建所选页面。