I was trying to convert one of my screens designed in Adobe XD to Flutter code but was not quite satisfied with it's outcome. The screen that I imported looks something like this:
From UI point of view, everything was nearly similar, but when I looked at the code, all the UI components had hard coded values in it.
For example, start and end values, height and width values, all were hardcoded with numbers like 8 or 10 or so on.
Also, the code didn't have pre-defined flutter widgets in it but consisted of PIN widgets just for the sake of drawing out the UI on the screen.
NOTE: I am aware of the responsive design option present in Adobe XD and even after turning that ON, the code was not responsive because of the hardcoded values.
What should be done to make the import completely responsive without any hardcoded values in the code?
If not completely, then what's the nearest possible solution for it?
I am sharing the code that was generated by Adobe XD to Flutter plugin for better understanding of my problem.
return Scaffold(
backgroundColor: const Color(0xffffffff),
body: Stack(
children: <Widget>[
Pinned.fromPins(
Pin(start: 18.0, end: 0.0),
Pin(size: 70.7, start: 14.3),
child: Stack(
children: <Widget>[
Container(),
Pinned.fromPins(
Pin(size: 72.0, end: 0.0),
Pin(start: 34.7, end: 0.0),
child:
// Adobe XD layer: '↳ Cancel Links to' (shape)
Container(
decoration: BoxDecoration(),
),
),
],
),
),
Transform.translate(
offset: Offset(16.0, 71.8),
child: SizedBox(
width: 11.0,
height: 21.0,
child:
// Adobe XD layer: 'back' (group)
Stack(
children: <Widget>[
SizedBox(
width: 11.0,
height: 21.0,
child:
// Adobe XD layer: 'back (1)' (group)
Stack(
children: <Widget>[
SizedBox(
width: 11.0,
height: 21.0,
child: Stack(
children: <Widget>[
SizedBox(
width: 11.0,
height: 21.0,
child: SvgPicture.string(
_svg_8im13w,
allowDrawingOutsideViewBox: true,
),
),
],
),
),
],
),
),
],
),
),
),
Pinned.fromPins(
Pin(start: 37.0, endFraction: 0.6693),
Pin(size: 25.0, start: 70.0),
child: Text(
'Checkout',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 18,
color: const Color(0xff000000),
letterSpacing: 0.007379999935626983,
fontWeight: FontWeight.w500,
height: 2.8333333333333335,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(start: 16.0, end: 16.0),
Pin(startFraction: 0.218, endFraction: 0.6342),
child: Stack(
children: <Widget>[
Pinned.fromPins(
Pin(start: 0.0, end: 0.0),
Pin(start: 0.0, end: 0.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
color: const Color(0xfff4f6fb),
),
),
),
Pinned.fromPins(
Pin(size: 22.0, start: 11.0),
Pin(size: 22.0, middle: 0.2041),
child: Stack(
children: <Widget>[
Pinned.fromPins(
Pin(start: 0.0, end: 0.0),
Pin(start: 0.0, end: 0.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.elliptical(9999.0, 9999.0)),
color: const Color(0xfff4f6fb),
border: Border.all(
width: 1.0, color: const Color(0xff5093fe)),
),
),
),
Pinned.fromPins(
Pin(start: 5.0, end: 5.0),
Pin(start: 5.0, end: 5.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.elliptical(9999.0, 9999.0)),
color: const Color(0xff5093fe),
boxShadow: [
BoxShadow(
color: const Color(0x29000000),
offset: Offset(0, 3),
blurRadius: 6,
),
],
),
),
),
],
),
),
Pinned.fromPins(
Pin(start: 50.0, endFraction: 0.5219),
Pin(size: 23.0, middle: 0.1959),
child: Text(
'Work Location',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 16,
color: const Color(0xff000000),
letterSpacing: 0.006559999942779541,
fontWeight: FontWeight.w500,
height: 2.8125,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(size: 81.0, start: 50.0),
Pin(size: 20.0, middle: 0.53),
child: Text(
'0227485165',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
color: const Color(0xff757575),
letterSpacing: 0.005739999949932098,
height: 1.5,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(start: 50.0, end: 30.0),
Pin(size: 20.0, middle: 0.81),
child: Text(
'325 Mansoura, Hay Aljamaa 122 Baker',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
color: const Color(0xff757575),
letterSpacing: 0.005739999949932098,
height: 1.5,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
],
),
),
Pinned.fromPins(
Pin(start: 16.0, end: 16.0),
Pin(startFraction: 0.383, endFraction: 0.4692),
child: Stack(
children: <Widget>[
Pinned.fromPins(
Pin(start: 0.0, end: 0.0),
Pin(start: 0.0, end: 0.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
color: const Color(0xfff4f6fb),
),
),
),
Pinned.fromPins(
Pin(size: 22.0, start: 11.0),
Pin(size: 22.0, middle: 0.2041),
child: Stack(
children: <Widget>[
Pinned.fromPins(
Pin(start: 0.0, end: 0.0),
Pin(start: 0.0, end: 0.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.elliptical(9999.0, 9999.0)),
border: Border.all(
width: 1.0, color: const Color(0xff000000)),
),
),
),
],
),
),
Pinned.fromPins(
Pin(size: 121.0, start: 50.0),
Pin(size: 23.0, middle: 0.1959),
child: Text(
'Home Location',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 16,
color: const Color(0xff000000),
letterSpacing: 0.006559999942779541,
fontWeight: FontWeight.w500,
height: 2.8125,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(size: 81.0, start: 50.0),
Pin(size: 20.0, middle: 0.53),
child: Text(
'0227485165',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
color: const Color(0xff757575),
letterSpacing: 0.005739999949932098,
height: 1.5,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(start: 50.0, end: 30.0),
Pin(size: 20.0, middle: 0.81),
child: Text(
'325 Mansoura, Hay Aljamaa 122 Baker',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
color: const Color(0xff757575),
letterSpacing: 0.005739999949932098,
height: 1.5,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
],
),
),
Pinned.fromPins(
Pin(start: 16.0, endFraction: 0.6907),
Pin(size: 23.0, start: 130.0),
child: Text(
'Shipping To:',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 16,
color: const Color(0xff000000),
letterSpacing: 0.006559999942779541,
fontWeight: FontWeight.w600,
height: 2.8125,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(size: 98.0, start: 16.0),
Pin(size: 23.0, middle: 0.5932),
child: Text(
'Select Card:',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 16,
color: const Color(0xff000000),
letterSpacing: 0.006559999942779541,
fontWeight: FontWeight.w600,
height: 2.8125,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(end: 16.0, startFraction: 0.7093),
Pin(size: 20.0, start: 132.0),
child: Text(
'Add Location',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
color: const Color(0xff000000),
letterSpacing: 0.005739999949932098,
fontWeight: FontWeight.w600,
decoration: TextDecoration.underline,
height: 3.2142857142857144,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.right,
),
),
Pinned.fromPins(
Pin(start: 16.0, end: 16.0),
Pin(size: 58.0, end: 14.0),
child: Container(
decoration: BoxDecoration(
color: const Color(0xff5093fe),
),
),
),
Pinned.fromPins(
Pin(startFraction: 0.328, endFraction: 0.3253),
Pin(size: 25.0, end: 30.0),
child: Text(
'Confirm Order',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 18,
color: const Color(0xffffffff),
letterSpacing: 0.007379999935626983,
fontWeight: FontWeight.w600,
height: 2.5,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.center,
),
),
Pinned.fromPins(
Pin(size: 37.0, start: 16.0),
Pin(size: 22.2, middle: 0.6571),
child:
// Adobe XD layer: 'mastercard' (group)
Stack(
children: <Widget>[
Pinned.fromPins(
Pin(size: 22.2, end: 0.0),
Pin(start: 0.0, end: 0.0),
child: SvgPicture.string(
_svg_pw5872,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 22.2, end: 0.0),
Pin(start: 0.0, end: 0.0),
child: SvgPicture.string(
_svg_n5xemp,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 11.1, end: 0.0),
Pin(start: 0.0, end: 0.0),
child: SvgPicture.string(
_svg_dfb4m8,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 22.1, start: 0.0),
Pin(start: 0.0, end: 0.0),
child: SvgPicture.string(
_svg_z81ipn,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 22.1, start: 0.0),
Pin(start: 0.1, end: 0.0),
child: SvgPicture.string(
_svg_ebq0b3,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 11.2, middle: 0.425),
Pin(start: 0.1, end: 0.0),
child: SvgPicture.string(
_svg_rlw6ie,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(start: 1.1, end: 1.1),
Pin(size: 5.9, middle: 0.5036),
child: Stack(
children: <Widget>[
Pinned.fromPins(
Pin(size: 2.3, middle: 0.3773),
Pin(start: 0.5, end: 0.0),
child: SvgPicture.string(
_svg_202jdk,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 3.8, middle: 0.4631),
Pin(size: 4.7, end: 0.0),
child: SvgPicture.string(
_svg_jkc2c7,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 4.1, middle: 0.6705),
Pin(start: 0.0, end: 0.0),
child: SvgPicture.string(
_svg_tcaz9m,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 3.8, middle: 0.1701),
Pin(start: 1.1, end: 0.1),
child: SvgPicture.string(
_svg_8jim3n,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 3.3, middle: 0.2812),
Pin(start: 1.0, end: 0.1),
child: SvgPicture.string(
_svg_pq3haq,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 4.6, end: 0.0),
Pin(start: 0.1, end: 0.0),
child: SvgPicture.string(
_svg_mkbn4f,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 5.8, start: 0.0),
Pin(start: 0.1, end: 0.1),
child: SvgPicture.string(
_svg_xnr112,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 2.9, middle: 0.5643),
Pin(size: 4.6, end: 0.1),
child: SvgPicture.string(
_svg_4w1zj7,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 3.8, middle: 0.7846),
Pin(start: 1.1, end: 0.1),
child: SvgPicture.string(
_svg_9wfjdb,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 2.9, end: 4.1),
Pin(size: 4.6, end: 0.1),
child: SvgPicture.string(
_svg_lbzk8e,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
],
),
),
Pinned.fromPins(
Pin(start: 1.1, end: 1.1),
Pin(size: 5.9, middle: 0.5036),
child: Stack(
children: <Widget>[
Pinned.fromPins(
Pin(size: 2.5, middle: 0.375),
Pin(start: 0.5, end: 0.0),
child: SvgPicture.string(
_svg_dra0bs,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 3.2, middle: 0.4731),
Pin(size: 4.7, end: 0.0),
child: SvgPicture.string(
_svg_4y5d4m,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(size: 3.5, middle: 0.6766),
Pin(start: 0.0, end: 0.0),
child: SvgPicture.string(
_svg_es75w6,
allowDrawingOutsideViewBox: true,
fit: BoxFit.fill,
),
),
Pinned.fromPins(
Pin(startFraction: 0.1733, endFraction: 0.5707),
Pin(size: 23.0, middle: 0.6578),
child: Text(
'MasterCard',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 16,
color: const Color(0xff000000),
letterSpacing: 0.006559999942779541,
fontWeight: FontWeight.w500,
height: 2.8125,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
Pinned.fromPins(
Pin(startFraction: 0.1733, endFraction: 0.4587),
Pin(size: 23.0, middle: 0.7757),
child: Text(
'Cash On Delivery',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 16,
color: const Color(0xff000000),
letterSpacing: 0.006559999942779541,
fontWeight: FontWeight.w500,
height: 2.8125,
),
textHeightBehavior:
TextHeightBehavior(applyHeightToFirstAscent: false),
textAlign: TextAlign.left,
),
),
],
),
),
),
],
),
),
],
),
);
