How to left untouched Positioned when screen dimension change Flutter

Viewed 52

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()?

1 Answers

This reference should help: MediaQuery Class

Simple look at adding it to code:

 Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

then down the widget tree you can add size.height and size.width to what you need the screen to adjust to.

Related