flutter - showModalBottomSheet 未打开底部工作表，未发现 MediaQuery 小部件异常

Question

我是 Flutter 的新手，我一直在尝试创建一个底部工作表，当您单击 float 操作按钮时它会打开。我遵循了很多关于如何做的教程，它们都显示了相同的东西，但每当我尝试实现它时，我就是不起作用，而是在调试控制台中抛出“找不到 MediaQuery 小部件”错误。

我的 flutter 代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('hello world')),
        floatingActionButton: FloatingActionButton(
          onPressed: () => showMe(context),
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  void showMe(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext contex) {
          return Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.message),
                title: Text('Send a message'),
                onTap: () {
                  Navigator.pop(context);
                  print('done !');
                },
              ),
            ],
          );
        });
  }
}

调试控制台的输出

════════ Exception caught by gesture ═══════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No MediaQuery widget found.

MyApp widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was: MyApp
The ownership chain for the affected widget is: "MyApp ← [root]"

Typically, the MediaQuery 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      debugCheckHasMediaQuery.<anonymous closure> 
package:flutter/…/widgets/debug.dart:211
#1      debugCheckHasMediaQuery 
package:flutter/…/widgets/debug.dart:223
#2      showModalBottomSheet 
package:flutter/…/material/bottom_sheet.dart:469
#3      MyApp.showMe 
package:unitconverter/main.dart:21
#4      MyApp.build.<anonymous closure> 
package:unitconverter/main.dart:13
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#e6e79
    debugOwner: GestureDetector
    state: possible
    won arena
    finalPosition: Offset(367.6, 640.7)
    finalLocalPosition: Offset(28.2, 29.3)
    button: 1
    sent tap down
════════════════════════════════════════════════════════════════════════════════

Answer 1

创建一个StatefulWidget 或StatelessWidget 作为您的家并设置您的家 Scaffold 作为家传递strong> 创建的小部件的属性

这对你有帮助

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',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showMe(context);
        },
      ),
    );
  }

  void showMe(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext contex) {
          return Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.message),
                title: Text('Send a message'),
                onTap: () {
                  Navigator.pop(context);
                  print('done !');
                },
              ),
            ],
          );
        });
  }
}