I have the code below where there is a background image, and then a button that allows to create a drag & drop Container. But my problem is
when the screen size changes, because some containers are lost, how could I do for leave untouch the position of the container depending on the screen size?
class DashboardScreenState extends State<DashboardScreen>
with TickerProviderStateMixin {
ConfigPage config = ConfigPage();
List<SectionContainer> sectionContainers = [];
List<Widget> initialWidgets = [];
@override
void initState() {
config = Project.getProjectPageDetails(widget.id);
super.initState();
}
@override
Widget build(BuildContext context) {
initialWidgets = [
TextButton(
onPressed: () {
setState(() {
sectionContainers.add(SectionContainer());
});
},
child: Text('add'),
),
];
return CustomScaffold(
text: config.name!,
onPageChange: widget.onPageChange,
onLogout: widget.onLogout,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(File(config.image!)), fit: BoxFit.cover)),
constraints: BoxConstraints.expand(),
child: Stack(
children: initialWidgets + sectionContainers,
),
));
}
}
here the code of the SectionContainer:
class _SectionContainerState extends State<SectionContainer> {
double xPosition = 0;
double yPosition = 0;
Color color = Colors.red;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Positioned(
top: yPosition,
left: xPosition,
child: GestureDetector(
onPanUpdate: (tapInfo) {
setState(() {
xPosition += tapInfo.delta.dx;
yPosition += tapInfo.delta.dy;
});
},
child: Container(
width: 150,
height: 150,
color: color,
),
),
);
}
}
I have also tried with a LayoutBuilder but nothing change,
maybe the problem is in the Container of the background image where there is BoxConstraints.expand()?