How to make the code generated by adobe XD to flutter plugin, actually usable & responsive based on screen size?

Recently adobe XD released its new plugin that supports flutter. basically it takes the design and transforms it into actual flutter code.

The designer designed it on iphoneX dimensions and the code use absolute positioning according to it. The problem is it doesn't support layout / responsive yet so if I try to view it on an android device or a tablet or any other device that has different screen dimensions it doesn't fit as it should... (here are some images images to illustrate iphonex , android , ipadair2 )

I can see they use mainly Stack & Transform.translate (that use offset) as you can see below. Can you suggest how to change the code to make the UI fit to screen no matter size and what is unnecessary of the widgets/functions they use?

Thanks ahead guys!

return Scaffold(
  backgroundColor: const Color(0xffffffff),
  body: Stack(
    children: <Widget>[
      Transform.translate(
        offset: Offset(-153.0, -65.0),
        child:
            // Adobe XD layer: 'jed-villejo-xkeLHL5…' (shape)
            Container(
          width: 672.5,
          height: 877.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: const AssetImage('assets/images/background.jpg'),
              fit: BoxFit.fill,
            ),
          ),
        ),
      ),
      Container(
        width: 375.0,
        height: 812.0,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment(0.18, 1.0),
            end: Alignment(0.18, -1.0),
            colors: [const Color(0x66000000), const Color(0x1a545454)],
            stops: [0.0, 1.0],
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(0.0, -40.0),
        child: Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(30.0, 614.0),
              child: Container(
                width: 315.0,
                height: 51.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(40.0),
                  color: const Color(0xff4b77d9),
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(47.0, 632.0),
              child: SizedBox(
                width: 282.0,
                child: Text(
                  'LOG IN WITH PHONE NUMBER',
                  style: TextStyle(
                    fontFamily: 'Helvetica Neue',
                    fontSize: 16,
                    color: const Color(0xffffffff),
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
      ),
      Transform.translate(
        offset: Offset(30.0, 645.0),
        child: Container(
          width: 315.0,
          height: 51.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40.0),
            color: const Color(0xffffffff),
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(0.0, 16.0),
        child: Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(149.0, 64.0),
              child: Container(
                width: 77.0,
                height: 77.0,
                decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.all(Radius.elliptical(38.5, 38.5)),
                  color: const Color(0xffffffff),
                  border: Border.all(
                      width: 8.0, color: const Color(0xff4b77d9)),
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(0.0, -1.0),
              child: Stack(
                children: <Widget>[
                  Transform.translate(
                    offset: Offset(138.0, 3.54),
                    child: Stack(
                      children: <Widget>[
                        Transform.translate(
                          offset: Offset(28.0, 85.46),
                          child: Container(
                            width: 42.0,
                            height: 36.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                  Radius.elliptical(21.0, 18.0)),
                              color: const Color(0xffffffff),
                              border: Border.all(
                                  width: 2.0,
                                  color: const Color(0xff4b77d9)),
                            ),
                          ),
                        ),
                        Transform.translate(
                          offset: Offset(24.0, 83.46),
                          child: Container(
                            width: 51.0,
                            height: 23.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                              color: const Color(0xffffffff),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Transform.translate(
                    offset: Offset(162.0, 87.0),
                    child: SizedBox(
                      width: 52.0,
                      child: Text(
                        'Yalla!',
                        style: TextStyle(
                          fontFamily: 'Helvetica Neue',
                          fontSize: 18,
                          color: const Color(0xff4b77d9),
                          fontWeight: FontWeight.w700,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      Transform.translate(
        offset: Offset(17.0, 172.0),
        child: SizedBox(
          width: 342.0,
          child: Text(
            'GET STARTED!',
            style: TextStyle(
              fontFamily: 'Helvetica Neue',
              fontSize: 40,
              color: const Color(0xffffffff),
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(30.0, 406.0),
        child: Text(
          'VIDEO\nWITH FRIENDS',
          style: TextStyle(
            fontFamily: 'Helvetica Neue',
            fontSize: 40,
            color: const Color(0xffffffff),
            fontWeight: FontWeight.w700,
          ),
          textAlign: TextAlign.left,
        ),
      ),
      Transform.translate(
        offset: Offset(-3.0, 511.0),
        child: SizedBox(
          width: 386.0,
          child: Text(
            'By tapping Log In, you agree with our\nTerms of Service and Privacy Police',
            style: TextStyle(
              fontFamily: 'Helvetica Neue',
              fontSize: 18,
              color: const Color(0xffffffff),
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(7.0, 708.0),
        child: SizedBox(
          width: 266.0,
          child: Text(
            'Your’e new? Sign Up here',
            style: TextStyle(
              fontFamily: 'Helvetica Neue',
              fontSize: 18,
              color: const Color(0x99ffffff),
              fontWeight: FontWeight.w700,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
      Transform.translate(
        offset: Offset(14.0, 0.0),
        child: Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(83.0, 663.0),
              child: SizedBox(
                width: 210.0,
                child: Text(
                  'LOG IN WITH GOOGLE',
                  style: TextStyle(
                    fontFamily: 'Helvetica Neue',
                    fontSize: 16,
                    color: const Color(0xff4b77d9),
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Transform.translate(
              offset: Offset(68.0, 658.0),
              child:
                  // Adobe XD layer: 'brands-and-logotypes' (group)
                  SvgPicture.string(
                _shapeSVG_0773c290a8144975aedeed43cd17edef,
                allowDrawingOutsideViewBox: true,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

} }

const String _shapeSVG_0773c290a8144975aedeed43cd17edef = '';

Just calculate media query ratios from the device you created, and use them in place of the actual offset dimensions.

For example, if your phone size has x width and y height:

     Transform.translate(
        offset: Offset(-153.0, -65.0),
        child:
            // Adobe XD layer: 'jed-villejo-xkeLHL5…' (shape)
            Container(
          width:MediaQuery.of(context).size.width* 672.5/x,
          height: MediaQuery.of(context).size.height* 672.5/y,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: const AssetImage('assets/images/background.jpg'),
              fit: BoxFit.fill,
            ),
          ),
        ),
      ),