How do I make my container take up entire space?

Question

I am making a screen that has a shelf image along with a plus icon overlaying the entire image with a dotted border. I want to make the dotted border take up the entire space allowed by the largest child of the stack (the image). I also want the size of the dotted border and the plus icon always maintain a constant ratio. Here is my code:

import "package:dotted_border/dotted_border.dart";
import "package:flutter/cupertino.dart";
import "package:flutter/material.dart";
import "package:flutter/widgets.dart";

class Default extends StatefulWidget {
  const Default({super.key});

  @override
  State<Default> createState() => _DefaultState();
}

class _DefaultState extends State<Default> {
  Map Articles = {};
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
          Text("Published", style: Theme.of(context).textTheme.headlineLarge),
          Text("Drafts", style: Theme.of(context).textTheme.headlineLarge),
        ],),
        Stack(
          alignment: Alignment.center,
          children: [
            Center(
              child: Container(
                  color: Colors.black,
                  child: const ColorFiltered(
                      colorFilter: ColorFilter.mode(
                          Color.fromARGB(76, 0, 0, 0), BlendMode.darken),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Expanded(child: Image(image: AssetImage("assets/images/shelf.png"))),
                          Expanded(child: Image(image: AssetImage("assets/images/shelf.png"))),
                        ],
                      )))),
            DottedBorder(child: Container(child: const Icon(Icons.add),)),
      ]),
      ],
    ));
  }
}

I do not want to use padding since that will make my app unresponsive. I have tried setting width and height of the container and the size of the icon to double.infinity and also added BoxConstraints.expand() in the constraints attribute of the container. Everytime it returns an error. This is my current output:

I want this: (The plus could be bigger)

Answer 1

You need to restrict the hight of the Stack since it is in a column and you want one of the child to be as big as possible.

AspectRatio could be a good choice here, Since the image doesn't change, and you know its dimension.

Column(
    children: [
      const SizedBox(height: 100),
      AspectRatio(
        aspectRatio: 1,
        child: Stack(
          children: [
            Positioned.fill(
              child: Image.asset("assets/bird.png"),
            ),
            Container(
              decoration: BoxDecoration(
                border: Border.all(width: 5),
              ),
              child: Center(
                child: FractionallySizedBox(
                  widthFactor: 0.5,
                  heightFactor: 0.5,
                  child: FittedBox(
                    child: Icon(
                      Icons.add,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    ],
  );