The Easy Way to Make Layout Designs on Flutter
This article shares how to create a Flutter layout design for Flutter developers since designing the layout display can sometimes be difficult to navigate.
Join the DZone community and get the full member experience.Join For Free
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.
You can download the sketch here.
Download supernova from here.
For Android visit this website
Step 1: Make sure that you have design apps using the sketch
Step 2: Next, open supernova tools.
Before we using supernova tools, we must register.
After that, choose to Sign Up With Supernova.
Wait for several minutes, and then will show the page below.
Step 3: Choose import, and then choose the sketch file.
Then, choose the page that will import, click import. After that, wait for several minutes. You will see a page like this:
We can then choose the platform that we need: ios, android, react, or flutter.
We need flutter, so choose that.
We can see beside the design page that there is the flutter code. It will generate automatically.
Flutter Code for this design:
Step 4: We can export this file to Flutter Project :*
Choose export on the menu.
Then, choose export to flutter.
It will show the pop-up dialog above.
Choose export. Then, wait again until the process export finishes.
When the export finishes, we can see a project like this:
Step 5: We can open this flutter project with our IDE Android Studio.
Choose to open an existing Android Studio Project.
After success opens the project and Gradle, we can see several errors like the ones above. Then, we can choose the Upgrade Dependencies.
You can change the first class that will run when launching the app.
Then, try to run apps, and you can see the result.
So cool, right?
Thank you! Leave any comments below!
Published at DZone with permission of Sunil Vaishnav. See the original article here.
Opinions expressed by DZone contributors are their own.