Flutter UI Tutorial - How to Convert Figma UI Design into Flutter Code using DhiWise | 100% Free
Вставка
- Опубліковано 9 лип 2024
- Hi everyone, I am Abdul Aziz Ahwan from Indonesia,
Build your app with DhiWise: s.id/1RsfB
In this video, we are going to learn How to Convert Figma UI Design into Flutter Code with GetX State Management using DhiWise - DhiWise is a programming platform where developers can convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular and reusable code.
#dhiwise #design #code #modular #figma #uidesign
My Screen Recording: screen.studio/@Zgn84
My Second Brain: taskade.com/?via=abdulazizahwan
My Hosting: ultahost.com/#abdulazizahwan
My UI UX Inspiration: mobbin.com/?via=abdulazizahwan
My Screen Recording: www.screenstory.io/?via=abdul...
Flutter Course: gumroad.com/a/659170419/fqamxr
No Code Course: nocodecamp.lemonsqueezy.com/?...
Support Me: buymeacoffee.com/abdulazizahwan
----------------------------------
👨💼 Business Inquiries: helloabdulazizahwan@gmail.com
----------------------------------
🌃 VSCODE THEME
- marketplace.visualstudio.com/...
📂 PROJECT FILE
- UI Design by Fadli Creative (ui8.net/fadli-creative/produc...)
- Flutter Job Search App Generated Code (abdulazizahwan.gumroad.com/l/...)
----------------------------------
⏲ Timestamp
00:00 Timeline
00:05 Introduction
00:21 Say Thank You
00:31 Our Goals
00:50 What is DhiWise?
01:28 DhiWise Key Features
03:05 How to SignUp
03:41 DhiWise Dashboard
04:08 DhiWise Documentation
04:31 Figma UI Design File
05:05 Create a New Application on DhiWise
06:16 Select a Screen to Convert
06:52 Setup App on DhiWise
07:55 The Result
08:56 Configure Splash Screen and Other
10:06 Configure Navigation
11:40 How to Sync Design Changes with DhiWise
12:11 Comparison Generated Flutter vs Figma Design
12:41 Generate Flutter Code on DhiWise
15:03 Sync or Download Code on DhiWise
15:29 Extract and Open with Fav IDE
15:54 Fix a Litte Bug
16:54 Run Our App
17:10 Generated Flutter Code Run on iOS Simulator
19:48 Need to be Improve
20:08 My Opinion about DhiWise
21:34 The Result is Impressive
23:22 Another Great Features on DhiWise
25:15 Conclusion
26:38 Closing!
----------------------------------
This video was made with great effort,
If you want to support me you can donate to the following link
Join this channel to get access to perks:
/ @abdulazizahwan
💰 PAYPAL
Link ► paypal.me/abdulazizahwan
🧧 SAWERIA
Link ► saweria.co/abdulazizahwan
🪙 TRAKTEER
Link ► trakteer.id/abdulazizahwan
☕ BUY ME A COFFEE
Link ► buymeacoffee.com/abdulazizahwan
----------------------------------
🤙 JOIN MY DISCORD
Link ► / discord
----------------------------------
Hopefully, you would love this video.
I am so grateful if you want to hit the subscribe button. Thanks
📌 SUBSCRIBE ME
Here ► bit.ly/AbdulAzizAhwan
----------------------------------
🎬 ANOTHER PLAYLIST
Flutter UI Design Best Practices
Link ► • Flutter UI Tutorial - ...
Flutter Firebase CRUD Tutorial
Link ► • Flutter Firebase CRUD ...
Flutter Tutorial - Basic [EN]
Link ► • Flutter Tutorial - Bas...
----------------------------------
👨💻 GEAR LIST & TOOLS
- MacBook Pro 2017
( 8GB RAM 256GB Ventura OS )
- Acer Swift 3 SF314-54G-51ZK
( 12GB RAM 256GB SSD NvME M.2 Windows 11)
- Keychron K2 V2 Blue Switch
- Logitech MX Master 2s
- Canon EOS M50 Sigma 16mm f1.4
- Logitech C922 Pro Webcam
- Thronmax Mdrill Zero M4
----------------------------------
📱 FOLLOW
Twitter ► / abdulazizahwan
Github ► github.com/abdulazizahwan
My Blog ► abdulazizahwan.com
----------------------------------
Thanks for Watching!
amazing video
Dear Sir, I tried one of your videos figma to Flutter video which was Neon App but getting Gradle version error did update it to 7.2-bin which is supported but still getting error please try yourself and give solution of it thank you
I follow the same procedures but after running the application no expected outputs obtained.
Hi, is there a reason you did'nt choose the screen with the keypad, i was really looking forward to see how it will be implemented
I have a question, Does your design have an input ? because after launching it via actual device i saw that you can type in the text box
i think so, in figma you can choose a textbox as an input data
Hello.Thank you. I exported my Figma design through this plugin in Android Studio but some elements in design changed and looks another. How to correct this?
they have a documentation video on how you should set the figma UI, better use proper layout structures and naming conventions for your figma elements
agree, so proper stuff we need when its a textbox find textbox rather than using a shape square, thats what you mean right?
@@hansad.k6273
Thanks for the video. I have a question: i have a flutter app which i want to customize, but i dont have much knowledge in Flutter. is there some software where i can visually customize the app?
Learn it
amazing but if you show us how to link this with firebase will be great
itu hasilnya bakal tetep bisa di inject sama db mysql kan yaa pakai HTTP bang??
Bisa bang
berbayar, judulnya 100% gratis hmmm
Saat video dibuat masih gratis bro 😂
Assalamu alaikum brother, I have a couple of projects, I need to develop a mobile application, how can I contact you?