Figma design to Mobile App using Flutter and Flutlab

The fastest way to build a mobile app. Use Figma to design the screens; Generate the code automatically out of your designs. Use no-code tools to create the basic structure of your application and add the more complex functionality afterwards as needed.

[@shriyanshjain4444]

The simplicity of your delivery.
You earned a sub!

[@claudiograsso]

Excellent! Straight to the point! Thanks a lot!

[@elmermatthew6796]

This channel is so underrated. Thank you so much for the detailed explainations for all of the flutter videos my guy.

[@techbuildercto]

Glad you like them!

[@aasz11]

@Elmer Mathew, you can help the channel and press the 'Like' button under this video :)

[@aasz11]

Thank you very much for such a useful video :) I've been interested in Flutter for some time now, and I watched many tutorials on YT but this is the first one which mentions FlutLab. I honestly hope you'll make more videos in the future :)

[@techbuildercto]

You're very welcome!

[@MarcioGadelha]

Thanks buddy! Amazing tutorial. 🙂

[@techbuildercto]

Glad you liked it!

[@muhammadafzal237]

It converts only a few screens of design. What if a project has 40 screens. It says your project is too big can't convert to flutter.

[@baikuntharimal4643]

You did a great job. God Bless you

[@techbuildercto]

Thank you! You too!

[@mahnoorfatima587]

sir.. i watched your vedio but i cant seem to find the figma icon on flutlab... can you demonstrate the reason?

[@ahmedbaig8543]

Sir you are doing really great job much Appreciated .. Keep it up

[@techbuildercto]

Thanks a lot

[@supernova.09]

Flutlab no longer supports Figma to Flutter. Is there a similar alternative?

[@mohmedahmed-rp2ku]

Is this methd differ with normal coding in quality of code or any thing?

[@jamiuaderinkola5963]

Can you pls give the link to those files you used in VS code

[@dirkson8517]

Thank you so much, i learn a lot

[@techbuildercto]

You are welcome!

[@mosesket]

Nice.. I love your simplicity

[@techbuildercto]

Thank you 😊

[@markshnitel3354]

Thank you very much for your explanation..... But I am curious, can I turn this design from figma into APK file?... I mean is there away to make it really work in android for example?

[@cacerra1234]

Thanks. That was helpful

[@techbuildercto]

Glad it helped

[@chemohamad]

Thanks a lot for the tutorial. One question about the VS Code. If we run it on windows Os machine, can we use the iPhone simulator in it? Or do we need to purchase Mac machine? Thanks

[@JeyC_]

You can I think, it has built-in screen emulations support for different devices and how it will look like if the extension has it

[@nurusterling8024]

Your channel will blow up soon, Insha Allah

[@techbuildercto]

I hope so too! :-)

[@tech_tedd]

Good content! One feedback is it’ll look much better if you can quickly jump into the UI and show the outcome.

[@techbuildercto]

Thanks, I will try to do that more.

[@vickyb5683]

Am a designer new to the figma to flutter process. I understand flutter can transform code to both iOS and Android. But whilst designing, how do I approach designing native components if the app is going to be both iOS and Android?

[@techbuildercto]

I recommend to keep OS specific screen design to an absolute minimum to get the most out of flutter. Most widgets and packages make it easy to design once for multiple platforms. If you do have design specific to the OS, this will need manual work all along the development process, from design via development to testing.

[@kumarraja1580]

I SUBSCRIBED..WHO IS THE NEXT..?

[@ramimaro4940]

I have question please

[@carthagely122]

Thanks good work

[@techbuildercto]

So nice of you

[@andeoyebrayan8189]

Considering the backend mostly the database how does it handle it please explain

[@techbuildercto]

Hi Andeoye, Flutlab does not include the generation of the backend, it covers only the Flutter part of the app. You might want to check out FlutterFlow instead. I made a video about that tool, too: ua-cam.com/video/GQmgZ-8r92M/v-deo.html . Enjoy!

[@ChinhNguyen-ye7nv]

thanks

[@techbuildercto]

You're welcome!

[@uday9774]

i can't find the figma logo when I logged in recently, can u tell me where I can do that after this update?

[@AkashPatel-hs6ul]

same issue

[@chabin57]

Nice Thx

[@techbuildercto]

No problem

[@theculturedswine1402]

converted my figma to flutter, had an error. "Could not navigate to initial route. The requested route name was "/xxxxxxxx" .There was no corresponding route in the app and therefore the initial route specified will be ignored.
any help on this?

[@techbuildercto]

Hi, I would have to look into the code to see what's wrong, but it seems to relate to the routes (repository of screens) of your application that are not correct. Have a look at this video ua-cam.com/video/Ty3j0bd2VDo/v-deo.html where I explain how the routes work in flutter. initialRoute is the first page the app will show after start and it needs to be an existing route.

[@theculturedswine1402]

@@techbuildercto I found that when using flutlab, it only generates the components I've made but not the screens themselves as the widget for the initalRoute is not present in the zip file. Unlike in your video where the widgets for the screens are present

[@procodind.indian5372]

Good videos me Sumit

[@techbuildercto]

Thanks

[@shutchapol]

I use Android Studio to run Flutter and it has this error "import 'package:flutterapp/helloapp/generatedandroidlarge1widget/GeneratedAndroidLarge1Widget.dart';"