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

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


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,            ),          ),        ),      ),


Take a look at flutter_screenutil package.

It helps for responsive designs and takes care of the calculations for you