The Easy Way to Make Layout Designs on Flutter
For those of us as flutter developers, we already know that flutter does not provide a layout design file for the project. So sometimes we have a little trouble designing the layout display design.
But you don’t need to worry, in this article I will share an easy way to create a flutter layout design. :)
Tools needed:
Sketch
Can download sketch here : https://www.sketch.com/get/
Download supernova from here : https://supernova.io/download
The following are the steps that need to be done:
Make sure that you have design apps using sketch
next, open supernova tools
Before we using supernova tools, we must register
After that choose Sign Up With Supernova
wait for several minutes, and then will show this page
Next step, choose import and then choose sketch file
Click Open
And then choose page that will import, click import. After that wait for several minutes. And we will see page like this
we can choose platform that we need, we can choose ios, android, react and flutter.
Cause we need flutter, so that why we choose flutter
And we can see beside the design page, there is code flutter. It will generate automatically
Flutter Code for this design :
import 'package:flutter/material.dart';
class LoginWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
color: Color.fromARGB(255, 255, 255, 255),
),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
child: Container(
height: 812,
child: Image.asset(
"assets/images/bg-3.png",
fit: BoxFit.cover,
),
),
),
Positioned(
left: 20,
top: 58,
right: 337,
child: Container(
height: 12,
child: Opacity(
opacity: 0.3,
child: Image.asset(
"assets/images/np-arrow-685135-000000-2.png",
fit: BoxFit.none,
),
),
),
),
Positioned(
left: -772,
right: -772,
child: Container(
height: 1281,
child: Image.asset(
"assets/images/bitmap-4.png",
fit: BoxFit.cover,
),
),
),
Positioned(
left: -5,
top: -14,
right: -2,
child: Container(
height: 833,
child: Opacity(
opacity: 0.776,
child: Image.asset(
"assets/images/mask-copy-2-3.png",
fit: BoxFit.cover,
),
),
),
),
Positioned(
left: 23,
top: 144,
right: 23,
bottom: 109,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: 266,
height: 91,
child: Stack(
alignment: Alignment.centerLeft,
children: [
Positioned(
left: 9,
child: Text(
"EVENT.TI",
style: TextStyle(
color: Color.fromARGB(255, 217, 45, 123),
fontSize: 46,
letterSpacing: 0.501,
fontFamily: "Trebuchet MS",
),
textAlign: TextAlign.left,
),
),
Positioned(
left: -1,
right: 0,
bottom: 0,
child: Container(
height: 91,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.bottomLeft,
child: Container(
width: 171,
height: 4,
margin: EdgeInsets.only(bottom: 17),
child: Image.asset(
"assets/images/line-2.png",
fit: BoxFit.none,
),
),
),
Spacer(),
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 75,
height: 91,
child: Image.asset(
"assets/images/group.png",
fit: BoxFit.none,
),
),
),
],
),
),
),
Positioned(
left: 24,
top: 17,
child: Container(
width: 171,
height: 4,
child: Image.asset(
"assets/images/line-2.png",
fit: BoxFit.none,
),
),
),
],
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
width: 330,
height: 213,
margin: EdgeInsets.only(top: 82),
child: Image.asset(
"assets/images/search-bar-2.png",
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(top: 49),
child: Text(
"Register",
style: TextStyle(
color: Color.fromARGB(255, 222, 38, 121),
fontSize: 17,
letterSpacing: -0.35,
fontFamily: "Avenir",
fontWeight: FontWeight.w800,
),
textAlign: TextAlign.left,
),
),
),
Spacer(),
Container(
height: 18,
margin: EdgeInsets.only(left: 104, right: 110, bottom: 14),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.bottomLeft,
child: Container(
width: 43,
height: 2,
margin: EdgeInsets.only(bottom: 8),
child: Opacity(
opacity: 0.766,
child: Image.asset(
"assets/images/rectangle-7-2.png",
fit: BoxFit.none,
),
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Container(
margin: EdgeInsets.only(left: 7),
child: Text(
"Or",
style: TextStyle(
color: Color.fromARGB(255, 222, 38, 121),
fontSize: 13,
letterSpacing: -0.268,
fontFamily: "Avenir",
fontWeight: FontWeight.w800,
),
textAlign: TextAlign.left,
),
),
),
Spacer(),
Align(
alignment: Alignment.bottomLeft,
child: Container(
width: 43,
height: 2,
margin: EdgeInsets.only(bottom: 8),
child: Opacity(
opacity: 0.1,
child: Image.asset(
"assets/images/rectangle-7.png",
fit: BoxFit.none,
),
),
),
),
],
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
width: 43,
height: 43,
child: Image.asset(
"assets/images/bitmap-8.png",
fit: BoxFit.none,
),
),
),
],
),
),
Positioned(
left: 54,
top: 354,
child: Container(
width: 266,
height: 205,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(left: 9),
child: Opacity(
opacity: 0.692,
child: Text(
"Email Addres",
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
fontSize: 19,
letterSpacing: 0.207,
fontFamily: "Avenir",
),
textAlign: TextAlign.left,
),
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
width: 266,
height: 4,
margin: EdgeInsets.only(top: 12),
child: Image.asset(
"assets/images/line.png",
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(left: 9, top: 29),
child: Opacity(
opacity: 0.692,
child: Text(
"Password",
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
fontSize: 19,
letterSpacing: 0.207,
fontFamily: "Avenir",
),
textAlign: TextAlign.left,
),
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
width: 266,
height: 4,
margin: EdgeInsets.only(top: 12),
child: Image.asset(
"assets/images/line.png",
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
width: 260,
height: 53,
margin: EdgeInsets.only(top: 41),
child: Image.asset(
"assets/images/rectangle-6-2.png",
fit: BoxFit.cover,
),
),
),
],
),
),
),
Positioned(
top: 520,
child: Text(
"LOGIN",
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
fontSize: 19,
letterSpacing: 3.41,
fontFamily: "Avenir",
),
textAlign: TextAlign.left,
),
),
],
),
),
);
}
}Next step, we can export this file to Flutter Project :*
choose menu export
then choose export to flutter
will show pop up dialog
Choose export. Then wait again untill process export finish.
When export finish, we can see project like this
And last step we can open this flutter project with our IDE Android Studio
choose open an existing Android Studio Project
After success open project and gradle, we can see several error like above. And then choose Upgrade Depencies.
And then, you can change first class will run when launch app.
And then try to run apps, and we can see the result
Yeay Thast so cool, Right :)
Thank you
