Flutter中Bottom Sheet无法打开，提示No MaterialLocalizations found怎么解决？

问题原因 #

你调用showModalBottomSheet时传入的context是MaterialApp层级的上下文，而该方法需要的是MaterialApp内部子Widget的上下文（才能获取到MaterialLocalizations资源），因此抛出找不到本地化资源的异常。

解决方案一：用Builder包裹按钮 #

修改body部分代码，通过Builder获取正确的上下文：

body: Center(
  child: Builder(
    builder: (context) {
      return ElevatedButton(
        child: const Text('Bottom Sheet'),
        onPressed: () {
          showModalBottomSheet(
            context: context, 
            builder: buildButtonSheet);
        },
      );
    },
  ),
),

解决方案二：将Scaffold抽为独立Widget #

把首页内容拆成单独的Widget，确保上下文来自MaterialApp内部：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Sheet Example',
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Widget buildButtonSheet(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 300,
      child: const Center(
        child: Text('Sheet Opened'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: const Text('Bottom Sheet Example'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Bottom Sheet'),
          onPressed: () {
            showModalBottomSheet(
              context: context, 
              builder: buildButtonSheet);
          },
        ),
      ),
    );
  }
}

原理说明 #

MaterialApp是提供MaterialLocalizations等全局资源的父Widget，只有它的子Widget上下文才能访问这些资源。原代码中直接使用_MyAppState的上下文，对应的是MaterialApp本身的节点，无法获取到内部的本地化资源，通过Builder或独立Widget可以获取到正确的子级上下文，解决异常问题。

内容的提问来源于stack exchange，提问作者Im Onforum