Flutter. How can I overlay the container with a dynamic size by another container?

Question

I have a container that represents a card with dynamical content. So it can be about 175 pixels height, can be 300. If this card is disabled I want to overlay this card by another container with, let say, gray color with opacity 0.5. I've realized that I can use Stack for this, but how can I define the correct size for overlay container?

  Widget build(BuildContext context) {
    return Center(
      child: Stack(children: [
        _buildCard(context),
        Container(
            margin: EdgeInsets.only(top: 8, left: 16, right: 16, bottom: 8),
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.75),
                borderRadius: BorderRadius.circular(20.0)),
            child: Center(
                child: Text(
              AppTranslations.of(context).text("pending"),
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            )))
      ]),
    );
  }

  Widget _buildCard(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: 8, left: 16, right: 16, bottom: 8),
        child: Container(
          decoration: new BoxDecoration(
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey,
                blurRadius: 10.0,
              ),
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
            child: Material(
              clipBehavior: Clip.antiAlias,
              color: Colors.white,
              child: Column(
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      _buildImageLogo(),
                      Expanded(
                          child: Container(
                        padding: EdgeInsets.only(top: 12, left: 6, right: 6),
//                        margin: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            Row(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LimitedBox(
                                  maxWidth: 135,
                                  child: Text(
                                    widget.serviceInfo.title == null
                                        ? ""
                                        : widget.serviceInfo.title,
                                    style: TextStyle(fontSize: 16),
                                    textAlign: TextAlign.start,
                                  ),
                                ),
                                LimitedBox(
                                  maxWidth: 50,
                                  child: Container(
                                    margin: EdgeInsetsDirectional.fromSTEB(
                                        0, 0, 8, 0),
                                    child: Text(
                                      widget.serviceInfo.price == null
                                          ? ""
                                          : ("AED" +
                                              widget.serviceInfo.price
                                                  .toString()),
                                      style: Theme.of(context)
                                          .textTheme
                                          .title
                                          .copyWith(
                                              fontSize: 13,
                                              color: Colors.black54),
                                      textAlign: TextAlign.end,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: Size.fromHeight(15).height,
                            ),
                            Text(
                              widget.serviceInfo.description == null
                                  ? ""
                                  : widget.serviceInfo.description,
                              style: Theme.of(context)
                                  .textTheme
                                  .caption
                                  .copyWith(fontSize: 13),
                            ),
                            serviceOptions(),
                          ],
                        ),
                      )),
                    ],
                  ),
                  SizedBox(
                    height: Size.fromHeight(10).height,
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(
                              top: 8, bottom: 8, left: 8, right: 8),
                          child: _btnDecline(),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(
                              top: 8, bottom: 8, left: 8, right: 8),
                          child: _btnAccept(),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ));
  } 

the full hierarchy looks like Scaffold -> Consumer -> Center -> Column -> Expanded -> Consumer -> ListView -> ServiceCard

Answer 1

You GlobalKey to get the BuildContext and use it to find out your container's size using it's RenderBox . Then you can give this size to the overlaying container. However, this is overkill imo.

You can also define a boolean to see whether or not your container should be overlayed and adjust it's decoration conditionally.