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 = '';
