Flutter Flashcard App - Live Flutter Development from Scratch - Episode 6

um so hello good morning emma how are you today so just give me one more second i want to set up some things so i knew that this would happen this is like the everyday morning part i call it lovely the paint screen because somehow my hdmi cable has some problems usually in the morning don't know why way better i'm doing extremely well and welcome to this channel walmart how are you good morning mojo how are you today had a good start in the day already that works great stuff so let's see today i'm a bit more prepared yesterday we had our fantastic internet disconnect which was amazing so i was sitting there without internet like one or two hours thanks vodafone in germany was horrible uh i changed my internet provider for january i'm really looking forward to it i'm not sure how this turns out if it's getting better or worse but you know we have to try you feel amazing that's a good thing if you are feeling happy cool so your work as a full developer in flutter and now on the weekend you learn more mohammed good so if you have never attended to this stream and i know it's now five days into it so i will give you a short intro what we want to do and where we are standing so we create a flashcard app or we created already a flashcard app it not looks like much but it does already everything we need and the cool thing about it is that this flashcard app has now well we read our data from a google spreadsheet and the cool thing is every one of us can contribute to that so by creating an excel sheet down in the video description below you can find two links one to the github repository and one to the spreadsheets in google cloud and a cool thing if you create now a spreadsheet it will automatically be imported into our um into our application and the idea is that we have on one side the hint and on the other side on the back side we want to show the answer for several things and in the meantime ah perfect so that's the best time to learn flutter i guess if you are starting still with the academic academic part cool stuff so and we want to create that app where we flip the card and on one side we will show one column of the spreadsheet and on the other side we show another column of the spreadsheet also we want to write some tests in the meantime so that our application will be stable in the end and everything is open source so with an mit license so you can freely use it and yeah enhance it if you want to the only thing is that you please add the license from myself into it okay so besides of all that i would recommend to just jump into code and let's have a look where we stopped yesterday so as i said it was a little bit in the middle because we wanted to finish actually a feature but in the meantime the internet crashed but to give you a short overview how the app at the moment would look like we have to fix first some things so we were at the moment to make this spreadsheet id dynamically so that if we start the app we can see like a list of different spreadsheet elements and names and now we want to pass that into the home page so we have the possibility to load our flash card service here and as you see at the moment the flash card service is red the reason is we want now to have this spreadsheet id inside of here and the good thing is i had some time to think about the whole part and i came yesterday to the idea that this is maybe not the best solution here by the way if you have any questions so uh depending on a whole different topic please feel free to ask them at any time i will take my time to just jump into the question and have a look if i can help you there so i did that with the spreadsheet id and this was a bad idea actually because our flashcard service is not really interested in this spreadsheet id we can do that a bit better and how can we do that better well if you see we always ask the sheet repository when we want to call a specific spreadsheet id so instead of giving it into the call here we could also say hey this is a dependency so someone from outside needs to pass in the spreadsheet id into this service and why is this a better place because we don't have to change so much and we can have now here inside this spreadsheet id so whenever this sheet repository gets generated we want to have a spreadsheet id but let's have a look where we initialize that we initialize it in the files repo and ah okay so and this comes now to a problem because our get files is here inside hmm that's a bit sad of course hey srita nice to see you that's so small i have to ah here is it so what way better thresher so now we have only the problem with the dependencies because our file service is accessing the sheet repo in order to get the files but now we see maybe that the sheet repo is not the best location for this method here so this is maybe the moment or the latest moment where we would have to rethink our structure a bit so i would say this get filed should be somewhere else and we would have a different repository for that like g drive dot dart and that makes it just very clear that we get our data now from the google drive and i move that here and create a class g drive repo the inside of here the method can be and we have to import some parts like for example the drive api um the init we don't need at the moment but we have to create the drive api here inside and this currently we have here and we don't really need that it is sheet repo anymore so it can be part of here so and beforehand we had this in it and we put this client inside the reason is we needed a client for both services so it's maybe not a good idea anymore to have this client part here in the init part on the other side we could keep it the same way for now and then improve it as we go along so we take that over to the google drive repository we don't need the sheet here but we need the authority pool so we come out we have no possibility to come along with that we need that part here so but also this can be enhanced later if we use something like get it for example we could um inject that a bit cleaner and have this this auth repo as a dependency injected we currently don't do that it's maybe a bad idea but i want to first finish a little bit the service before we come into the next cleanup phase okay so we use that out paper to get our registered client and with that we set up our drive api only downside we need our google drive repos constructor to initialize that one and we have a late future of init which will be a future of void and we have to pass that inside of here and say this is equal and with that we get this method and we execute it good now we can wait inside of the get files for the init and with that we know that we have the uh is it not uh we don't have this way okay so now we wait for the init and that means down here we know that we have the drive api up and running and we can use it directly all right so there is a spelling issue i think it's google drive perfect so that was already a lot for the first couple of seconds sorry for that i know we had yesterday that crash that leads now to all these following issues so we have to remove the drive here we don't need it actually and from the services that depend on that so this one does not receive a spreadsheet id anymore good but the service will receive one now and you will not get this one you get a g drive apoc and you want nothing but why are you red ah of course because the g sheet repo is it no but with that we should be clean here again way better good our ui is still a bit broken the reason probably because we have to pass in the spreadsheet id now and the spreadsheet id comes from up here and at the moment we have it inside of our widget so to receive it we can now say widget dot red shade id and here we have to say that this is a string and it is required good it seems that we cannot access the widget when we are in the initializer here so we have to move that a little bit around and this one is late late and inside of our init state we want to set that now so this one is our flash card service equals to it's a flash card service equals to this okay so now this should be set and we have the right spreadsheet id inside so making a model class for the api from scratch or use third parties like quick type to generate it to save time which one is better do you think i don't know quick type at the moment but i know things like freeze and let's have a look what is quick type maybe something i should know quick type jason into george's type save ah nice um that's a very tough question i would recommend to use such tools actually because usually they are pretty strong and you don't lose anything for it you generate also directly the mappers from get json and from json so in general i would recommend to use these tools there is no difference why or no problem why you shouldn't use it because most of them are automatically generated and the reason i didn't know that is a pretty a shame actually because i uh you can pass that into anything or dart do you have also typescript yeah cool so that's pretty awesome so you can interfaces you have this that's pretty good i would say pretty neat [Music] convert to jason nice wow that's maybe a bit a lot but um yeah you have to make sure that you know what you are doing with that stuff because i can imagine that a lot of these things are pretty cool that you have it but yeah if you don't completely understand everything it's maybe not a good tool to use directly hey darshan i hope that answers your question so i would always recommend to make your life easier if it helps you use it if it blocks you or makes you slower then you should maybe rethink your behavior or you're using it okay so our file service now uses this drive repository we initialize that one the sheet repository can now be a bit more cleaner i guess so we have this one we have the sheets api and the init good fair enough where are they going down to ah nice okay so and with that we have the results we get that back what we wanted to do is we received the files now and we can start up our application now again i hope and then i will fix the test 4025 hey fia hey in the morning everyone is online that's great how are you doing all together did you have a good start near saturday so if you have not been part of this stream so far we create a flashcard app project that gets its information from google drive and we use this google drive to read all the information from our google drive let's uh go quickly there and then we can see so why i don't see it now google drive g drive ah here we go go to drive go to the right email account here we go so flash card app we have now currently two lessons and in english we have lesson two and someone removed my lesson one which is pretty sad so why is it removed uh i think we can get that back somewhere activity an item at a huh hello world and i don't place in so where is this one now that is mean okay maybe i have to reduce the rights it has been moved to my drive interesting it's a file move back can i do that move to flash card app learning english move there move so can i reduce the rights here not sure about that no i don't think so so it's only editor rights okay so thank you to [Music] for moving my stuff yesterday but what you can see is we have now this lesson one for example left side is the hint so that is what we are doing in german and on the right side you see the um the answer to the different things so and i shared the link to this flash card uh more or less inside of the stream and you can get that too so i pass it here so you have also a possibility to add here it's 11 o'clock there okay so for me it's 7 13 at the moment so pretty in the early in the morning so and what you can do is for example adding more information or if you want to learn india for example and or i have no idea about india so what we could do is learning indian i don't know hindi is the language or the main language i guess one of the main languages sorry i have to be careful so um and inside of here we could create a new google spreadsheet create and share and inside of here we can then add a name lection one hello world and we would for example have here german or no in this case hindi and on the side noise we would have german for example so and then we would google translate it because as i said i have no idea i think it's tutti but i think that is also sri lankan sri lanka language so it's all a bit difficult for me so let's see we want to have english to hindi there it is let's turn that and say hello world okay namaste nice namaste namaste of course i know namaste ah max you should know some things so that would be uh english in that case so hello is in this case namaste or we can also add how this symbols i don't want to say something wrong so let's take it as symbols and if we add that now we get this as a hint and this is our english phrase for it ah tamil is also the yeah right in summer in india it's tamil which is even better because southern india has the better food sorry i have to say that or at least i didn't get honest north indian food i guess so um back to that part now that i got problems with the other half of india sorry so if i reload quickly we can get that we all get all the different files so we have lecture one hello world of course we should maybe have the folder structure above it but at the moment we don't have it but if i go into it we currently just show the id that we need to call so inside of our home page we no not of the home page in the lesson selector we print at the moment only the id but what we want to do is navigate and we want to navigate to the home page with the right navigation id mukha food is also good let me google that because i have no idea i only know one uh southern india restaurant here in germany and it is um in frankfurt and it is amazing so much empire food mongolian right or can i say that no it's all no it's completely oh sorry i have no idea oh yeah and i have to admit the best indian food so far i got in japan which was crazy i was in japan tokyo and we were eating there and we got naan that was made from heaven it was so good delicious like crazy i love naan okay but now i get hungry and i'm already uh getting problems with a lot of people so i have to be careful now so let's go back here and um so we have that and if i click now here we don't navigate or do something so what we want to do here is navigate to the home screen with the correct spreadsheet id and if we do that so now we could write here navigate push and i don't know whatever push named but the problem with that is if i would do that i would write it here and always another solution would be and this is usually the preferred way for me at the moment if i use navigator 1.0 of course if i use the other one we have to change that we can create a method in this home page that is called that is a static method navigate to and we don't pass anything in the only thing we need is the context and this method is static and the reason for that is i want to call now home page navigate to and then we want to navigate to this homepage so now i can use the navigator.push and what i can push is the context as we know it and the route which is a material page route for me so ah we need the builder of course but give me a second so here inside we have the builder the builder constructor part as you know a constructor builder is always passing a callback with a context inside and returns usually a widget in our case we return the home page [Music] and add the spreadsheet id and the spreadsheet id needs to be passed here too so we need a spreadsheet id without that we cannot live so this is a string by the way just to make it clear and pass it in here inside okay and with that we have already our navigation we have captured it inside of the home page so nobody else can navigate here and we can now say home page dot navigate to and the spreadsheet id that we receive and as we know the spreadsheet id comes from the possible lecture index dodge id now that should actually work so this is an id why is it not working uh because we need a context so the contacts need to be passed good hey ambresh nice to see you wow really that is a real feedback i love that if it helped you during your final exams and your final projects i'm pretty happy if my videos could help you there that is the things what i'm working for okay so thanks to this navigate to we have this capsule it's all gone we don't see too much from it and the good thing is we can now navigate here without too much code and hassle so of course we could also use libraries like router and things like that but for now we just want to have an mvp so we keep it as simple as possible so let's have a look how it looks if i click now this icon so it take a second and after that so we navigate too early then we see some random text and after that if we load it we see now our hindi information namaste and if i click we get hello now i can accept it or not and depending on what i'm doing i get this congratulations screen which is completely off the limits at the moment but the great thing is you can see it already it's extremely um it's extremely versatile because we can now do everything we want so we can improve that very easily also we can enhance it with more legends as we go and every one of us can help here and improve that so it is a real open source project where knowledge is for free and i really like the idea another thing um we started already with this flutter part so inside of here we could have then more elections that we can create like stateful widgets and then we can just a widget which contains local state all variables usually with two classes one state class and one widget class something like that and you see this is already getting longer and longer from the text and i will answer your question in a second just check if this is okay and in the meantime if i go now to fun and hike i think widgets if we load we click here and at the moment it looks a bit off but we get the whole text so we have enough space for everything and we can work with that now so the ui is already or is still a little bit ugly but our feature set is already pretty promising right so that is pretty cool actually okay so now let's fix the test and i think you will not be working anymore because you don't want to be in the flash card service and with that the test should be already fine again instead so okay yep five tests are running green all good and with that we should have um already a pretty stable idea here cool um i pushed that still up quickly and with that we finished our feature read files from google spreadsheet [Music] commit that and this is typical perfect okay should i learn kotlin or flutter well that depends of course and you should need to make sure that you understand what both of them are kotlin is a programming language so it is a complete language with everything bluta is a framework so that means it is something built on top of something and what you actually ask if if you should learn dart or flutter or kotlin because dart is the programming language behind of flutter at the end so if you want to know something of kotlin and flutter if you want to compare that a bit better you can ask for jetpack compose and i think jetpack compose is more or less the equivalent of flutter and where you can create with kotlin everything that you do with flutter actually so your question would be better if you asked for jetpack compose compared to flutter and my answer that still depends heavily jetpack compose at the moment is or the things in kotlin is only available for android development so you will have only one system that you support with flutter and dart you currently support multiple systems like mac os windows linux ios android and so on and so forth of course at the moment we are still mostly bound for the front end or for the mobile devices but also web is supported soon or at the moment i think so that heavily depends on what you want to achieve in the long run but in any case i would recommend you to take a look first at the programming languages like dart or kotlin and after you know and understand what a programming language is and how it works then you go further with a deeper framework okay max do you have any idea about flutterplot a branch plugin let's have a look flutter branch so their short answer is no um is it branch ah branch i o plugin i think you mean this one right yeah plata plugin implements branch ios sdk so the first question would be what is branch io enterprise mobile growth digital plan grow on branch okay no not at all never worked with it so far centric brace facebook okay but it seems pretty interesting so maybe i create a video for that so i put that on my a hold back list thank your arm brush so i put that also in choose new folder possible video ideas so save oh what was that the repository has been archived [Music] huh why is it archived that looks not good to be honest uh okay so probably they have moved it into the flutter branch io [Music] so it seems not supported anymore actually so i would be careful by using this package the flutter branch sdk is maybe better [Music] not supported yet configuration some text and if we take a look into the repository yeah it looks better but also here six months this insights just be careful [Music] okay um so now we have that let's have a look here uh we can now click on that so i don't like the first initial well loading spinner i call so yeah i can imagine i will take a look into it's just said that the support seems to be a bit stale so be i just mentioned be careful because sometimes it could be that you run into that package and that would be very sh a shame because you have to then do a lot of things yourself at the end okay so we have to push we have the spreadsheet if we are coming into it to get the first flap cards we ask for this all cards is finished and then we showed something the problem is at the moment we call always this question and answers list so disawait we need to wait for that longer so and before this is not running through we are not allowed to show anything so we would have here a future of void again in it and now we can use and for example uh this one is init equals i could now say why are you red are because of late of course and you be in it i think it can be even private in that case so and this in it we need to wait for before we show anything so the problem is this image pointer here with the card flipped and whatever or better even this expanded here all cards finished could be inside of a future builder so this column here currently shows the card flipped some buttons so this column could be wrapped in a future builder but you know before i doing that and clean and increase more features into it i will revert that quickly and we have that committed and let's have a quick look into our to do tasks that we wanted to achieve in this mr so navigation system where we select the correct folder and file to ask for values okay we nearly did that correctly the only downside we currently don't have any folder structure which is a bit a problem i guess i didn't hurt in the beforehand but now i feel like there is a mistake somehow so what we could do and this is maybe a good idea is inside of our lesson selector we currently use a list view separated and this creates items and it creates a separator and what we could do is we could ask if this files that we receive or that what we receive from this possible lecture is a folder then we show a separator if this makes sense so for example if the index equals to 2 for example then we return the const divider else we return nothing so can we return null no it's not allowed so size box [Music] so so that means we have now only separator when the index is two so what we could do is have at least the folders and here adding the folder name somehow my screen is not showing properly oh that's bad let me have a look it looks okayish for my side so what's the issue [Music] maybe a network issue that would be horrible let me have a look so my stream tool tells me everything is okay [Music] okay that's a problem of course but i don't know how to fix it at the moment let me quickly try this one so here and back does work no better sorry it's something i cannot fix at the moment okay but if we get this information we could maybe inside of the separator write some text so instead of having a con divider we would have maybe a list tile and this list tile would have a title where we add a text like folder name something like that and now it's still yellowish and it needs braces i guess yeah so and if we check it out now that would be something like this so the only downside is now now good oh perfect great stuff maybe youtube had some hiccups sometimes that happens so the only downside at the moment this would need to have a bit like a distinguishable part right it is not really easy to understand that this is something else so what we could maybe do is changing the background color does it have something like color decoration no ion is the text style text direction key local overflow soft wrap style not really [Music] so probably what we need to do is wrapping the whole thing with a container and this container we can now color a little bit so for example we have just used color dodge gray for example green with accent something like that so exactly so this could be a possibility that we have like the separator of the file names and then have a different color okay so the idea is there so how can we do that so if we check we get this get possible lectures here from the file service and inside of here we currently wrap the map everything and we get the files but we don't get the folders because we just we collect all the files and where the mime type is spreadsheet and what we could do is having the same call where we get the folders does that make sense it would be better if we create the tree structure immediately here inside so for example that we have a folder two files in it a folder two files in it or what would be the best option here let me think quickly so if i take a look into here and we make a breakpoint we close off quickly the app and restart in debugger just that we can read it then what do we get we get the files with different mile types and at the moment i just check for spreadsheet so how could we create that best so um yeah let's go back to that and here inside we have our information so files for example and here inside we can find out if this is a spreadsheet or a folder no [Music] why is it not opening up ah probably because my break point is badly set okay so i would need to make that somewhere up here and what we can do in the meantime is just asking for result dot items uh but it's also blocked by the where uh unlucky now result we have the files here which are not load uh which comes now and please ah now we can see all fair enough so and we have here the spreadsheets but if i google a little bit down we can also see ids we have the drive file we have this one so this mime type tells us if it is a spreadsheet or for example here we have a folder then in the mime type we find folder at the end so do we have children so we have parents that is for sure but do we have also children somewhere spaces user permissions kinds label etag created capabilities how do i know that the folder contains something marked viewed as owners owners permissions so the folder is learning hindi or does it come sorted like for example we have here one no not eve not really right so this is a spreadsheet it comes unsorted or do we know the parent of the file ah we know the parent of the file parents we get a parent and this has a reference to a link okay so this is a files parent reference oh i'm not completely sure so what do we have held spaces now this is just a drive thumbnail title so if i copy that value and put that inside here usage limit daily limit exceed unregistered daily limit of unauthoritative use continue use required sign ups oh okay interesting so let's get to the developer console developer where do i get the google apis um on flutter it seems that i got a little bit hacked and they used my whole quota for today would be a bit unlucky but we can um handle that of course but let's see we have to getting started and i think somewhere here was the console exactly and there you can see the pike but also this is not really much of course sheet service three days ago so how does it look like here go to the api's overview [Music] no that's not really much so nothing happened here that's actually it should be possible to get this information that's really odd login required okay no that's not it actually uh i would expect more to be honest some traffic but this is not anything crucial or problematic actually but these appearance doesn't help me it seems like [Music] that's odd so how can i this is an owner this is who owns it this is me more or less this is the name capabilities can child now this is not only what we can do on it so let's see that means the drive api needs maybe to have something else for us so drive api what does it deliver for us we have the files about parents resource get from file id string parent id list file id future parent list so with that we could say which is the parent and what we could do is if we return this and we have the service we would not return a list of files we would maybe return something else because at the moment we do the file information mapping here inside but what we could do is having here a final string parent folder name or something like that and now we have to pass that in and yeah you just get an empty string for that at the moment but the idea would be that we get the files here and we need to pass in also somehow the value hmm so how can i do that we get the file but we need more actually we want here already the list of file information actually so that's a bit unfortunate maybe we cannot leave it like that but let's have a look so at the moment we file we check only for the spreadsheets then we make it to a list but now what we want to do we don't want to return that this are our this is now the list that contains our spreadsheets so final spreadsheets equal so this is where the spreadsheets are but now for each spreadsheet we need to know the parent file name so how do we get that we get it by asking the drive api once more and we need to ask for the parents ah we can also ask children maybe this is a better way properties replies maybe it's better to ask for the children what do i get if i ask for children then i have the possibility to list all of them and ask for the folder id so what we could do is we could change that to from spreadsheet to folder and then we have here our folders and for each folders for each do we want to make it for each we want to make it for multiple calls and then we want to get all the files and then we create the file information so we have our list of file information list of file information uh we call it t for now can rename that even later easy so and now we want to have for each and we want to wait folders don't know or our folder in folders we want to ask for that this will be an await function so we get the folder dot and here there should be chill ah no we just need the id of the folder like that or uh let's quickly kill the debugger i think we don't need it at the moment so we get this the folder id is a string or could be null aha so if folder uh equal null then we continue return no that's not it the argument string star can't be assigned parameter string okay the id can be null right so that's the problem so if the id is null we have to check that beforehand i guess so we have the final folder id which is this and if the folder id is null then we continue and here we pass in the folder id which cannot be null anymore right ah not this photo id of course this photo so finally okay now we got our folders id and we should receive from that a list of children what do we get child list and a child list contains an e-tag the items that list of children if next picture incomplete an additional page is resulted this is always drive okay but we have a bit of luck here we receive our files now final that would be our elections or we call it spreadsheets and now we filter them maybe so because we only get files at the moment now we have to make sure that these are spreadsheets and for that we will take this part again and we are just making sure that this will be spreadsheets else we don't want that actually so these are our files now these are our spreadsheets why is the where not working ah because this is a child list and this has of course uh we are wait for it so files dodge what do we get items probably child references could be that it has no self type it has a kind okay we first have to take a look on what we actually get back from this files part so because these are not files these are children no that's wrong children good so let's see we have this get filed which is currently red the body might complete casual causing null okay and what we return is t at the moment just to make it all run and build time compiled so you get the files at the moment which leads all the problems can't be assigned to a variable of type yup so what we do is we wait for that and the easiest part we just return it so don't forget not everything is perfect at the moment so we have only the files and we only uh and do everything inside of here but actually we could spread split that right because get files does now a lot of things it gets all these information and it goes also on the others and now it wants to work on them together and things like that so we could also create multiple functions for that in our repository i quickly close the window it's pretty cool so opening up uh here we go and we are already in the debugger but let's have a look how tears look like so we have now the children and we want to wait for this call so evaluate cannot evaluate that's unlucky so what do we see we have files we have folders folder id good so inside of these folders we have created by we have embedded links we have the file size id okay okay okay but we don't have children i guess right owners parents self-id spaces now this is just google drive yeah and we have at the moment for borders also interesting did something changed or did i we have ah the flashcard app itself is also a folder okay so i have to remove that probably do we see that somewhere the name [Music] learning hindi you know that's not it but i'm pretty sure okay but this is another um thing that we resolve in a sec i first want to get a print here for children and i make the break point here let that run and hot restart [Music] now okay so what is inside of this child list we have items with a child reference this is just a link okay so that doesn't help me a lot i guess ah on the other side i know i don't get what i need actually hmm that's a bit sad okay so we changed too much and i think that is not worth it because if we don't get the infos that we anyway needed so unfortunately we have to roll back i think i changed too much without the benefit that i wanted to get so that's of course a bit unfortunate because it changed also here a lot but we have to no that was correct that was correct i think so yeah and also here we can revert ah no this is what we want actually to achieve so that's okay but i have to ping once more so we get all the files and here are also the folders inside i just have to collect them together somehow in a better way i think it was good that we said okay we get here a list of all files and i mean we receive them also here right we don't ah we make this where check so we could say get files and photos and we would not make this weird check here we just return it immediately and now from here on we have now business logic now we start to um connect everything together because if i remember right we have now everything so we can say also that we know everything about these files and folders so at the end we want to get only spreadsheets but with the correct folder inside of it let me quickly think if i have that correctly in mind so we have a file information with the parent folder name we only have one parent so we don't need to create a full tree now inside of here we get all the files and the files are linked with the id so what i could check is if the files dot wait let me quickly write to do's because i stand somehow on the on the edge i have to think so we want to get the files and inside of the files inside of files we have parents right and these parents are connected with ids so now we want to get all spreadsheets and check for the parents by id and after that we want to set the value of the parent name to the folder name okay that is easy enough i guess so okay so we have our files that are all the files and folders actually so we could rename that too so files and folders good now we want our spreadsheets that is files and folders and actually this is the method that we had beforehand with this where condition and everything so this is from files and folders dot and now we pass in this where condition with two lists one dot too much but something like that good so now we have the spreadsheets and we could also make the same thing for folders so by replacing this with folders so and now we can say every spreadsheet for each of our spreadsheet in spreadsheets we can now search for the parent id in folders like folders dot aware element dot uh wait not in the uh where [Music] exactly element dot id equals sorry one too much spreadsheet dot parents uh it has multiple parents but we know it has only one maybe that works let's see and we get the id here yeah we can try that with another check okay so we have where element element id is the spreadsheet parents id so now we receive one folder so instead of where we use find uh is there something where first or first where exactly because we only get one folder at the end so why final folder and now we have to take the spreadsheet and mutate it and what we want is we create now the the necessary file information from it um and the file is our spreadsheet also here and here inside we use the folder dodge the folder is now also a file and this folder has a title if it's null then we get an empty string good now we have to collect that into a list we have again our list of um file information p equals empty list and then we say t dot add and we are adding the whole part here something went wrong okay the first wear make that a bit cleaner so now we add that and at the end we return our t so we check our spreadsheets we get our folders we check everything inside there we don't make any unnecessary recursives and we make no network requests anymore looks like a decent solution i think so we could test that also pretty easily because we don't have too much dependencies i think in general this is not too shabby i'm very happy with that solution any issues that i don't see not yet so let's have a debug and see what happens let's run that actually of course if we would make everything test driven and i wouldn't be too too needy to get my feature done i would have written a lot of tests and try everything correctly and asked okay what do i want to achieve with it but yeah so coming into t we get a file size of four learning flutter learning hindi learning english learning english that looks promising so now now it would be even better if we would receive i mean with this parent folder name we can already work but the downside is at the moment that we probably will not uh let let us run that through and let's see how we get ended so at the moment our separator don't know anything about it but if we check our separator we had said that we want to have the folder name here inside and the idea would be to get the possible lecture dot parent folder name uh it could be another right so in the worst case no no it's not a problem there's a reason here ah it's a constant somewhere ah here cool good so now we just have to check if our possible lecture dot parent folder name it's unequal to null for now i don't know it's always said yeah of course okay so now we have for each element we get learning flutter ah and the problem is at the moment we don't see anything following how can we make that a little bit cleaner and also the separator always starts with the second one right so it doesn't start at the beginning so we would need to do something else i guess we need somehow to organize these things the first question is is the separator the best idea to do that um and i'm not sure with that because what we could also do is we can use the future builder that we have inside of here and if we have the data then we can collect these things together and what do we collect and how do we collect them [Music] so at the end what we want is a list of spreadsheets inside and this will be our folder right so at the moment we return in our file service always these file information itself as a list which is very easy to read but what would be if we have a list of lists of file information and inside of the parent list we would have the information about the folder name and in the second one we would have the other things [Music] i have to still think a little bit what we also could do is having a folder and then we say okay we have in our models class folder which has a final string and i think this is the best possibility and then we have a final list of file information and these are our children in any kind i don't know children best name but something like that and then we could say we get the folders with the name and have then our file information underneath files or spreadsheets better that is our lection folder you know like lecture is the name lecture folder and that would be our lecture information lecture information so we get rid of this parent folder name here and i think that would be the best option so we have that and in our file service now what we can do is creating this lecture information this one complains now a little bit the idea is that we removed that and now we have to collect these a little bit so whenever we have a spreadsheet or for each folder that we have we will have also an older information [Music] again i have to think a little bit so i could map them of course but that would lead to a problem what is if there is no file existed inside of it so we want to create for each folder folders where the id is correct so and now that i know the folder if folder dot name no no no no so we would not have a list of lecture information that would be our folder a spreadsheet folder was the name lecture folder okay lecture folder and this is our list and now inside of here we will have this list of informations so so for each folder on the other side we can just collect them later i think that would be easier yeah i think that's easier so if we create for each of these folders one of these elements here inside i could say something like we have our t right and instead of having an empty list we would use folders dot map and here we have a folder which then returns us a lecture folder with the name holder dodge name or title what was the name uh that is spreadsheet i have to search it here title so and he wants children which is an empty list for now uh did i make something wrong fine ah that could be now still not the problem a value of ah of course whose list always the same issue good so but now we created from our folders or lecture folders we created a title now we have the tree first level of the tree and now inside of these folders we have to collect them so if we go to that we know now that the spreadsheet contains a folder or belongs to a folder and now we want to do something if the folder id no better we get this folder now we want to find the folder in t like t find we get the folders first where is that so no we want to find t first where type element i uh ah we need that folder [Music] quickly have to think sorry so we get the folder we need that folder because there is the title and the id inside and now for each of them we want to collect the spreadsheet as a child spreadsheet as a child [Music] so when do we slowly okay so to do we want to collect the folders [Music] but how does that look in the app and later we can get a map it's not that easy okay we have our folder and i need now to select that and here i want just to edit it's easy if the folder dot id is equal to or first find so first folder dot first where first where the element dot id is equal to the folder dot id so if this is identical then we get one folder back uh why does uh it's the name of course the name and here it's the title they are equal then we receive our element that we need up there so this is our lecture folder so in this lecture folder we want to add now a child lecture folder dot spreadsheets add and here we add now the spreadsheet itself so and the spreadsheet of course is our file information that we got somewhere do we have not the whole ah so and adding that part here so we get the folder title i think this one is not true anymore but everything else should work file information that's a different name now it is lecture information good so now we have added that and at the end we can now return t and you are currently a lecture information is that correct yep but that's wrong because you get lecture folders actually okay of course our home screen is now broken but that's fine we can live with that but we managed to collect all them together in a folder and here inside we get our texts that we cannot display and the question is do we want to use separator builder for that now a lot of questions come into my mind because this list view here is correct for the folders and then inside of each list view we want to have new list view something like that so we would create a list view in a list view which feels a bit ugly but what we could do is we have a list tile it's not clean it is not clean yet i see the problems coming but we have now this values here we have this list view separated and of course i can go through these possible lectures which is currently from the lecture folder and lead to some problems i guess why is your problem yeah lecture folder get that everything is green again but if i hot reload we get some issues for example this here we cannot navigate to a non-spreadsheet id because now this list tiles is actually not the correct thing how can we make that cleaner so instead of a list view separated we don't the problem is that the folder is the separator maybe it was a stupid idea to create the folders in the first place if we would have the file and we just recognize if it is a folder or not that would be also a possibility so at the moment we know that we have spreadsheets and folders and what would happens if i make it as easy as possible and say in our lecture information we would have a boolean flag like this folder this would be a boolean and we add that into our lecture information and then we have a name and an id it can behave exactly the same the only difference would be this folder would be true or false and then i would remove all that but then we still cannot collect them that wouldn't help no i think that is already a good solution yeah then we have to change our ui how to zoom in qr code scanner uh what do you mean um qr code scanner so if you want to scan a qr code what do you mean with zoom in so like pinch zooming i think you usually use the camera so it should be a default thing so it should work out of the box if it does not work you can check if you have like pinch zoom and flutter and you can add that to the um to the uh level on top for example but usually it takes the same the same widgets hey summit nice to see you how are you this morning i have currently some troubles with folder structures and sorry again for yesterday's a quick loose of my internet connection it was a bit unfortunate so we cannot use unfortunately anymore the yeah yeah can cancel that uh we cannot use any more unfortunately our list view builder i guess the reason is um i think what before i delete everything but the reason is we actually don't need the separator builder and another thing is so we can change that to a builder for now and the other thing is now we receive instead of [Music] the files itself we receive now the elements perfect morning great stuff love that [Music] good let me think quickly so we have our list view builder we want to create um so we cannot navigate at the moment that doesn't work anymore so we want to create an row and after that a list view so what we can do and this should be the easiest way we can just say okay if this is a folder yeah why not this should be possible right i can say what do i want to say i want to return a co a column what should be scrollable scrollable is everything right so if it is a folder or a thing it doesn't make a difference we want to make it all scrollable get possible it just ah wait a second i have an idea we get that from here we get our list of lecture folders at the moment but what we actually need is why is it so complicated at the moment something is not good if it's complicated it is usually not a good thing okay so we get our future builder with a list of folders now we want to show one folder in the beginning and then a list of the followings so in the list view builder we create our item builder where we pass in the list tile but somehow this list build view builder creates now a wrong amount right so our passable lectures that we receive which is our actually possible lecture possible lecture folders is not the only count that we have we have the count of the folders but what we also have is the um for each folder the elements of inside of them so maybe we have to make a little bit more here inside and we have the init state part but this is a calculation doesn't is easy as that because the length of all visible items should be the length of the folders plus all elements inside of it so we have this not only these folders we have also the children right inside of it with a custom scroll view would be also possible with slipper app bar sliver app bar yeah that would be also a possibility would not really solve my problem right or if i could ah maybe maybe you're right that could work oh yeah that would be a good idea i guess uh sorry rmg i don't understand the question zoom in and zoom out qr codes sorry it's and you use usually a camera so it should be the inside of the camera already implemented so but let's see if we can use this custom scroll view then we have to implement of course a lot of ourselves but that's okay i guess no and if we do that now here inside what do we can be a cons of course does it has children i've never long time not worked with it so we have a lot of things inside anchor center controller i've got a controller physics restoration id reverse slivers oh yeah yeah yeah okay and then there was the app bar sliver or something sliver app bar which would then be our folder name so for each folder that would be snapshot data possible lecture folder index dodge name and of course this would be the title i guess so there is the title text with this well that's the best idea uh i think that's a good one hey buanas twits nice to see you thank you cass it's a good idea i guess i think with that we solved most of the problems the only downside now i don't get index so we have to somehow still create the index of the different folders i have to iterate over them and how do i do that i can save four possible lecture folder but i want to create yeah ah of course in possible lecture folders uh you see it's in the morning you know my head is not there where it belongs so we have this uh i don't know if this works with that here but something like that yep that's working so now we don't have an index but we don't need it this is a lecture folder and then here below of this sliver app bar we need of course uh actually i need something like that so we have to generate that so what we would do is having that part here creating a method out of it create a method out of it no okay then i have to do it myself so create lecture sliver create the method inside of here we return widgets so and now we can do a little bit more get this below here have this for loop running get this one and at the end what we want to return is a list of widgets [Music] at bar list i can return a index of any option on react i have some opinions on react i don't necessarily don't like it i really like to make static websites with it a big thumbs up for gatsby for example pretty awesome and this for loop i can do it with a list i could create multiple no that's also not possible and you mean i can ah yeah of course i can use the spread operator that is what you mean right if i do that i can have something like this pass in these elements inside and then something like that honestly i've never done that cast so thank you for the suggestion that's a great thing so what we do is we create a new array inside and because of the spread operator we pass it inside of the slivers again so with that we clean the whole thing up and it works which is a bit yeah amazing in my opinion um for react native well i'm not so big fan of reg native the downsides are tremendously from time to time and also their their rendering engine always has a lot of hiccups so not really a big fan and also i know that the uh google front is pretty strong behind flutter and i have the feeling that facebook is not that good tile so we want now to have at least some text so sliver app bar was a good idea and what could we do for the files i think we could have just the text i don't know if there is a sliver text let's never hit test return what do we have for slivers i think sliver container right and then inside of that sliver containers liver constraints sliver i've not long sliver container not sure you can simply use sliver to box adapter [Music] are there more documentation sliver container class stateless widgets can i see something ah here is the sliver documentation sliver cards liver container now is that a package boxy package this is not what i want limit box adapter okay i can try that hey cody with bhs hope you're well sliver to box adapter and then here we have our child and there could be a text for example but of course we need to do here also for loop right because now we want to for our lecture in lecture folder dot spreadsheets and now we do the same thing more or less we or we can now create it i think for each of them then we have lecture dot name something like that we want to make it pressable and have also more stuff inside of it but just for now that should be it let's start the app and let's see how it looked like but i like that that we make our own sliver that was a good idea of course we need to make our own sliverless in the custom scroll view ah can i so i could even so inside of here we would have a sliver list ah nice that's better true ah then we use the sliver delegates ah yeah yeah yeah liver child delegate i think there uh and i think we can build them right there was something in my mind martha did there a fantastic video about that when automatic keeper live render abstract constructor sliver child builder delegate which is delegate that uses a builder callback or child which is delegated that explicit list of children so we can use the builder because we don't know the amount of things so something like that and then inside of here we have all the possibilities like builder which then gets some things inside no what is it that you need you get a builder and the builder is a nullable index builder which is a function of builder context and index okay web builder which is contacts and index and should return something no [Music] ah the first one is like this and then we return something like a container and instead of a container we use this text widget here and i think that's it and we removed this for loop and lecture [Music] gets now ah of course we get now from the delegate context where does he get the index from that's a good question [Music] so if we have the builder what else can we have the child count and the child count is lecture folder dot spreadsheets dot length of course so and now i know that we have the lecture folder spreadsheets and here can i access the index now that and of course we have to create a variable for that and i think we can reuse that inside i know we cannot okay so that's fair enough good so it took a while actually longer than i would expect it because it's not too difficult but hey we have our sliver it's not looking perfect yet but we'll come closer to it but now what we can do instead of returning this text we can now do again what we had before and i would change that to a element so and we return here a list tile with our title that we had before and with an on tab that we also had already so on tab and here we navigate now again so hopefully i have it still in my copy paste thingy so spread operator file we have something with home page ah i'm unlucky okay so home page dot navigate was it home page or home page home page dot uh do i have to import it first yep dot navigate to we get the contacts inside and the spreadsheet id which we will get from the lecture spreadsheet index dot id so we have the tab now we can have also a trailing where we had the icon inside i can start error right this one and that's it and thanks to you cass i think we managed it to come back again so it looks already like we had it before but this time with uh yeah more on top of it it doesn't navigate which is a bit sad so where's the reason on tap gesture detector blah blah blah unimplementing handling of missing static target okay let's quickly kill that once more and restart nice but this is a cool trick i i really have uh to learn that because that is an amazing trick to to get things done so we get our elements can i click it now yeah and we get our hindi or we get our hello world in english so the only downside at the moment is this flush flash card app folder that nobody needs so what i will do is i this is something perfect for our service because what we need is to remove that folder from the list here so this folder where folder and where element the element element.name or title is it is equal to as unequal to what's the name flashcard flashcard so how to start and it should remove it perfect so it was the easiest way to remove it probably this will be not the best solution okay uh hey entity ready how are you today so we have that now sadly i cannot scroll it i'm not completely sure if it is a problem with the mac os but why can i not scroll it i think the sliver should be scrollable no did i make something wrong so we have this sliver app bar we have this custom scroll view why is the custom scroll view not scrolling that's a weird question custom scroll view not scrolling instead of the sliver huh a sliver box to achieve what i needed i didn't okay sliver fill remaining that is true aniket i created already a video and uh that will come i think in three weeks i hope uh it should be ready already the where i talk about server client architecture and flat and dart where we talk about dart shelf package and how to use it and this will be the beginning of a series where i try to be a bit more backhand specific with dart so we will talk about things like web sockets shelf conduct or conduit is the name and things like that and we will try to implement them and i will explain use cases where these things are needed but it will be a future project because we have a bit more to do it i don't know if dark before breakfast but it's enjoyable so far that's good that's a good point because my coffee is empty and i didn't have breakfast either but we will come to that so but we have a problem right we cannot scroll at the moment which is very sad and great i got a project allocated hey congratulations that's always good and the other part what if the domain is based on a different language that is i don't know don't worry um the programming languages are usually pretty com similar to each other and you will well if you are if you are dedicated to it and you want to learn it you will be very fast at getting up to speed pretty soon i promise you okay so this custom scroll view is not scrollable for me and the reason we have the sliver list can it be that this liver list makes us a problem i'm not sure so we have this sliver list if the children have a fixed extent the main axis consider using rather than sliverless because sliver does not need to perform layout on its children to obtain the extent in the main axis and therefore more efficient places multiple box children in a linear linear array along the main axis is forced to the cross axis extent okay it's scroll offset by dead recognition yeah it's morning in the germany as you can see it's eight o'clock in the morning still cannot scroll it that's but what i can imagine could it be that this parts inside ah it is scrollable [Laughter] okay so because i'm on a mac os i cannot scroll by um by tapping and moving i have to scroll with the scroll wheel that is working okay yeah true for our difference you can see that's difficult okay so we have that we are scrollable we can select everything inside i'm pretty happy with the solution now so what we can do is we implement the feature now um folder headline no folder are now visible on top of the files created a small tree and added the lessons below what is that today so good so we have all of that running we can go to our github i think i can take off this one because we get now the folder structure with it now let's see if our build pipeline runs through and on the other side we need to write some tests still so if you remember i talked already that we have currently here a lot of going on without tests so this whole part here has not a single tests which my coworkers would hate me for so let's try to create a test for this file service here so create a folder inside of the domain which is the file service test part and with command shift t you usually can jump between these why is it not working because i wrongly named it the file service so now it's possible so if the file name is matching besides of the test behind of here intellij is possible to identify the file that you want to test okay so did someone listen from the last time so how do we do that first we need a main method right so main returns voyage and inside of the main method we have a group and here we have a group description and inside of here we have a test so this is how the usual workflow is i just made it a bit quicker so and now it says me that i have to import the flutter test library and we are done we can start cool so is it true that in germany developers get paid high yeah that's true the reason is we don't have enough and the problem is also that we are from digitalization space pretty far behind at the moment but we don't get as high paid as australia new zealand america england so if you are a freelance developer and search for really big money go to switzerland england new zealand australia and america because they get paid even higher j michael hi so just for your info i created these live templates inside of intellij if you remember the last time for our uh dart testing part that i'm getting a bit faster here as what i could see is that a semicolon is missing at the end which always led to errors so i if you remember from the last time this is just a quick fix that i recommend you so apply got it done okay yes cost of living is very high also in germany so only you get a lot of money you pay also a lot good so now we have to say first which method we want to test and we want to create again our final subject this is the method under test which is file services so you can create that and probably file aha here we have the wrong name i'll keep it in sync with the file name right import so is this now a good testable class i ask you and you remember the last time when we talked about tests i said something like we need to make dependency injection and as you can see we have now a dependency to the google drive repository and you know what that means we cannot leave it like that because if we have these dependencies we cannot test it properly because we cannot mock this google drive repository so what can we do to change that we have to create a constructor for this file and inside of here we have to pass in the sheet repository this don't sheet a repo and now instead of passing it in here inside we know just that we have this final sheet repo and it is required now we could use this but if as you know we are not working with a material or flutter constructor here so we cannot use that here but because this is unnullable we know that we have to provide it so all our services that are using this file service will complain now and if we take a look where it is used it is not here but in the lesson screen here we have now to pass in the google drive repository as a new instance because this one is not dependent on anything it's no problem it's just that you know that because this is how constructor dependency injection works and decouples the things and the good thing is now we are able to create these service with our own google drive repository and we did that already in our flash card service and we did that with this generated mox thing if you remember we use mokito for that and we need the same thing here now but with the name of the google drive repo so does someone remember why we need these things here and how does that work together in the meantime i can generate with flutter build up do we have the yeah we have everything here perfect so we can let the build runner run and in the meantime i put on some jacket because may code slowly getting in the winter time would reveal a lot so paul and or autumn is the right name i think good and this has running through and as we can see we created this mox file here and this mox file we can now use wherever we are and i use the wrong name and this mock g drive file can be uh should be possible to use actually how do we do it here mob sheet we have to create it first okay that's that's no biggie we know that so on the other side i can just do it this way i guess no why not function mock g drive is not defined correcting the name mock g drive people create class mock g drive for airport [Music] i'm a bit surprised okay so can i do it here no also not a paw equals this one [Music] now i'm pretty sure that this is correct now i'm a bit confused where is the problem this does not maybe not inside of our do i have to import something that i forgot mokkito maybe no that's not it ah the import of this mox is missing but why he i was actually expecting that he understands that and imports it himself miles service test mods.dart okay now he's happy that was a lot of work so taking that put that here remove that put that up here great stuff i'll put that below and then we can have the group name which is file service up and now we talk about the tests when something happens then something happens good and inside of here we can now call our subject what do we have for a method that we want to test we want to test for example the get possible lectures okay and now we can test all the different things that we do at the moment and we can pass in this uh that is the wrong feature or file service the sheet adds just wrongly named this is of course the g drive report so way better okay so with this g drive repo we have now the power to rename to change the behavior on what happens here inside so i create a method for that a variable and why do i do that because what i can do i can use the mokito method when and inside of here i can say okay when the mock g drive repo has been called with the method i don't know what we need i think we need to get files and folders then we return something else so then for example i think we use is it here or here then answer uh to be honest this tab nine is only starts to confuse me more than it helps me sadly so yeah then answers and i think i have to import first good then answers with something and this is the real invocation that i can make this as in chronos and now i can answer with whatever i need so for example an empty list in my my case good so if this is an empty list then we answer when we call this method here from the mock g drive repository inside of the file service that is currently under test when we go here inside this happens exactly at this point in time so if we call this method then we have to return something specific and if we return nothing what would happen is that we receive an empty list so that would be our assumption at the moment so we expect that if this is called thank you for the subscription richard welcome to our channel so if this is coming we expect that an empty list comes through thank you darli great to have you so when empty when the service or when the google drive e drive returns thank you sandeep so many subscribers at the moment what happened oh geez we got tons of subscribers and somehow my system only understood that now so hey and welcome everyone sorry that i didn't get your information earlier actually when g drive returns an empty list then the service returns also an empty list hey hyatt great to have you what a weird situation so and if we run now these tests let's have a look what happens so we get a failing because we got an we expected an empty list but we got an instance of a future of something so which is not a terrible which is true so we have to await of course let that run again perfect and our first test is green so what we can also do is we can run it with coverage hey so and if we run it with coverage and jump into the file we can see now this green elements on the left side and it shows us that our test had to hit this section at least once so sadly the update of this doesn't work that nicely but at least this gives us an indication on how much test coverage we have at the moment so you can also check that here on the side there you can see all the test coverages that intellij has at the moment so we see that the csv reader is 100 tested the file service 66 tested and flash card service is not tested at all this is of course not a perfect situation so if you have 100 test coverage doesn't mean necessarily that you have the perfect um tested code and everything but it gives you an indication that you have tested at least some parts of the app okay so now we have here that nice little name we can make that small because that happened already so now let's have a look what happens if we really return something so when the g drive returns correct values then the service should have three elements or something like that when the g drive returns a [Music] folder with one spreadsheet then return it service returns it i don't know something like that so these are all positive use cases okay so and now what we can do nearly the same as before we first mock what we want to return so let's take that again and inside of this list we need now to specify a bit more so what would this return in general it will return a list of files so we will have a file from the start drive here so and what do we need to create this file we can pass in anything or nothing i guess so for example we need a mime type that contains for example spreadsheet right because we learned that and we have a title that would be i don't know um lesson one so and also what we have is the file with the mime type folder with the title learning english [Music] now and if we run that we would expect when this is the service returns us then we expect that if we wait for the subject to get us the possible lectures that we receive something else than an empty list but i will enter empty list anyway because i want to see hey how does our method now behaves in general so we run the whole thing and we got our issue so what happens is we received actually a value even though that we tell our system hey you shouldn't get any value at all so we receive a lecture folder element which longer than expected okay so interesting we get one folder and what we expect actually is that we not only get one folder with a lecture folder we want one that contains a lecture folder with a what does it has as a name i think and the name should be learning english and a spreadsheet that contains something let's have a look if this works it could be that we have to make a deep equal or something like that but we will have a look okay so we receive an instance of lecture but something is wrong okay so now i could go further and further and further but let's have a look and make and call here the first folder that we receive hey pj nice to see you and this first folder should be this one uh isn't ah okay so what we can do is taking that outside call it result look so and the result will be this so and then we can ask for the first one so if we run that it's complaining because we still get the instance of a folder but what we can say is that the name should be learning english at least that is for sure and if not we get a different problem so this is okay but now we have to also check if the spreadsheet that is containing and let's say that the length is for now one so this would be our expection right we want that there is something inside and this also is true so the next thing would be okay let's have the spreadsheets first and now we can ask for the name again and this needs to be lesson one right and with that we make sure that these things are true to these two piles and that seems to work already so if we go now back we can see that um we run through all of that and as i said the update is not correct because now we go through the different spreadsheets and it found the right thing because it added the lecture folder to it so probably if i would restart everything then the files would be shown correctly okay so last step let's commit that that we have our first tests running also that's of course not a test for everything but it helps us to keep some test coverage up and high that we at least check for some of the parts tested filed services and made it more stable good but with that in mind the last five minutes i want to use the time because now let's make this mr green and maybe merge it today because i was a bit sad that we cannot do that so long and if my co-worker in my company would get such an mr i would get something on my feet i guess because 23 files is quite a lot for one mr but today i'm a solo dev i can do whatever i want right so no problems at all okay so if we look here inside we get that the flutter analyzer complains about constant constructors in the main.dart have a look there main.dart aha so we forgot to have a const here and this is not possible anymore or isn't the class okay that was weird good so fixed linting issue good and now let's have a quick code review even though that i have created most of the stuff myself before i give it to someone else to re review the code so like yourself i would always have a quick sanity check if everything for myself works correctly with that so what did we do it seems that we updated the dart yaml file and the reason for that is that we have this build runner now implemented so that makes sense it's viewed then we get ignored the dot mox files so whenever you want to create these things for yourself you will have to do this mock dot dart so we have also viewed this the analyzes options so we excluded them from the analyzer so whenever there something happens we don't want to know about it also good uh these are some debugging i think this has just to do with creating the flutter release and also upgrading to the newest version of dart so we can ignore these for fine these are the credentials to call with the flashcard user so that we get the information from our google drive that's okay we have the fileservice.dart this is the new one that we have created to get the spreadsheets and the files so that's does it look good let's have a look we have the files we get them from the repository we ask for spreadsheets we ask for folders besides of the flashcart app we map through them and oh we have here still a t that is a bad thing so we don't want to have that so what is t t in our case is lecture folder so this is our result at the end that we want to return so we can just call it result i guess and with that we are a bit cleaner good do we have anything else before i start to commit it so we have this we returned that that's okay we have the flashcard service.dart we asked the entry list we get our headline which is always the first entry and after that we ask for just until one thousand so the elections cannot be longer than one thousand but i think that's also good for now we have file information.dart okay so we improved the models from our domain layer we changed the name of home page to i know we changed the first page that we show in our app to the lesson selector page okay then we have our out repo to connect with the registered http client via the spreadsheets if you remember so also that works we have the google drive repository that is accent accessing now the files and folders in it we wait for it we call for the files and return them good so we have the list of lists yeah this is the repository of sheets exactly so there we receive something weird more or less that we have to transpile that works also already so the home page screen has changed quite a lot because we have now these questions that we receive and also we removed some elevations i think that's all good okay let's select the screen yeah that is the small screen that we created at the end with the custom scroll view and the scroll widgets nice nice nice thank you cass once more for your help here some debugger debugger mac os pod file more interesting for the flutter upgrade i guess as you can see the most of the line changes comes also from the pubspec.log so that's all good then we have the tests where we write some tests that's also fine and we have the last test cool so all in all i would approve that i cannot approve my own one so maybe one of you has the time to prove myself and if not i would merge it then anyways so the build pipeline is also green as we can see all checks have passed and with that i would say let's merge that i don't squash it anymore that is the thing that i did beforehand what we could do is rebasing it but i think that doesn't make a difference at the moment okay so we pushed and rebased and with that we have our changes on top and things that we can do to the in the next live stream would be improving our readme.md having some about me things release maybe the first version now that we have some things like that and yeah i think that sounds already like a very good solution if you have the time please feel free to add some more lessons to it and add maybe also more knowledge that you have because it would be great if our app would be then released in the app store and we can play a bit around with it as a team cool if you have questions as always let me know right down in the comments below we have tomorrow the next live stream or today i'm not sure yet we have come pretty far i guess ah now i forgot about that no it's now is tea inside so okay that was of course a mistake from my side so we get the newest version and i know i know not a good thing but what i will do is i will rename that to result and have a pr review here rename of here for better readability and now i will do bad things then i will horse push yay that was not even necessary to make a force push it was just a push ah well anyway so we have all these things we have pushed it we are on a pretty good stage so where was i i wanted to say thank you for watching it was a very nice session this morning i learned a lot and i think we have implemented a lot with our sliver list we have now the possibility to select our different things i'm not sure if we want to keep that header here or if we want to reeve design the things and i think we should because at the moment it's a bit design less we can navigate to the flash card implementation we see already the text which can be changed later we have now the possibility to open up our cards and the next point would be also to have some statistics like how much did i know and also would be interesting to implement the feature of uh knowing in which level you know these cards right so being in box one or five okay that's it for today or for now thank you very much for watching i hope we see you soon and yeah feel free to like this video and subscribe to our channel if you haven't yet bye everyone oh finding the button you almost welcome everyone you

Channel: Flutter Explained

Views: 552

Keywords: Flutter, flutter, flutter app development, flutter tutorial, flutter tutorial for beginners, flutter course, flutter app development tutorial, flutter explained, flutter widgets, flutter app, flutter dart, flutter for beginners, app development, flutter android, flutter android studio, flutter ui design, android development, flutter ui, flutter developers, mobile development, development, learn flutter development, flutter development story, Open Source

Id: JApcZtoFomo

Length: 127min 56sec (7676 seconds)

Published: Sat Oct 02 2021