How to convert Figma Design into Flutter Code | DhiWise.com

you are going to learn how to convert these four app Sigma design into a flower Droid and guess what you are not gonna write The Code by yourself let me show you the final result as you can see how perfectly it aligns with the design let's check out the slash screen sign in sign up and home page everything is super clean and we got all done in this few minutes simply open up your browser and type in the wise.com you'll also find the link right in the description below the awesome tool can turn your design into flood record the very first thing you have got to do is set up an account and guess what it's totally free so let's Dive In once you are done it looked like this to import the figment design click on create blank app then for the platform choose mobile then name your app I'm gonna call our the flutter voice food app next select flutter as a technology and sigma as the design platform the final step we have is to connect our feed my account to device next let's go back to figma and copy the link of the design then paste it here as you can see it displays all the pages I want to use all the pages so I'll choose select all screens and then hit submit this action will import the design also you have the option you have to change the apps package name and the bundle ID that's not all you can also upload the app logo directly from here you can even choose the Estate Management package like blog provider and reverbot plus it offers integration with GitHub or gitlab I think their best feature is to code sync with the IDE I'll show you the details of this feature later [Music] thank you [Music] let's check out other screens as you will the sign-in page looks perfect especially the text fit and it even added the social logging buttons perfectly the signup page is also accurately converted the home page was a bit complex but it did a great job it converted the design exactly as we have it the best part is manage to figure out the bottom navigation group and created it as we have in our design as you can see it's a bottom navigation but not a custom oyster it also did wonderfully on the details page search page order base and finally the account settings page it converted all those perfectly to preview click on the preview button you can see the switch is functioning flawlessly the text field on the sign up page is also working as anticipated and everything on the home page looks superb now let's download the code to do this we need to build the app it will ask which state management package you would like to use they offer all all known package but for this demonstration I choose not to use any building does take a bit of time and as is doing so you can see the app architecture there is an assets directory and inside the library for everything is well organized once it finished building you have the option to either download or sing the code we'll download the code fast and later I'll walk you through how to sync it let's open the downloaded code in BS code to upgrade to import the necessary packages next let's try running the app but as you will notice it doesn't run and through an error the quickest fix is to delete the iOS directory and regenerate it by running the plotter create black from IOS comment if you have made any modification to the iOS director make sure not to remove it try running it again and you'll see it runs perfectly the water skin displays but there is a significant black border at the top and bottom to fix this I tend to walk through the screen and remove the save View at top then wrap the container with safe area and it looks perfect actually all pages have the same problem and the solution is identical remove the top safe area and wrap it on the body with it on the sign up page the password field is hidden and everything else is functioning properly now let's take a look at our home page it looks superb however there are a couple of issues here and there the thirds and other page are looking good and there's a mirror bar on account page still I'm quite impressed with how well it has converted this complex design firstly let's address the black border on the home base go back to the home page container screen and remove the safe area with it at the top then wrap the Navigator with it with safe area this all day shoe and it looks perfect now as you can observe the search an order page are now aligned accurately with our design and look much improved now tackle those parts on home page navigate back to homepage to dirt let's search for the text there we have it I don't think we need a padding remove the padding now to align the taste to the right side add a spacer that resolve the issue now on to the next one let's sort this out as well I appreciate that they have created separate component for this you'll find it under the wizard directory as home base item wizard scroll down we can see where the problem arrives I believe we can do without the merging let's check yep that does it we have nearly resolved all the issues and if any more pop-up you already know how to tackle them device doesn't convert you designed to code it also offers some awesome features one of those is API integration I'm really fond of the code SYNC feature let me demonstrate how straightforward it is to sync a code to your preferred IDE Ally you have copied the token then return to PS code in extension search for device and install the pack you'll see the device icon on sidebar first let's open a directory however you want to store the code next click on sync code it will ask if you'd like to use the chosen folder for the code select yes now you need to paste the token here it will take a moment to download the code and voila we add that thank you so much for watching see you soon in the another video [Music] [Music] [Music]

Channel: The Flutter Way

Views: 966,232

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui

Id: t7lUSiddFd4

Length: 7min 12sec (432 seconds)

Published: Thu Oct 05 2023