Flutter 如何使用普通页面作为对话框-颤振

我有一个普通的页面作为设置。dart:）像这样。但是大部分页面是空的。我想使用此页面的较小版本作为对话框。单击设置图标时，将弹出此对话框页面。我怎么做

build{
return Scaffold(
body: Column(
children: <Widget>[
Text('SETTINGS')
Button
Button
Button
...
]

构建{
返回脚手架(
正文：专栏(
儿童：[
文本（“设置”）
按钮
按钮
按钮
...
]

在“设置”按钮上按“打开”功能

      onPressed: () {
        showDialog(
          context: context,
          child: Dialog(
            child: settings.dartPage(),
          ),
        );
      },

---

但是，您需要删除settings.dart中的Scaffold小部件以使其变小（与正常对话框的大小相同），并进行一些自定义以更改其外观

您可以通过使用

堆栈

小部件来完成此操作

将您的

Scaffold

包装在一个“AnimatedOpacity”小部件中，并提供不透明度和持续时间的值

声明一个全局

double scaffoldOpacity=1.0

，以便在对话框出现时轻松更改脚手架的不透明度，并在对话框消失时将其更改回来

使用

堆栈

小部件包装

AnimatedOpacity

小部件，然后将

SettingPage（）

小部件放置在用动画小部件包装的支架上方

将

Settings（）

小部件包装在

Visibility

小部件中，并提供一个

bool isSettingsOpen

在对话框的两种状态之间切换

以下是代码的示例片段：

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  double scaffoldOpacity = 1.0;
  bool isSettingsOpen = false;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AnimatedOpacity(
          opacity: scaffoldOpacity,
          duration: Duration(milliseconds: 100),
          child: Scaffold(
            appBar: AppBar(
              leading: FlatButton(
                child: Icon(Icons.settings),
                onPressed: () {
                  setState(() {
                    scaffoldOpacity = 0.3;
                    isSettingsOpen = true;
                  });
                },
              ),
              title: Text('Main Page'),
            ),
            body: Container(
              color: Colors.white,
              child: Text('MAIN PAGE BODY'),
            ),
          ),
        ),
        Visibility(
            visible: isSettingsOpen,
            child: Container(
              child: Column(
                children: <Widget>[
                  Text('Settings'),
                  //Button,

                  //Button to close settings dialog
                  FlatButton(
                    child: Icon(Icons.close),
                    onPressed: () {
                      setState(() {
                        scaffoldOpacity = 1.0;
                        isSettingsOpen = false;
                      });
                    },
                  ),

                  // rest of the settings page ui
                ],
              ),
            )),
      ],
    );
  }
}

class主页扩展StatefulWidget{
@凌驾
_MainPageState createState（）=>\u MainPageState（）；
}
类_MainPageState扩展状态{
双层脚手架不透明度=1.0；
bool isSettingsOpen=false；
@凌驾
小部件构建（构建上下文）{
返回堆栈(
儿童：[
动产能力(
不透明度：脚手架不透明度，
持续时间：持续时间（毫秒：100），
孩子：脚手架(
appBar:appBar(
引导：扁平按钮(
子：图标（图标.设置），
已按下：（）{
设置状态（）{
脚手架不透明度=0.3；
isSettingsOpen=true；
});
},
),
标题：文本（“主页”），
),
主体：容器(
颜色：颜色，白色，
子项：文本（“主页面正文”），
),
),
),
可见度(
可见：isSettingsOpen，
子：容器(
子：列(
儿童：[
文本（“设置”），
//按钮，
//关闭设置对话框的按钮
扁平按钮(
子：图标（Icons.close），
已按下：（）{
设置状态（）{
脚手架不透明度=1.0；
isSettingsOpen=false；
});
},
),
//设置页面ui的其余部分
],
),
)),
],
);
}
}

添加更多信息，使用什么技术，如何使用此对话框颤振。我不使用对话框，因为我不知道如何使用此链接，有一个函数\u showMyDialog。我不知道如何在此函数中调用我的页面。检查本教程：