[英]Scaffold not found error in Flutter for BottomModalSheet widget even when it is defined inside a Scaffold
I was trying to implement a BottomModalSheet for a test App.我试图为测试应用程序实现一个 BottomModalSheet。 But every time the same error pops up saying that Scaffold not found.但是每次都会弹出同样的错误,说找不到脚手架。 The code for the app is below.该应用程序的代码如下。 The error shows the Scaffold is implemented by the MaterialApp Widget, So I removed the MaterialApp Widget and tried but the same error popped up again.错误显示 Scaffold 是由 MaterialApp Widget 实现的,所以我删除了 MaterialApp Widget 并尝试但再次弹出相同的错误。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Hello,World"),
),
body: Center(
child: Container(
height: 300,
width: 400,
child: Column(
children: <Widget>[
//Container(color: Colors.blue, child: Text("Hello,World")),
Container(
height:200,
width:500,
child: FlatButton(
onPressed: (){
print("I Was clicked");
var sheetController = showBottomSheet(
context: context,
builder: (context) => BottomSheetWidget());
sheetController.closed.then((value) {
});
},
child: Container(
color: Colors.red,
),
),
),
],
),
),
),
);
}
}
class BottomSheetWidget extends StatefulWidget {
const BottomSheetWidget({Key key}) : super(key: key);
@override
_BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}
class _BottomSheetWidgetState extends State<BottomSheetWidget> {
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 5, left: 15, right: 15),
height: 160,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 125,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
blurRadius: 10, color: Colors.grey[300], spreadRadius: 5)
]),
child: Column(
children: <Widget>[
Container(
height:200,
width: 500,
child:Text("This is bottom Sheet")
),
],
),
)
],
),
);
}
}
The Error log is as follows:错误日志如下:
Syncing files to device AOSP on IA Emulator...
Reloaded 1 of 478 libraries in 2,727ms.
I/flutter (31983): I Was clicked
════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No Scaffold widget found.
MyHomePage widgets require a Scaffold widget ancestor.
The specific widget that could not find a Scaffold ancestor was: MyHomePage
state: _MyHomePageState#d2d59
The ancestors of this widget were:
: MaterialApp
state: _MaterialAppState#d6736
: MyApp
...
Typically, the Scaffold widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.
When the exception was thrown, this was the stack:
#0 debugCheckHasScaffold.<anonymous closure> (package:flutter/src/material/debug.dart:112:7)
#1 debugCheckHasScaffold (package:flutter/src/material/debug.dart:123:4)
#2 showBottomSheet (package:flutter/src/material/bottom_sheet.dart:534:10)
#3 _MyHomePageState.build.<anonymous closure> (package:flutter_app/main.dart:42:43)
#4 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14)
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#6c46a
debugOwner: GestureDetector
state: possible
won arena
finalPosition: Offset(169.5, 356.2)
finalLocalPosition: Offset(163.8, 124.4)
button: 1
sent tap down
════════════════════════════════════════════════════════════════════════════════════════════════════
You can use "showModalBottomSheet".您可以使用“showModalBottomSheet”。
var sheetController = showModalBottomSheet(
context: context,
builder: (context) => BottomSheetWidget());
sheetController.then((value) {});
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
You can use var scaffoldKey.currentState.showBottomSheet
您可以使用 var scaffoldKey.currentState.showBottomSheet
code snippet代码片段
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
return Scaffold(
key: scaffoldKey,
...
onPressed: () {
print("I Was clicked");
var sheetController = scaffoldKey.currentState
.showBottomSheet((context) => BottomSheetWidget());
sheetController.closed.then((value) {
print("closed");
});
},
working demo工作演示
full code完整代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title: Text("Hello,World"),
),
body: Center(
child: Container(
height: 300,
width: 400,
child: Column(
children: <Widget>[
//Container(color: Colors.blue, child: Text("Hello,World")),
Container(
height: 200,
width: 500,
child: FlatButton(
onPressed: () {
print("I Was clicked");
var sheetController = scaffoldKey.currentState
.showBottomSheet((context) => BottomSheetWidget());
sheetController.closed.then((value) {
print("closed");
});
},
child: Container(
color: Colors.red,
),
),
),
],
),
),
),
);
}
}
class BottomSheetWidget extends StatefulWidget {
const BottomSheetWidget({Key key}) : super(key: key);
@override
_BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}
class _BottomSheetWidgetState extends State<BottomSheetWidget> {
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 5, left: 15, right: 15),
height: 160,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 125,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
blurRadius: 10, color: Colors.grey[300], spreadRadius: 5)
]),
child: Column(
children: <Widget>[
Container(
height: 100,
width: 500,
child: Text("This is bottom Sheet")),
],
),
)
],
),
);
}
}
As stated here Use Builder widget instead of Keys.如此处所述,使用 Builder 小部件而不是 Keys。 So here is the code:所以这里是代码:
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello,World"),
),
body: Builder( // Wrap widget tree with Builder widget
builder: (context) {
return Center(
child: Container(
height: 300,
width: 400,
child: Column(
children: <Widget>[
Container(
height: 200,
width: 500,
child: FlatButton(
onPressed: () {
print("I Was clicked");
var sheetController = showBottomSheet(
context: context,
builder: (context) => BottomSheetWidget());
sheetController.closed.then((value) {});
},
child: Container(
color: Colors.red,
),
),
),
],
),
),
);
}));
}
}```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.