Flutter Intro/Onboarding Screen with Carousel & Animated Dots - NO Package

you are going to learn how to create an onboarding page like this on your flat app check out this awesome indicator it's amazing that it only needs 10 lines of code plus there is a cool surprise waiting for you at the end so let's dive in the onboarding page is created which is a state full with it and it return returns a scaffold that's why the screen looks blank right now over here we have our demo data which we are going to use later in this Cal body will start by defining a column next under the aspect ratio set the ratio to one then we'll add the illustration which is SB image for now we are fetching the first one next let's add the title inside the text widget we'll put the fast title set its style to title large and set the font with the B then create a gap of 16 between the illustration and the title to make it looks perfect after that add another gap of eight before defining the details text for this text set the style to body medium and align the Tex to center with this 30% of our work is done next let's extract this column and name it onboard content we need three parameter here all of type string illustration title and text yes all are those are required then replace demo data ustation to illustration and do the same for the title and text don't worry about the error we'll fix it very soon first let's wrap the onboard content with a builder which is a page view. builder then rename the Builder to item Builder and add the index the item count will be the length of our demo data now for the onboard content the illustration should be demo data index illustration and do the same for the title and the text as you can see we can slide to view the next page or you can say the next content with this 50% of our work is done let's complete the rest wrap the page view with a column now it chose a blank screen don't worry just wrap the page view with an expended Wizard and that the problem is solved next let's add add an elevated button for now we'll have an empty function for unpressed and the child is a get started text I want all letters to be uppercase as you can see it's not visible properly so let's create some free spacing I'm going to use a spacer the UI breaks no problem just go back to the onboard content then wrap the spe ratio with an expended Vis it and everything should be fine it's taking up too much space and doesn't look as great as you can see but the great news is we have the solution the first step is to wrap everything with a safe area then I need more space at the top so I'll add a spacer and set is flax to two okay it looks very weird oh I made a mistake on page view instead of expanded use a sized box and set the height to 500 now this is what we are looking for much better but not perfect is time for the dot indicators let's define an animated container and set the duration to 300 milliseconds the height is six and the width is 24 Inside the Box decoration set the color with an opacity of 0.25 the last thing is to add a border radius of 26 to all sides then add a spacer above it and another one below it what with the flag up [Music] do [Music] [Applause] [Music] [Applause] [Music] [Music] now come to the gift this onboarding screen is taken from our food template UI kit the awesome news is from flatter library.com you can download this $30 premium UI kit for free it's only for limited time so grab yours now thanks for watching bye

Channel: The Flutter Way

Views: 6,882

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

Id: JIi85iDVY5M

Length: 6min 1sec (361 seconds)

Published: Fri Jan 19 2024