[英]Scaffold not found error in Flutter for BottomModalSheet widget even when it is defined inside a Scaffold
我試圖為測試應用程序實現一個 BottomModalSheet。 但是每次都會彈出同樣的錯誤,說找不到腳手架。 該應用程序的代碼如下。 錯誤顯示 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")
),
],
),
)
],
),
);
}
}
錯誤日志如下:
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
════════════════════════════════════════════════════════════════════════════════════════════════════
您可以使用“showModalBottomSheet”。
var sheetController = showModalBottomSheet(
context: context,
builder: (context) => BottomSheetWidget());
sheetController.then((value) {});
您可以在下面復制粘貼運行完整代碼
您可以使用 var scaffoldKey.currentState.showBottomSheet
代碼片段
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");
});
},
工作演示
完整代碼
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")),
],
),
)
],
),
);
}
}
如此處所述,使用 Builder 小部件而不是 Keys。 所以這里是代碼:
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.