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

Question

问题：

我已经完成了对话的其余部分，但顶部有一个圆形溢出头像。我现在不知道该怎么做。如图所示

演示图片

标签： flutterdart

Answer 1

您需要创建一个主屏幕小部件以在任何按钮中调用函数 showDialog，当按下或点击时，传递您需要的参数，如 QRCode 图像和头像。

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 和 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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是结果：