如何打开此底页？

Question

我遵循了一些教程，并完全按照 T 恤创建底页，但它就是打不开。

我收到的唯一消息是调试控制台中的“I/flutter (6593)：抛出另一个异常：未找到 MaterialLocalizations”

这是代码：

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Sheet Example',
      home: 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);

            },
          ),
        ),
      ),
    );
  }
}

我尝试了之前发布的解决方案之一（showModalBottomSheet() not opening a Bottom modal in flutter）但没有工作。

我也按照 ChatGPT 的建议尝试使用不同的模拟器，但没有成功。

Answer 1

您的

context

在小部件树中还没有

MaterialLocalizations

小部件，检查此答案。因此，这意味着您需要“新”上下文，并且您有两种可能的解决方案。您可以将身体移动到新的小部件中，也可以使用

Builder

小部件包裹身体。

使用 Builder 小部件的解决方案：

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

NewWidget 的解决方案：

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Sheet Example',
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: const Text('Bottom Sheet Example'),
        ),
        body: NewWidget(),
      ),
    );
  }
}

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

  Widget buildButtonSheet(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 300,
      child: Center(
        child: Text('Sheet Opened'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('Bottom Sheet'),
        onPressed: () {
          showModalBottomSheet(context: context, builder: buildButtonSheet);
        },
      ),
    );
  }
}