android - 手势捕获的 Flutter 异常。在 showModalBottomSheet 中找不到 MediaQuery 小部件

Question

为什么我不能在 floatingActionButton 中使用 showModalBottomSheet？它只是一直向我显示此错误:

I/flutter (16368): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter (16368): The following assertion was thrown while handling a gesture:
I/flutter (16368): No MediaQuery widget found.
I/flutter (16368): MyApp widgets require a MediaQuery widget ancestor.
I/flutter (16368): The specific widget that could not find a MediaQuery ancestor was:
I/flutter (16368):   MyApp
I/flutter (16368): The ownership chain for the affected widget is: "MyApp ← [root]"
I/flutter (16368): Typically, the MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at the top of
I/flutter (16368): your application widget tree.
I/flutter (16368): 
I/flutter (16368): When the exception was thrown, this was the stack:
I/flutter (16368): #0      debugCheckHasMediaQuery.<anonymous closure> (package:flutter/src/widgets/debug.dart:211:7)
I/flutter (16368): #1      debugCheckHasMediaQuery (package:flutter/src/widgets/debug.dart:223:4)
I/flutter (16368): #2      showModalBottomSheet (package:flutter/src/material/bottom_sheet.dart:469:10)
I/flutter (16368): #3      _MyAppState.build.<anonymous closure> (package:flutter_happy_habits/main.dart:32:29)
I/flutter (16368): #4      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14)

import 'package:flutter/material.dart';
import './models/home.dart';
import 'models/progress.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedPage = 0;
  final _pageOptions = [
    Home(),
    Progress(),
    Progress(),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: true,
      home: new Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: _pageOptions[_selectedPage],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () { showModalBottomSheet(
            context: context,
            builder: (context) {
              return Text('Modal bottom sheet', style: TextStyle(fontSize: 30));
            });
          }
        ),
        bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          notchMargin: 4.0,
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {
                  print("Home");
                  setState(() {
                    _selectedPage = 0;
                  });
                },
              ),
              IconButton(
                icon: Icon(Icons.insert_chart),
                onPressed: () {
                  print("Progress");
                  setState(() {
                    _selectedPage = 1;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

这是因为，showModalBottomSheet尝试访问 MaterialApp 类型的祖先从给定的context .

使用Builder获取新的小部件 context与 MaterialApp祖先或分离你的MaterialAapp和 Scaffold小部件到单独的小部件中。

使用 Builder :

floatingActionButton: Builder(
  builder: (context) => FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () { showModalBottomSheet(
          context: context,
          builder: (context) {
            return Text('Modal bottom sheet', style: TextStyle(fontSize: 30));
          });
      }
  ),
),