Flutter UI E Book App Tutorial | App from Scratch Part 1

hello everyone welcome back to my four-star school youtube channel in today's lesson we are going to build these ebooks uh application using a flatter first i will give you a quick demo uh the final project you're going to build after you finish this tutorial and we are going to build this stacker view using the third party library and also we can select different tab and since i didn't implement any stack of view for these audio books and also we have a the bottom navigation and when you click one of those book you're able to navigate to the detail for this book and i think that's it if you are new to my channel feel free to reach out to my channel page in there you will find a dark programming tutorial a flutter tutorial for the beginners and also a flatter ui friendly scratch tutorial so don't forget to subscribe to my channel sum up my content as well as open a notification so you won't miss out the latest flutter tutorial okay without further ado let's get started so first let's open our terminal and navigate to our workspace in there we can use a filter command create this ebook application and hit enter just wait a few seconds and then and we go to the visual studio code and here we click this open folder and select the workspace of our project and i'll click these ebooks and hit these open and i think you're able to run these approaches and first is going to analyze this entire project and i think just wait a few minutes okay so let's create a ss folder for this project and we are going to import our ss it contains the image we're going to use for this project and open this purpose pc yammer file we go line 61 and we're going to uncomment those out by going to change a little bit and we add the prefix ss folder in this case and we save and we can close this one as well so we're going to create sun a folder under this left folder so first one will be our models folder and then it's our pages folder in the cons tense folder right inside these pages folder we have a home page and we also have a detail page and inside this home folder we're going to create this whole dart file and also a widget folder and here i'm going to create a stateful widget because we're going to keep track of the index the user select and render a different [Music] view right so i'm going to create a stateful widget for our home page and import library make this keynotable and for it is a trial we can replace with our scaffold widget we have a list body attribute we can just place a center widget with text as a child indicate this is our home page right and we can save and then we can remove everything under line 32 we can remove everything and in here we're going to replace uh this one with our homepage we build just now and we don't need the same data also i'll change this to flutter ebooks app and we can save and i think that's it and we can run this entire app on our emulator so just click this run button because this will be our first start so it took a little bit longer just wait few minutes so after a few minutes uh you will see this homepage show on the screen this indicates we have successful set up our initial approach and let's create a colors file under this content folder and we can call it colors. and you are going to use a color for our phone and i think it's a dark purple and defined here and in this material app we're going to remove the back banner going to show debug we're going to set to force and also we're going to hide the status bar so we're going to use a system chrome set session view eye overlay style and we can use a system ui or relay style and make it constant inside we're going to change this status bar the color to transparent okay and we can hit save and i think we are good in this point and we can start our phone this app bar so let's go back to this home page uh which is this ho dot dar and in this home tutor we're going to implement this a bar so for the a bar we're going to use a pre a building widget which is called a bar we have this leading attribute title attribute and also the action attribute for this header okay so inside scaffold we have a bar attribute so we can write a messenger view that part right and we can create this method you're going to return an app bar and we can make this constant all right and we're going to uh change it a little bit uh because by default the bar would have a blue color so we're going to change to white and also remove these elevation in a bar so [Music] let's define some attribute inside this apple so the first one would be english the background color and we can use colors.y all right and the second one i think we could uh change it is uh elevation so we're going to say it is allo version to zero right and since the scaffold uh the whole scaffold is white so we're going to change the background color for the scaffold as well so we're going to change the background color for scaffold to color stock y okay and then for this f bar and we could implement it is leading attribute so for it is leading we're going to use uh icon button and we have for these on press which is required attribute but we can leave empty and we have this icon attribute which is also a record you can just use um material icon which is icon star uh menu it okay menu rounded and the color will be our phone color okay we're going to import our color starter and we can save and you're able to see we have this menu icon shown here so next one will be the title attribute right for this title attribute we just have a simple text so inside these text we have which is called all books and [Music] we have a style which is uh we're going to change it is uh color phone weight and also the font size so for the color should be our phone color and from size i'm going to change to 80 so let's save and there is one more attribute inside this app bar i think it's called uh center title but by default we will align to the left so we're going to set these center set to true so after you set to true at least title move to the center of this bar so the last one will be our actions so inside this action we're going to have our icon button as well and we have this employees and icon must be implement so i just leave it empty for our unpressed attribute for icon and i just use a material icon i can't start search out lined it right and color should be our font color okay let's save okay i think it's a similar like this prototype and we can move uh to the next bar for the next part i going to implement this uh custom tab so let's back to visual studio under this widgets folder and i'm going to create a custom tab uh inside this custom tab data i'm going to create a state list widget i'm going to call it custom tab right import library make this a keynotable so it's going to define some attribute so first would be the tab index and the second one will be the callback function when you click this one you will trigger this callback so let's implement those to attribute so first one is the integer selected index so the second one would be the function the callback function our which user will be a set state method pass from it is a parent so we're going to implement this and call back okay let's save you could pull this custom tab here so let's save and we're going to use it in our home daughter so back to honduras and we're going to replace this center widget with a column widget so inside the column we have a children attribute and you're going to define a variable for our tab index right so by default europe 0 and also i'm going to define our page controller be our page controller and inside these children we're going to [Music] write down our custom tab right we're going to pass on the select index which is this tab index and also we're going to pass the function which is stay but you will received the parameter which is our index right inside here we can use our system messer we're going to set our tab index to the index a pass through okay and also after records estate we could use this page controller dot jump to page and we're going to jump to index okay that's it that's for our uh custom tab widget so we could start implement these custom tab widget let's back to design file so we're going to first declare a list of array contains those two tab so back to this file and we're going to define viable tabs it contains the ebook also the audios okay and we're going to remove this construct a constant keyword so we have all these tabs list and we can use inside our build mixer so for this container um we're going to keep a sun margin we use constant edge incense the or and 20 is imna and then we're going to let's see we have a background color which is little gray and also have these border radials so could use uh decor ratio use box decoration inside the box decoration i'll change the color to colors gray 200 and also for it is border radius change to just five okay so i think we need to implement and we need to define the weight for this container so here going to define the screen width which we can use this media query media rate of context dot size dot wait we could get [Music] the screen width and we use here we're going to set this container width to the screen size and also high set to 56 so let's save okay now is uh um everything either okay and inside these uh child we're going to use a list of view and we render those tabs so let's create a list view separate cheat and we have this item count which will be tabs lens right for this separator we could using a sliced box and set the width to 10 okay for this item builder we could a written container but it will wrap with our gesture detector then we can change the index right so [Music] gesture detector we have on tab uh attribute so we're going to call this callback by past our index up to there we have a child attribute inside this gesture detector and we could return the container in here so for this container we have also have a background color and also the decoration so if we use a box decoration and crew color but first we're going to check if the selected equals index i'm going to return the white color otherwise we just return this color gray color 200 okay and also for it is border radius every other rails are going to set to 5 six and i think we don't have any uh child inside this container so we can see it okay and that's in implement this child so you can see it so for it is trial just a text widget right because you access the element in using this index okay we can save it for now alright so currently these ebooks get selected so the background is white now we're going to change the scroll direction for these list of view will be horizontal so let's save about so we're going to others we're going to style a little bit and you see this when i click this e-book the background change to white so we're going to split a little bit so for this container i'm going to keep margin for this container you could use constant edge incest or symmetric vertical give it a five okay and we have a alignment inside this container we can use alignment center center lows uh text widget and also we're going to set the weight for those uh container should be the width minus of 40 and divide by 2 and -10 the reason i uh minus 40 the reason we minus 40 because we have a 20 in the left side the padding and a 20 in the right side and we minus 10 the 10 will be these gap between those two a container and also i'm going to set the padding for this list of view as well so we're going to use this edge insert symmetric i will only set the horizontal right so let's save and now you see on this one it's very similar like this and you can click and you switch to a different page view okay so back to this custom tab and we could style this text a little bit so we using this text style going to change this color to our phone color and also phone way we could set it to 500 okay and import library and make this style constant okay let's save and i think now is very similar like this prototype and we can start for the next part since we use the colon for this home page so we're going to use a expanded widget wrap these stacker view so let's back to our home doctor so after this custom tab we're going to create a expanded widget every remember expanded widget could only be inside this column widget a flex widget and a row widget okay so for this expanded widget and for it is trial i'm going to use this book staggered uh great view widget which we're going to create so let's under [Music] find these widgets folder under it we're going to create a file called book stat [Music] create view so inside is a book stacker grid view dot there we're going to create a stay list of widgets and coil book staggered great view okay and we're going to import library i'll make this keynote and here we're going to receive the selected index as well and also the paging controller and the uh the callback function so let's define those attributes so the first one will be the select index and these are going to be page controller and the third one will be our callback function okay and rewrite this constructor select it please page controller and last one will be the callback should be back call back okay you can save so here we're going to import library for our book stacker grid view now we're going to pass those parameters so the first one will be the tab index right so the second one will be the controller so which is page controller and the third one will be our callback function which change the state and we could pass [Music] this we're going to receive an index and we're going to call this state method so inside is estate and we're going to change this uh tab index to the index we select okay i think that's it so we can save you see we have this grid view and we could start from this point uh since we wrap it up using this expanded widget so these stacker a grid view can be scroll down and it won't cause any like a overflow error so let's back to this book staggered a grid view and here we're going to use the library and it's called flutter staggered grid view so we're going to import the library just click this installing tab we copy this dependence and in this pub specie yaml file after these are line 35 we paste it and save and we can close it and import our library in our book stagger with view right so in here we could use these stack of view so before we implement any of those stack of view we're going to first create the book model which contains different kind of books right let's find the models folder and we're going to create a new file i just call it book. right and you can open this uh prototype and as you see in the detail of book we have the type the book type book name and also book publisher the published day and also the image for the book and score the rating the review for the book so we could follow the same style okay so i'm going to create a class called book and we have a attribute as we mentioned i have a type and we have a nand we have a publisher we have a date time and we have image url and we have a score and we have a rating and we have a review also we have a height for each cover for cover so you see we have a different height so last one would be our height okay and then we could implement this constructor so the first one will be type speaker lines name and the publisher so update image url score and the ratings and the review and last one will be the height okay then we're going to write down a static method generate a list of book we're going to use in this case okay so contain the uh the attribute we define so we could just call this messer then we can get the lace-up books so in the reality you're going to have your own backend and you turn you return the list of a book after you fetch the api so we can close this book tatar and in here in this book stacker great view i'm going to define one more attribute which is book list across in here we're going to show a list of books so we're going to use the static method we generate a list of book so here we're going to import this library this book dot r and we could use it is a january book messer right and since we are not using any static uh we have these data which is no static so we're going to remove this constant keyword okay so let's start from this point and we're going to use a stagger view uh when you check this documentation we'll show you how to use uh this one you just create a widget which is called a stacker agree view and you can use these uh account builder and you pass the close access count and main access count right so let's back to our uh vs go and here um we're going to give uh this a stagger view a padding so i going to use this constant arch incest or symmetric i think horizontal i'm going to set to 20 right and for it is child so first we could wrap this page view so for the page view we're going to pass our controller so the controller our phone is patch controller and also going to implement its own page changed so we receive an index and we could call this callback so for it is a children we could use this as stagger view it has two children so we could save it now this gradually we are missed so for example i'm going to give you this is our ebooks right and the second part will be our audio books okay you can save this page view actually works you see when i click this audio book i actually the text sent to these audio books right it actually works so we just change we will just replace these texts with ebooks to these uh stagger review content a list of books so for the second one we're just going to just return an empty container so basically means nothing so for it is a first trial we could use staggered grade view dot count builder okay let's implement it is a required attribute so for it is a cross ss count and i'm going to indicate itself 4 and also we have a cross xx spacing that would be 60 and then x is spacing also 16. and also i'm going to define this uh shrink wrap to 2 and physics and you will use scroll physics right and for it is item count i will be the book list a lens right so it is item builder and you will be oh sorry should be underscore and to return we're going to return a book item which you're going to implement after this all right and the book item are we going to pass the book object we can access the each book using the index right so for this staggered field builder and going to [Music] oh sorry going to return a constant staggered field v i think two is enough so it means the close access count will be 4 and each tier will take 2 space and i think we need to implement this book item because we have arrow in this case and you can now see those book come up let's create a book item under the wedges folder and i'm going to call it book items dot dar and it should be a stateless widget as well widget and i'm going to put item and i'm going to import library right and also make this keynotable because we receive the book object so we're going to rewrite this constructor this dot book and also for each of the book uh we're going to we only use it is image right and also the height so in this case for this container we could just return oh okay we can set the height i always can from the book.hi staple and for it is a decoration we could put an image in it is a decoration so we don't use the child attribute and we could use a box decoration inside box decoration we have this image attribute i could use a decoration image inside this decoration image okay image inside this decoration image we have image attribute and we're going to use ss image for the ss image we could use fog dot image url right and also we're going to set the feed attribute of the box bit cover okay let's save and then for the radiators so i'm going to use a border readers okay we'll set up order three years so here to 60 let's save i think that's all and we can close this book item just import library uh in this book stacker view so let's save then you able to see a list of book showing here okay here you see these are both with different height right and you can swipe to this audio book i would suggest a empty container but if you click those tab it works as well okay i think we could move to the next bar which is this button navigation for the bottom navigation let's back to visual studio code and we can close listbook stacker gridview.file close this custom tab as well uh still inside is scaffold but under this body attribute we can find a border navigation bar attribute and here i just written a method a view button notification bar right and we could implement this method so for this method we're going to return a widget so here first we're going to declare a list of buttons contain a list of icons so the first one will be icons home outlined right so these there will be analytics right so the third one would be keyboard uh voice outlined so the force would be bookmark [Music] folder outline and the last one will be person outlined okay let's follow our buttons and let's check this one and we could return a size box [Applause] uh for this size box away we're going to use the screen width for medium query of context uh size start width and for it is height we're going to say to 56 uh for it is trial we could use a list of view dot separated oh it is item count just the button stock okay should be important stop land right and for it is separated and it will be a constant size box i'll use wet just 210 okay and for it is item builder uh first we're going to change it to scroll direction of the access horizontal and for this item builder we're going to receive a context and hope so so i think we need to declare a variable for the bottom navigation bar index so after this tab index we could define a bottom index by default you select the first one which is our home and we could use this one so we scroll down in this builder so okay and we're going to we're going to return a gesture detector in this on tab we're going to call this set stay i'm going to oh sorry on the set state and we're going to change the button [Music] index to index we received which is here right and for it is a child uh we could use a container [Applause] and i'm going to set the wet so so because we have the gap which is a 10 gap i will have four items so we use the width minus 40 and divide by five so you could copy this one i know what r equals this and you could use this way as well for this uh container i'm going to set the width because we're minus 40 and divide by five okay and for it is padding i'm going to set uh vertical to 10 and also the declaration and but first we're going to check the about an index equals index if it equals going to return constant [Music] box decoration otherwise uh it's written now right so for these uh power stack operation we have a order attribute we're using this uh folder inside folder we implement the bottom border side we have a white set two three in color you could use colors.thief orange right and you can save yeah it's hard to see uh the reason because it didn't give those icon color now we haven't implemented yet so inside this container we have a trial which is our icon okay for the icon and we have i could access using button index right and the size will be a 30 for it is color and we're going to check the body index equals index if equals we return and make it a dark purple otherwise just our colors great 400 okay let's save now able to see those all right so when you click it the index will be changed right okay i think we finish our first part for this um ebook application and we will have the second part in our next video okay thank you so much for uh watching this video until the end and so don't forget to subscribe to my channel sum up my content and open a notification so you won't miss out uh future latest stuff writer tutorial okay thanks for watching i will see you in next video

Channel: Fullstack School

Views: 11,558

Keywords: flutter ebook app, flutter game store app, flutter nft profile app, flutter food delivery app, flutter ui, flutter tutorial, flutter ui design, flutter for beginners, flutter app, flutter ui tutorial, flutter tutorial for beginners, app development, flutter ui speed code, flutter tutorial 2021, flutter ui challenge, Flutter ui tutorial for beginners, Flutter app tutorial, flutter store app, flutter book store app, flutter book app, Flutter book app tutorial

Id: bUf5wlliN8o

Length: 51min 26sec (3086 seconds)

Published: Wed Oct 13 2021