Adobe XD to Flutter plugin - Flutter Apps without coding ! Fully Explained

[Music] [Music] hello so let's get started on 13th of may time students announce adobe xd to flutter in which they have claimed that a design medium adobe xd can be converted into code even without writing a single line of code that sounds so cool even unrealistic too so why don't we try ourselves [Music] so here you can click on early access and that's not officially launched and as i already have xd installed so i will click on open adobe xd as i already have installed xd plotter plugin so i will escape this step [Music] so you can install it and leave a beautiful ready and now we can start now you can choose any canvas here i'm taking iphone so let's first start by making some beautiful design so yeah i will make a logo it's kind of big in me so i have to make it small okay so here goes our logo then we can choose this image [Music] it's two kind of large image [Music] and two trying this first time as i don't have much experience in adobe xd and now and now let's create some cuts [Music] over here a little curve okay and now let's give it some shadow and now let's remove this border and give it some shadow [Music] let's give it blur radius something around 12. [Music] now let's copy paste it [Music] and now let's take some another here spiderman also good and it's now so much images so let's give it some text too so we will resize here you can select text and you can type something like watch [Music] more and here we can give it some size like 30 okay and color i will choose white [Music] change the background color little blackish [Music] okay so this looks a little cool here much more [Music] okay so our design is completed now we have to open our android studio let's create our new floor project [Music] i will name it xd flutter [Music] and i want you to note that over here you can see in lip folder there is only main dot dot and after we will just edit our prospect.yml [Music] and the only thing we have to do is in our prospect.yml we have to import our package and in here you can search adobe xd package so in so we will just copy this dependencies pub get [Music] and now we have to just select all these things [Music] export all widget and we have to also give the location to [Music] here it's asking here we have created xd to flutter [Music] and now we have to just import our images so give them some name like logo and click on export image [Music] then image one [Music] logo two and this one i will give image to 2 [Music] and here image 3 and now we can just say export all images and the amazing thing here you will notice it we haven't created any essay folder and here you can see it's already came here are all the images are already there with their names in a new dart file is already being created and over here you can see no issues and now for calling our images we have to just uncomment it [Music] assets the folder name which is already [Music] here and now we will call it this dot file so let's create a stateless widget and in home we will call iphone [Music] and now in home we will call our file and you can see they have already imported it for us and now just we have to run this [Music] and can you believe how beautifully this design have been implemented it's just an early access and still flutter has managed to provide such beautiful results and if you're someone who is thinking that designing is not kind of my day then you can visit our favorite website dribble.com and here you can select adobe xd and let's choose maybe this design and you and here you can download this [Music] and here let's select the whole design and ungroup it one more time [Music] and now we are done here we will select the images and give them name something like pick one [Music] let's give it pick two and this one pick three and the last pick and here and here we have to just select the path so i will select this xd plotter folder and now select the hole and do export all images and then export all widgets and here you can see some warnings over here okay so let's close so let's check it in the android studio here you can see images has been imported and so the dart files too so let's call it categories [Music] and here you can see it has already imported it for us [Music] and you can see whole code has been written for us just click the run button and here you can see the exact designing has been copied over here and even without writing a single line of code our ui is ready and if you think that just a static designs that sounds little boring but if you wants to navigate from this page to this let's do it so let's ungroup this one more time [Music] as it's just in early access so there are some issues still need to be fixed [Music] so let's export all the images and then and for example when we click on this image he wants to navigate to this page okay and then we click on this one we need to navigate to this page okay so we are done over here so you can see to navigation has been [Music] added here you can see export all widgets [Music] so here we can just click on run button i can bet on it that this type of designs really take time because we have created two screens in just maybe less than two minutes according to me it's really going to be a game changer and let me know your views about it what you think it's really a good or maybe there are some disadvantages of it as it's just in early access so according to me it's really great if you like this video hit the like button and do share your views on this topic in the comment section and as more amazing stuffs are going to come on this channel so be sure to subscribe it thank you [Music] [Music] you

Channel: Divine Coding

Views: 60,827

Rating: 4.7093649 out of 5

Keywords: how to, adobe xd to flutter, adobe xd flutter plugin, flutter, flutter tutorial, app without code, adobe xd tutorial, adobe xd flutter, flutter adobe xd, flutter adobe, adobe flutter, xd flutter, flutter xd, adobe to flutter, flutter adobe xd tutorial, adobe xd to flutter plugin, xd to flutter code, flutter app development, the flutter way, flutter app tutorial, adobe xd flutter design, login screen, android, ios, divine coding, ui, xd to flutter

Id: v57U1HPETDE

Length: 13min 4sec (784 seconds)

Published: Sun May 24 2020

Reddit Comments

[u/StanleyMasinde]

It is good for UI designers and it removes the need of writing common stuff and instead focus on the business logic of your application. It does not remove coding from the equation.

[u/0xBA7TH]

Thanks for the overview.

I would consider reducing the background music volume for future videos. It was hard to hear your voice over the music at times and I found the looping of the background music for a longer period of time semi-annoying. Might be okay for an initial overview or ending but a bit much for the entire video.