flutter - 如何在ShowDialog上制作样式小部件？

Question

题:
我已经完成了对话框的其余部分，但是顶部有一个圆形的溢出化身。我现在不知道该怎么做。如图所示
演示图片

Answer 1

您需要创建一个主屏幕窗口小部件，以在按下或点击时在任何按钮中调用函数showDialog，并传递所需的参数，例如QRCode Image和Avatar。

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(
          color: Colors.blue,
          child: Text("My Dialog"),
          onPressed: () => {
            showDialog(
              context: context,
              barrierDismissible: true,
              builder: (BuildContext context) => MyDialog(),
            ),
          },
        ),
      ),
    );
  }
}

最后，创建其Dialog Class，并使用Stack and Positioned将Avatar放在Dialog Content的顶部。

class MyDialog extends StatelessWidget {
  MyDialog({
    Key key,
    // Something you need like a QRCode and Avatar Image
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double radius = 50;
    double padding = 10;
    double hSize = 400;
    double wSize = 400;

    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: Container(
        width: 400,
        child: Stack(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(padding),
              margin: EdgeInsets.only(top: radius),
              decoration: new BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(padding),
              ),
              height: hSize,
              width: wSize,
            ),
            Positioned(
              left: padding,
              right: padding,
              child: CircleAvatar(
                backgroundColor: Colors.indigo,
                radius: radius,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

结果是: