Флаттер: - Пользовательский 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"))
            ],
          )),
    );
  }
}

И вы вышеприведенной программы, как указано ниже, пожалуйста, проверьте его