如何在 Flutter 中创建 Toast [英] How to create Toast in Flutter

问题描述

我可以在 Flutter 中创建类似于

import 'package:flutter/material.dart';无效主(){运行应用程序(我的应用程序())；}class MyApp 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回 const MaterialApp(家:家()，);}}class Home 扩展 StatelessWidget {常量首页({钥匙钥匙，}) : super(key: key);@覆盖小部件构建(BuildContext 上下文){返回脚手架(应用栏:应用栏(标题: const Text('小吃吧'),),身体:中心(孩子:凸起按钮(onPressed: () =>_showToast(上下文)，孩子:const Text('显示吐司')，),),);}无效_showToast(BuildContext上下文){最终脚手架 = ScaffoldMessenger.of(context);scaffold.showSnackBar(小吃店(内容:const Text('添加到收藏夹'),动作:SnackBarAction(标签:'UNDO'，onPressed:scaffold.hideCurrentSnackBar)，),);}}

Can I create something similar to Toasts in Flutter?

Just a tiny notification window that is not directly in the face of the user and does not lock or fade the view behind it.

解决方案

UPDATE: Scaffold.of(context).showSnackBar is deprecated in Flutter 2.0.0 (stable)

You can access the parent ScaffoldMessengerState using ScaffoldMessenger.of(context).

Then do something like

ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text("Sending Message"),
    ));

Snackbars are the official "Toast" from material design. See Snackbars.

Here is a fully working example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snack bar'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () => _showToast(context),
          child: const Text('Show toast'),
        ),
      ),
    );
  }

  void _showToast(BuildContext context) {
    final scaffold = ScaffoldMessenger.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: const Text('Added to favorite'),
        action: SnackBarAction(label: 'UNDO', onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
  }
}

这篇关于如何在 Flutter 中创建 Toast的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！