Flutter :- 带有背景颜色的自定义 showDialog

Question

  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {  
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

我需要创建这个事件，在显示对话窗口的那一刻，屏幕的另一部分会改变颜色，我无法咨询其他来源，而事实是我无法与事件重合。

目标是实现这样的目标：

Answer 1

您只需要在前一个屏幕上显示另一个充当对话框的屏幕。首先，您需要使用 Stack 小部件。我已经创建了演示版，请检查一次。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutterlearningapp/colors.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  bool isDialog = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home"),
        ),
        body: SafeArea(
            top: true,
            bottom: true,
            child: Stack(
              children: <Widget>[
                Container(
                    color: Colors.white,
                    child: Align(
                      alignment: Alignment.center,
                      child: Column(
                        children: <Widget>[
                          Container(
                            color: Colors.pink,
                            width: double.infinity,
                            height: MediaQuery.of(context).size.height * 0.4,
                          ),
                          SizedBox(
                            height: 10.0,
                          ),
                          RaisedButton(
                              onPressed: () {
                                setState(() {
                                  isDialog = true;
                                });
                              },
                              child: Text("Open Dialog")),
                        ],
                      ),
                    )),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: isDialog ? transparentWidget(context) : Container(),
                  ),
                )
              ],
            )));
  }

  Widget transparentWidget(BuildContext context) {
    return Container(
      color:  const Color(0x4D2980b9),
      width: double.infinity,
      height: double.infinity,
      child: Align(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0),
                      bottomLeft: const Radius.circular(40.0),
                      bottomRight: const Radius.circular(40.0),
                    )),
                child: Center(
                  child: Text("Your sheet"),
                ),
                height: MediaQuery.of(context).size.height * 0.5,
                width: MediaQuery.of(context).size.width * 0.8,
              ),
              RaisedButton(
                  onPressed: () {
                    setState(() {
                      isDialog = false;
                    });
                  },
                  child: Text("Cancel"))
            ],
          )),
    );
  }
}

上述程序的输出如下，请检查

Answer 2

只需将barrierColor 参数传递给showDialog

showDialog(
  context: context,
  barrierColor: Color(0x640000FF),
  builder: (BuildContext context) {  
    return AlertDialog(
      // ...
    );
  },
);