小部件采用设置的大小参数全屏

Question

对于一个新手问题，我很抱歉，但我完全无法理解以下工作原理的要点。

我想做什么 - 我想创建一个自定义小部件，例如 CustomPopUp，并在单击按钮时打开此 PopUp 小部件。

有什么问题 - 当我为该 PopUp 小部件指定尺寸参数和约束并尝试 Navigator.push 它或使用 showDialog 调用它时，它会占用整个屏幕，忽略尺寸和 opaque: false 参数（在第一种情况）。

请在下面找到一个示例（为简化起见，该示例仅使用showDialog 选项）：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FlatButton(
          child: Text("PushMe"),
          onPressed: () {
            showDialog(
              context: context,
              builder: (_) => CustomPopUp()
            );
          },
        )

        ),
      );
  }
}

class CustomPopUp extends StatelessWidget { //the custom popup widget 

  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(
        maxHeight: 600, //sizings are just for example
        maxWidth: 300,
        minHeight: 400,
        minWidth: 200),
      height: 600,
      width: 300,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(30)),
        border: Border.all(color: Colors.black, width: 1, style: BorderStyle.solid)
      ),
      child:
      Text("Test")

    );

  }
}

结果：Screenshot

那么，我做错了什么？

提前致谢！

Answer 1

用不可见的对话框包装您的自定义弹出窗口：

      body: Center(
          child: FlatButton(
            child: Text("PushMe"),
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (_) => Dialog(child: CustomPopUp(), backgroundColor: Colors.transparent,)
              );
            },
          )
      ),

现在您甚至不需要BoxConstraints。

一些提示：

1. 使用ConstrainedBox 小部件而不是Container 进行约束

2. 使用SizedBox 而不是Container 来设置高度和宽度。

Container 默认会尝试匹配其父级的大小。

Answer 2

import 'package:flutter/material.dart';
/*
Develop by BBesttech  (pvnakum) 17 sep 2019
*/

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: FlatButton(
            child: Text("PushMe"),
            onPressed: () {
              showDialog(
                context: context,
                  builder:(_) =>
//                  AlertDialog(context),
                      _buildAboutDialog(context),
              );
            },

          )
      ),
    );
  }
}
// Alert dialog content widget
Widget _buildAboutDialog (BuildContext context){
  return new AlertDialog(
    title: Text('Titel Name'),
    content: new Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        _buildAboutText(),
      ],
    ),
    actions: <Widget>[
      new FlatButton(onPressed: (){
        Navigator.of(context).pop();
      }, child: Text('OK !'))
    ],


  );
}
Widget _buildAboutText(){
  return new RichText(
      text: new TextSpan(
        text: "Please Type your decription here",
        style: TextStyle(color: Colors.blue)
      ),
  );

}