Flutter SnackBar显示没有Scaffold

于 2023-05-05 06:23:24 发布
阅读量140 收藏 1
点赞数
分类专栏： Flutter快速入门实战 文章标签： flutter android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012766656/article/details/130471239
版权
当在Flutter应用中尝试使用SnackBar时，如果遇到显示问题，通常是因为使用了错误的context，即页面级别的context。解决方案是在组件树中插入一个Builder widget，它能提供一个位于Scaffold之后的合适context，从而正确显示SnackBar。
摘要由CSDN通过智能技术生成 
Scaffold.of() called with a context that does not contain a Scaffold.

原因：context层级使用错误，一般是直接使用页面级的context导致错误

page -> Scaffold -> Button => 使用page级context导致错误

解决：中间嵌套一个Builder，用于"转换"出一个位于Scaffold后的context

page -> Scaffold -> Builder(new context) -> Button

import 'package:flutter/material.dart';

class HomePage extends
了解本专栏 订阅专栏 解锁全文 超级会员免费看
AppBlog_CN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
Flutter之SnackBar原理详解
菜鸟博客
05-28 3901
初次学习SnackBar控件，第一反应就是这货怎么感觉跟Android的Toast一样！使用起来确实简单 Snackbar的作用就是在屏幕的底部展示一个简短的消息,与此同时，Snackbar也可以与用户进行交互，实现效果如下图： 如上图所示SnackBar分成两个部分：内容区域（content）+交互区域（action）。Scaffold是可以配置底部导航tab的，如果配置了的话，SnackBar怎么展示呢？如下图可以看出SnackBar紧贴着底部导航tab展示： 上面两图展示SnackBar的代码如下
Scaffold.of() called with a context that does not contain a Scaffold.
moyuxueyi的专栏
05-27 599
class TestWidget extends State<TestWidget> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Widget简介")), body: Center( child:RaisedButton( onPressed: () { .
Flutter showSnackBar 报错：
一条咸鱼
09-19 1893
Flutter 使用Scaffold展示SnackBar报错： 源代码： Scaffold.of(context).showSnackBar(new SnackBar( duration: Duration(seconds: 2), content: new Text("this is snackBar"), )); 报错： P...
Flutter:Scaffold.of() called with a context that does not contain a Scaffold.
北暖之森
07-14 4623
Flutter:Scaffold.of() called with a context that does not contain a Scaffold. 当我第一次点击按钮想要弹出底部消息时出现了如下错误 @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text('SnackBar')
Flutter: Scaffold.of() called with a context that does not contain a Scaffold.
SemiraChen的博客
09-23 2155
https://api.flutter.dev/flutter/material/Scaffold/of.html body下再加一层Builder
Flutter错误总结1:Scaffold.of() called with a context that does not contain a Scaffold.
Timer的博客
03-29 4925
在这里插入代码片## 1.Scaffold.of() called with a context that does not contain a Scaffold. 错误出现的场景: 使用Navigator 从第二个页面向第一个页面返回值 class HomePage extends StatelessWidget { @override Widget build(BuildConte...
Flutter SnackBar 提示信息
03-29
SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar,要先拿到Scaffold。 当BuildContext在Scaffold之前时，调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决
Flutter - SnackBar
LittleUniverse
03-04 348
Flutter 之 SnackBar SnackBar 是用户操作后，显示提示信息的控件，默认显示在屏幕底部，默认显示4s后自动隐藏。 SnackBar是通过Scaffold的showSnackBar方法来显示，所以想要显示SnackBar必须要先拿到Scaffold。 SnackBar 参数详细说明参见官方文档； 主要介绍一下，以下2个参数： duration 属性可以设置提示条显示的时间；...
Flutter实战（三）---SnackBar
学无止境
04-17 2378
Snackbar是Android 5.0新特性——Material Design中的一个控件，用来代替Toast，Snackbar与Toast的主要区别是：Snackbar可以滑动退出，也可以处理用户交互（点击）事件。 Snackbar的特性 Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失 可以在屏幕上滑动关闭 出现时不会阻碍用户在屏幕上的输入 屏幕上同时最多只能显示一个Sn......
点击按钮关闭Drawer报错：Scaffold.of() called with a context that does not contain a Scaffold.
microcosm1994的博客
09-24 1386
Scaffold.of() called with a context that does not contain a Scaffold. 错误原因：Scaffold.of()所需的context是Scaffold的，并不是Scaffold上方的build(BuildContext context)中的，这两个并不是一个。 Widget build(BuildContext context)...
【Flutter 问题系列第 7 篇】TextField 去掉下划线
“Allen Su”的博客
09-10 4329
TextField 去掉下划线
《Flutter 控件大全》第一零三：SnackBar
老孟Flutter
04-04 487
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 基础用法 应用程序有时候需要弹出消息提示用户，比如‘网络连接失败’、‘下载成功’等提示，就像...
Flutter 不用Scaffold.of(context)来显示SnackBar，直接用GlobalKey来访问
wuleixxh的专栏
11-12 1463
由于Flutter的SnackBar必须依赖于Scaffold.of(context)，而要访问正确的context，必须要严格的套层级或者传参context,这样会有一些弊端，在一个函数内套过多层级会让代码维护非常困难，传参对于多个回调事件call也很麻烦，这时可以采用GlobalKey来直接访问，而不用Scaffold.of(context)。 import 'package:fl...
flutter中的SnackBar
chunchun1230的博客
08-30 2353
先看一下什么是SnackBar,如下图：                                                           image  SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。它还可以添加操作按钮，等等。SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar,...
Flutter：问题收录
J.D.的博客
05-31 5987
Navigator operation requested with a context that does not include a Navigator 在写页面跳转的时候报出了该错误： void main() =&amp;amp;amp;amp;amp;amp;amp;gt; runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is th...
maters鸿蒙系统,Flutter入门进阶之旅（十）Dialog&Toast
weixin_28863779的博客
05-28 393
做原生开发的时候，我们都知道要想让一个app做的活灵活现，与用户交互时有更棒的体验，各种样式美轮美奂的对话框跟提示是必不可少的，Flutter在设计对话框的时候充分考虑到了在UI上的体验，帮助我们设计了一整套的基于material design风格的对话框以及轻量级的用于提示的widget。看完上面的效果图，读者是不是也觉得这一套UI设计给人以很棒的体验，下面我们就逐一介绍下上图中出现的常用于提示...
Flutter 之 Scaffold
厚德出品，必是精品
10-28 6036
Scaffold是实现Material Design的布局结构。也就是说， MaterialApp 的 child 是 Scaffold Widget。 在Material设计中定义的单个界面上的各种布局元素，在 Scaffold 中都有支持，比如 左边栏（Drawers）、snack bars、以及 bottom sheets。 Scaffold 有下面几个主要属性： appBar：显示在界...
flutter snackbar
最新发布
05-25
Flutter Snackbar 是一个轻量级的通知组件，它可以在屏幕底部显示短暂的消息。下面是一些使用 Snackbar 的示例： 1. 显示简单的文本消息： ``` ScaffoldMessenger.of(context).showSnackBar( SnackBar( content:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值