Недавно Adobe XD выпустила новый плагин, поддерживающий флаттер. в основном он берет дизайн и преобразует его в реальный код флаттера.
Дизайнер разработал его в размерах iphoneX, и код использует абсолютное позиционирование в соответствии с ним. Проблема в том, что он еще не поддерживает макет / отзывчивость, поэтому, если я попытаюсь просмотреть его на устройстве android, планшете или любом другом устройстве с другими размерами экрана, оно не подходит так, как должно ... (здесь это некоторые изображения изображений для иллюстрации iphonex , android, ipadair2 )
Я вижу, что они используют в основном Stack & Transform.translate ( которые используют смещение), как вы можете видеть ниже. Можете ли вы предложить, как изменить код, чтобы пользовательский интерфейс соответствовал экрану независимо от размера и того, что не нужно для виджетов / функций, которые они используют?
Спасибо, ребята!
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 = '';