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:
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,
),
),
),
),
)
],
),
),
],
);