showModalBottomSheet（）未在颤动中打开底部模态答案

【问题标题】：showModalBottomSheet() not opening a bottom modal in fluttershowModalBottomSheet（）未在颤动中打开底部模态
【发布时间】：2020-04-23 18:57:43
【问题描述】：

showModalBottomSheet 不会弹出模式。我是颤振和飞镖的新手，但我认为这是一个问题，我不会提供任何帮助。弹出底部表单模式的简单页面..不起作用。

```
  import 'package:flutter/material.dart';

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

   class MyApp extends StatelessWidget {
     @override
      Widget build(BuildContext context) {

        return new MaterialApp(
           home: new Scaffold(
             appBar: new AppBar(title: const Text('Modal bottom sheet')),
             body: new Center(
               child: new RaisedButton(
                child: const Text('SHOW BOTTOM SHEET'),
               onPressed: () {
                 showModalBottomSheet<void>(context: context, builder: (BuildContext context) 
               {
            return new Container(
              child: new Padding(
                padding: const EdgeInsets.all(32.0),
                child: new Text('This is the modal bottom sheet. Click anywhere to dismiss.',
                  textAlign: TextAlign.center,
                  style: new TextStyle(
                    color: Theme.of(context).accentColor,
                    fontSize: 24.0
                  )
                )
              )
            );
          });
        }
      )
    )
  )
);

} } ```

我似乎无法弄清楚问题是什么

【问题讨论】：

将你的身体添加到一个新的无状态小部件中，然后调用 showBottomSheet

标签： flutter dart flutter-layout

【解决方案1】：

您可以将您的身体转换为新的小部件。

Dart Pad Example

完整代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
            appBar: new AppBar(title: const Text('Modal bottom sheet')),
            body: Sheet(), // new Widget
   ));
  }
}


class Sheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(
          child: const Text('SHOW BOTTOM SHEET'),
          onPressed: () {
            // Show sheet here
            showModalBottomSheet<void>(
                context: context,
                builder: (BuildContext context) {
                  return new Container(
                    child: new Padding(
                      padding: const EdgeInsets.all(32.0),
                      child: new Text(
                        'This is the modal bottom sheet. Click anywhere to dismiss.',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                            color: Theme.of(context).accentColor,
                            fontSize: 24.0),
                      ),
                    ),
                  );
                });
          }),
    );
  }
}

【讨论】：

【解决方案2】：

主要是因为它有上下文问题，所以它不起作用

你给出的背景会让你感到酸涩

_showBottomSheet(BuildContext context) {
showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return new Container(
        child: new Padding(
          padding: const EdgeInsets.all(32.0),
          child: new Text(
            'This is the modal bottom sheet. Click anywhere to dismiss.',
            textAlign: TextAlign.center,
            style: new TextStyle(
                color: Theme.of(context).accentColor,
                fontSize: 24.0),
          ),
        ),
      );
    });
}

【讨论】：