Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How do I make my container take up entire space?

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:

enter image description here

I want this:
enter image description here
(The plus could be bigger)

Tags:

2

Answers


  1. 0

    You could use Positioned widget to force the dotted container to fill the entire stack:

    Positioned.fill(
child:  DottedBorder(child: Container(child: const Icon(Icons.add),)),
)
    Login or Signup to reply.
  2. 0

    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: Container(
                    color: Colors.pink,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search