为什么showModalBottomSheet()函数不起作用

Question

为什么这段代码不起作用，底部工作表没有显示。我也重新尝试运行代码，但它仍然不起作用。我想在单击按钮时显示颤振的模态底表。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
void startInputAction(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (_) {
return Container(
height: 200,
padding: EdgeInsets.all(10),
child: Text("Something"),
);
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Error Practice Bottom Sheet"),
backgroundColor: Colors.purple,
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.purple,
padding: EdgeInsets.all(20),
child: Text("Click here"),
onPressed: () => startInputAction(context),
)
],
),
),
),
);
}
}

Answer 1

MateriaApp处于同一级别，这就是您收到此错误的原因。

以下代码将解决您的问题。

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MyApp(),
));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
void startInputAction(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (_) {
return Container(
height: 200,
padding: EdgeInsets.all(10),
child: Text("Something"),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Error Practice Bottom Sheet"),
backgroundColor: Colors.purple,
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.purple,
padding: EdgeInsets.all(20),
child: Text("Click here"),
onPressed: () => startInputAction(context))
],
),
),
);
}
}

Answer 2

在 Flutter 文档中查看此示例。

https://api.flutter.dev/flutter/material/showModalBottomSheet.html

您的问题可能与您从Scaffold传递相同的BuildContext有关。您至少应该在Scaffold的body参数中添加一个Builder小部件，以获取此微件所需的适当上下文。

代码如下：

class _MyAppState extends State<MyApp> {
void startInputAction(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (_) {
return Container(
height: 200,
padding: EdgeInsets.all(10),
child: Text("Something"),
);
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Error Practice Bottom Sheet"),
backgroundColor: Colors.purple,
),
body: Builder(
builder: (context) {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.purple,
padding: EdgeInsets.all(20),
child: Text("Click here"),
onPressed: () => startInputAction(context),
)
],
),
);
},
),
),
);
}
}

Answer 3

正如@Viren所建议的，你需要在代码中有一个MaterialApp。

检查下面的代码：

import 'package:flutter/material.dart';
void main() => runApp(
// add your material app here
MaterialApp(
home: MyApp(), 
),
);
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
void startInputAction(BuildContext context){
showModalBottomSheet(
context: context,
builder: (_){
return Container(
height: 200,
padding: EdgeInsets.all(10),
child: Text("Something"),
);
}
)
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Error Practice Bottom Sheet"),
backgroundColor: Colors.purple,
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.purple,
padding: EdgeInsets.all(20),
child: Text("Click here"),
onPressed: () => startInputAction(context)
)
],
),
),
),
);
}
}