🦔

No MediaQuery widget found.というエラーが出たら-Flutter-

2021/02/11に公開

FlutterでshowModalBottomSheetを使った時にエラー

下の記事のようにFloatingButtonを押したら一時的にBottomsheetが出るようにコードを書いたところ、"No MediaQuery widget found."というエラーが発生した。
コード例


class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueAccent,
        body: Column()         
        floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.blueAccent,
            child: Icon(Icons.add),
            onPressed: () {
              print('oh Pressed');
              showModalBottomSheet(
                context: context,
                builder: (context) => Container(),
                isScrollControlled: true,
                backgroundColor: Colors.transparent,
              );
            },
          ),
        ),
    );
  }
}

結論としてはshowModalBottomSheetをBuilderウィジットで囲めば良いだけだった。

floatingActionButton: Builder(
          builder: (context) => FloatingActionButton(
            backgroundColor: Colors.blueAccent,
            child: Icon(Icons.add),
            onPressed: () {
              print('oh Pressed');
              showModalBottomSheet(
                context: context,
                builder: (context) => Container(),
                isScrollControlled: true,
                backgroundColor: Colors.transparent,
              );
            },
          ),

これはshowModalBottomSheetがcontextでMaterialAppを探しているが、build(BuildContext context)のcontextを取ってきておりこのcontextはMaterialAppを含んでおらずエラーが発生する。

そこで実際にMaterialAppを含んでいるshowModalBottomSheetにcontextを渡してやる必要があり、そのために実際にMaterialAppを含むBuilderウィジットで囲むことで達成できる。

この辺りのMaterialApp やbuild やBuilderあたりが何をやっているのか詳しく調べないとよくわからないエラーだった。

##参考記事
stackoverflowにめちゃくちゃ親切に解説してくださる方がいて感謝しきれない

FlutterでshowModalBottomSheetを使った時にエラー

Discussion