Flutter Design Tutorial | Minimal UI - Part 1

[Music] hello and welcome back to channel codex this is your host of the and today we are going to create the beautiful minimal design which you just saw I have a basic project set up so we don't waste time in there I'm going to start with safe area and column inside it okay let's go to Adobe XD and copy the elements right into vs code just to inform you that XD - flutter is now available for early access make sure you use it and submit your feedback check link in the description to get early access to XD to flutter plugin now let's add all the colors used in the project don't worry you can copy it from get sauce which I have shared in the first comment below hello section is ready now let's move to the core part of this design which is the sliding cards we are going to use flutter Swiper plugin link in the description it has lots of feature which we are going to utilize in this project no need to reinvent the wheel we will create separate file for data here I added model of the planet class and list of planets no fancy stuff just copy/paste we are going to provide item count item width type of layout and item builder to the Swiper pause the video or slow down at any point of time if you need to go through the code stat is very important in our design I'm going to quickly pull in all the widgets from XD to es code and with just a little bit of modification our card started taking shape see how I added spacing in stack which looks like painted outside the box likewise you can click the UI with the simple hacks on top of the card we will add image from asset and our card is almost ready this images I have taken from free ping comm and later modified in XD to add some shadow and remove other layers let's quickly pull in the pagination dots here you can modify size color and a whole lot of other properties thanks to the developer of this package it saved a lot of our time right so finally we are in the bottom of this page let's create a navigation menu simple icon button inside a row will work for us add some alignment add padding to it to make it a spacious and we will apply some of the decoration the Adobe XD plug-in gives us the decoration with these two property but we can optimize it further it's a smart but we are smarter one last thing left to do is to provide the gradient background and it's done we are going to cover the detail page in next video so make sure you hit the subscribe button do like the video if you have enjoyed and provide your feedback thank you so much guys for watching see you in the next one

Channel: CodeX

Views: 116,460

Keywords: xd, design, flutter, tutorial, how to, android, ios, ui, adobe, latest, theme, app, Flutter ui, adobe xd to flutter, adobe xd flutter, xd to flutter, flutter tutorial, flutter 1.17, minimal design, flutter ui design, flutter ui, flutter animation, Hero, animation, swiper, layout, pagination, swipe animation, pageview, slide animation, flutter_swiper, gradient, bottomnavigationbar flutter, rounded corner, navigation bar flutter, flutter ui tutorial, flutter app, flutter widgets

Id: neXfa4J752A

Length: 8min 30sec (510 seconds)

Published: Sat May 16 2020