Sunday Flutter Development - Q / A and some calm coding time in Flutter & Dart

do [Music] me soundcheck test123 one two three some sound is working water is there coffee is also there sound is good perfect nice to hear so i see already the difficult questions directly start at the beginning if flutter supports uwp and that's a good question i have no idea probably we have to take a look into the flutter repository and look for the issue but i'm pretty sure they're working on that hey from leipzig nice it's close to my hometown where i've been born reichenbach in forkland if this say something to you so just some small things to prepare as always you know me there is no technical difficulty it's not my stream that works cool scene change works too okay i think we can start right okay so i had some ideas since last week where we had our q a session and it was well a lot of you had a lot of good questions and it was very well taken i thought um what we could do and i asked several questions this week inside of youtube with the questionnaire possibility and a lot of you asked me what is dart cohen's so i thought i will have a look into it what i programmed there what the project is about and maybe also talk a little bit about server architecture because martha was asking me several questions in the last couple of days that were related to a server a client server architecture and she couldn't really imagine how everything works together so i thought maybe this would be also a good topic and that was my plan for today maybe you have better ideas or questions and as you know already i am usually not doing these live streams as i know everything and you well just get input from me but you can ask me questions i tried to answer them as good as possible find with you together solutions and then try to solve them all right cool so if there are no further questions i would directly jump into uh some code or maybe some other stuff as you see i'm a bit prepared today look at that i have already an open chat window with all your messages and probably you see it twice because i don't have a second monitor for them but what's good about that is i will have that in the background mostly that i can send you quickly chat messages as fast as possible so that if i have like a link to some some github repository or anything then i can send it to you right away without any downtime good so let's see dart cohen's i talked about them uh here we go and dart cohen's is a specific cohen and this doesn't help you but cohen's are tools where you can learn programming in a test driven development way that means i have prepared already in the lib folder some essence or chapter ones chapter two and you can learn how to write tests and also how to write code in dart and native language and with that you learn in a playful way how the language is working at the moment we only have two chapters because i didn't work too much in that project but what i want to do today is some upgrade and like packages upgrading maybe take a look onto if we have some bugs open and also i had today a very interesting look into conduit which is a package that is from aqueduct so the new fork of aqueduct if you know that so that is if you go to github conduit which is a package that is then you see it's from this guy i'm not completely sure let's have a look not sure anymore it was an own website i think conduit dot io or something no oh yeah this one can't do it so and here inside i found a very interesting way how you can work with reflections because my dart cohens are working mostly with reflections and if this doesn't say anything to you that means i check a song a file in dart and pick the methods that are inside and let them run inside of a dart program and there is a cool possibility and that would be amazing you sound twice in the background oh that's bad yeah because i have this one open sorry for that good point thank you very much clones para so okay now i have the chat also open and can read i think that's also very useful make it a bit bigger cool good but that was very interesting because if we take a look into the github repository and i'm quite sure yep perfect so this is that one i can share the link here in the chat because well we have it and now here inside i found something inside of the pull request that um reflectable pull request here from jq frost and the interesting part here is that he is using a package to reflect the classes and methods inside of the dart package which i found very intriguing because that could maybe um solve some headache that i had it the first time on the other hand i don't know if it makes sense to refactor at the moment inside of dart cohen's because it works right so never change a running system in that case okay so what was interesting about these dark coats if you take a look there we had the possibility to just write dart bin main.dart and we had the possibility to directly write some code inside and instead of showing you this video which is quite boring let's have a look how this looks inside of our project so i checked that out and i can maybe share the link too not this one more this one and inside of here you will find all the different uh files as always and then you can check that out inside of your android studio like i did and inside of here we want now to execute dart bin main.dart and if we wait a second this line appears so think about chapter 1 asserts there is a cross cohen assert has destroyed your karma if i switch now to the not the dart i want to go to the lips and now here we can see different tests running so assert true equals false change something so and the idea is that you can now change that to true and inside of the terminal you get now a check mark with your awareness that this has been solved you understood how to work with tests because this is of course very important if you want to work test driven in this case and then you get some ideas of that of course you can always cheat and write everywhere true but this is not the solution right you want to learn something this is if you really are want to learn more about this language and getting a bit deeper with the code inside but what i did under or found out is a bit odd because inside of my terminal we don't see any color colors anymore so i thought maybe this is just a problem of the terminal of android studio so i navigated to android studio project dart currents and also here i executed dart bin main.dart and also here it is missing my connection is bad oh that would be terrible how could i check that um i quickly double check everything so keep what is in let me quickly check see if i'm live connection youtube tells me i have a very stable connection which is all pr already promising if this doesn't work out i'm very sorry i will have that now a bit in the eye maybe something will change there so maybe i can do that a bit smaller so put it to the side and let's see in the worst case i have to restart the router and you know that as always connection troubles and issues with uh with youtube studio is something of the kind of the whole topic here okay but back to that so i thought maybe we start by giving this some colors and upgraded packages that it uses behind so how do we do that we can quickly easily do that actually we go to the pubspec.jammel and just click on pub outdated to see if we can upgrade all the packages that we have here okay let's get them good got the 13 dependencies and now let's say updated yeah now and here we see all the direct dependencies and with the possible resolvable so where we can upgrade to and if there is anything that depends on that and couldn't upgrade but it looks very good so the easiest way would be to run our pub upgrade and usually all the packages should be now higher if this is possible let's see that there happened something so new versions are available resolving aviable available have newer incompatible ah or incompatible with dependency constraints so the question is now which dependency is not possible so let's try to run this one once more and see which version has a problem here hmm so ansi color is not the problem it is resolvable the test dependency shouldn't be also a problem resolvable to two that's weird so maybe we have to run chart upgrade with the major versions so when you click the number so um i read right now the question from the best you are telling you're asking if you select an ms word some text so you mean if you go for example docs new inside a google doc and you write something and select that one then you will see somewhere probably how much letters this one has right uh probably it doesn't work here okay so do i have microsoft word installed with a piece of luck [Music] wow word is so happy so if i enter here something i select the word and i don't see anything i see one of one word maybe this one so characters with no spaces this is what you want i guess right so what i would do is i would check for the selected command i think there should be something like flutter select text callback or something handle changes to the text field supply unchanged but this is unchanged is of course if you write something inside of it and i think you will need the selectable text class probably widget displays a string of text with a single style the string might break across okay but i guess this one is selectable and hopefully touches event use callback of on tab so i would use this widget here the selectable text and after that i would recognize the on tab function and then on the on tab you can do something and in your case you would probably get the value out of the text controller or out of the text itself so you can have a variable with a stateful widget here and if you press the on tab you count the numbers of the letters which should be fairly simple to be honest so i guess that should already solve your problem hopefully so there's always if i live stream everything gets hot i i should just yeah exactly with string dot length perfect so you can do that with the touchable event here cool thank you crypto tech geek sorry cool back to our issue so we wanted to upgrade and it seemed changed to constraints so we have the watcher now on version one and ansi colors on version two have a look yep looks good the question is now why was path not upgraded so what i did now is if i i have installed a plugin so i can make a command left click on the package and hop directly to the path in pub.dev so in that case directly to the package and what i want to see is where is the difference between the version that i have installed 1.6 and the newest version and if i see that correctly we have now null safety support and the question is now is my project ready for nile safety and maybe this is the first step where i can have a look into and see if we can migrate that quickly and probably you know that better than me but the command for that is dart migration i guess or migrate so let's see dot migrate null safety so we are here and we want to migrate our package so most of the changes blah blah and i think there is a tool for it yep dart migrate so let's see if we can do that dot migrate so it's analyzing the project that we are currently in and there are some suggestion paths so now it opens up the web browser with the migrations and the cool thing about this view is now that i can select the different cohen runners and stuff and it will show me where he tried to add a question mark or an exclamation mark so a question mark is that the type can be null so for example this one can never be null because we directly initialize it so it will never be null but on the other side there are also parts that can be null if they are not getting initialized and the exclamation mark means that at this specific location i as a developer but i'm very certain or more sure than the start compiler that this level that there is something existent so let's head quickly over and i think there shouldn't be too much so var has changed to dynamic your answer hmm i think dynamic is correct so we can migrate that that's okay and i see here right now that there is only two var declarations that change to dynamic and this is just necessary because the your answer is used through the whole application at the moment just to give the user an info that there is your answer that needs to be changed and it can be a string but it can be also something else it should just be a placeholder for the users okay inside of the tests we actually don't really need them it's just a copy paste thing and they should work okay with all that we can apply the migration we say yes and what happens now is these two lines have been changed now inside of our project if i go here and switch over to you see already there are a lot of commit changes but if i jump here we have now the dynamic inside back to our terminal we see migrated eight files and is there anything else that we have to do i think not just commit the whole thing so what i will do is create a new branch ah thank you yes clones that would be if i have the applied changes sorry i have a small delay between the connections not sure why but um we have to deal with it i also checked already inside of the youtube change settings but couldn't change there anything but i hope that's okay so upgrade process what i do is currently i create a github branch just where i put all the stuff inside so that i can now make multiple commits to it so what we did is um uh refactoring where i did the upgrade no we did what did we do we upgraded to null safety right yep so version upgrade and null safety and null safety good so we can review that so what do we have the pub spec has been edited good should be done commit review still problems unused the value of local variable double quote string aha yeah but we want that right so this is actually nothing that we want to check how can we make sure also i think we can write some tests i think about it because if i solve now the asserts and i would commit that i would fail which uh which would be bad because i i'm not allowed to solve all the tests maybe it's something to think about um but with them i will keep them and commit and commit good and push and now to the next phase where we wanted to upgrade the packages once more so let's see we may pop outdated i think this time we will get some more possibilities hopefully let's see if we run that command once more because now we are in null safety so we have maybe the option to upgrade everything no interesting why is he not upgrading the path and also the dev dependencies are not upgraded so what i will try is i want to just use this command here let's see if we can install that one buffer pub upgrade path no dependency changed hmm that's really odd it doesn't really matter maybe because ah it's not a main version sure so the reason is because yes it's getting highlighted as yellowish and that i can upgrade but what it is not it installs behind the scenes a 1.8 version the reason is we only fixated the major version but we actually also want to upgrade this version in order to fulfill the yellowish thing from pendant because the analyzes object that we currently use is pendentic which is very very specific that you need to upgrade all the packages as soon as possible so because it is so picky we have to be picky as well in this area so let's see here we have pandentek i think we can also upgrade that to one eleven one and the test framework and this is a good one i have no idea it's one seventy twelve so let's head over and upgrade that so and with these changes everything should still work exactly the same so if i run this we have that fantastic we can go to our file chapter one and change from two to true so what do we see yeah green and red perfect so the code is still works as expected the only downside that i see at the moment is that we don't have any colors and this is somehow weird because we use a package for that so we change that back and i think we don't want to change here anything inside of our repository but we want to commit our pubspec dot jammel so this is a dependency dependency upgraded all file dependencies fair enough so this should be the first step where we upgraded everything so now i'm still a bit confused so that means the ansi color package behaves weird so out of some reasons we cannot color our code anymore up to default i think that's fine with the null safety so we have used the ansi pen dot dot white and bold true and it tells me that it colors directly you can call the x term is it maybe not possible for the default terminal to add ansi color codes to your log messages easily to disable in production such set color disable true do i have that somewhere no hmm interesting so let's head over to the github repository and check out if there is an issue documentation not working on ios okay we don't avoid as global state okay not really a problem it should work according to this you can call x term with the index listed in the rainbow below to show the rainbow on your terminal pub run examples okay so if i go to this package and download it i can run it and it should run the example okay let's try that because if it is just me or is it a package that don't work for me so we can see the difference here so let's clone this package quickly this window so and if i wrote read this correctly blah blah blah x term and we want to run this whole part run pubget of course enable dart support to pub get and run could not find exam yeah of course it's 1s okay as we can see it works hmm that's sad what did we do pub run example dodge do you think that could be the difference because we don't run it with pub run pop run makes as a difference no not really where you can find flutter freelance jobs actually everywhere i hear it in hamburg in germany for example they search a lot of people munich is searching crazy flutter developers especially in the startup scene there are a lot of people who are working with flutter at the moment also what i could say you is that bmw at the moment is searching for flutter people so if you are well knowledgeable i think you will find there something it's not too difficult actually or at least i guess that i don't know how it is in different countries i just know it for germany at the moment i know in general that flutter is one of the most ambitious projects where a lot of people are standing behind and slowly more and more companies taking the advantage and want to use it so the question is now why is this working and mine not so probably because we are working inside of pan reset white extern my guess why it is not working is that we are working inside of um so-called isolates so because what we do is we spawn always a new instance in our dart cohen's runner and these printers thinking about blah blah blah and print create symbol has expanded your awareness oh no no this is the pen and we color this pen and it's always a new one hmm really sad why is it not working so we spawned this one and while this is her blah blah so can i try as a very basic example just print and we take just this ansi color this pen here for example now let's do it one line before and we say pen dot dot color no green hold true ah we have that already we just need to say what do we have to say ah just pen and then the wording that we need hello world and pen is ansi pen for the foreground tree depend instance as a function such as pasmel is the same as pen point right message ah could it be that we don't even need to print the whole thing anymore so maybe this has changed in the um in the last couple of turns so there is something red at this front here and of course now i've done stupid stuff we just wanted to have here this and we want to have it here so instead of having the print we say pen and give here something like hello world let's run it and watch us watching thinking about first chapter watchers watching thinking about runnable chapters runnable chapters instances is error manager spawns watcher that's odd so we run this main and here inside we have this manager spawn so we create our own instances and then we run the dart code runner inside of it and we say that the asserts are enabled print test debug watches watching and let's try it here with the ansi pen [Music] cannot do that hmm did i get now the hey abby shake welcome to our channel so and i get failed so we don't get the color either do i see the no i even don't see what is wrong i ah because this is not printed probably so i have to print that yeah so now we have hello world but the color is still not there is it here ah here it works okay great so that means that the color is really a problem with the instance that of course means that we don't have a chance to do it i guess why is that the case that's really sad actually so what do we do here we watch we have our own process our own process adds a new dart instance we could have that also with pub run and we are running this part so probably if i run only the dart cohen so dart this is bin dart cohen's runner dot dart ah here we get the colors okay and here's everything green ah because we don't have activated the esters of course now okay so if i would enable the asserts here that should be possible so we go here and say enable asserts now it crashed okay huh interesting and sad why is that the case and how could i avoid that and why did it work in the first place hey nilesh nice to see you how are you hope you are well i had a good time so inside of my spawn they are getting revoked question is now is this a real issue or can we have it without colors i i like the idea to have it with colors main.dart hmm really sad path relative path absolute process manager yeah everything good again had a lot of troubles in the last couple of months but now slowly everything calms down and comes to an end you know all the loose strings are getting together and finally we have everything at place where we need it so we have to pen success [Music] is there an alternative to this nc pen package maybe this is working color to your terminal locks they call it now ansi color it has likes okay do i it is on the color that i use right here [Music] easy disable for project production just set color disabled folds maybe maybe i can do that inside of here that i say okay we execute that with a false but now it will be removed in future releases in favor of color disabled okay let's just try that quickly ah okay so if i explicitly revoked ah that's good okay perfect so it seems that if i run that now it doesn't work as i want to but if i remove that and say main dart now the color is there perfect great stuff so now we get the green color the red color and everything is now better because the reason i guess is that inside of my yeah perfect look at that great stuff because inside of my uh spawns that i create so a spawn is a whole new flutter instance a new no sorry not flutter a new dart instance where you run isolates and which waits for your user input it seems that this color disabled flag somehow automatically pushed to true probably because it thinks it runs in sorry it runs in production which it clearly doesn't so and this one gets disabled um what did i read use it uses unzi color disabled for that reason okay so we can replace that and we are happy again good here everything works still so what we can do is for example change that and have the real value on two and we get the next cohen fixed great stuff so turn everything back that we don't change too much get rollback go the main.dart that was just a test where we wanted to see if everything works which it does so this one is the only difference that we had just quickly double checking i close that one and start it again yeah good so i will change at this change even though that it has nothing to do with the package upgrade but just add something to it so we got a few feature together and inside of this feature we brought back the color or it's more a bug fix right to our cohen dart coins good so and now i would love if our tests would be green at the moment and let's see what they say and probably i just copied over the tests and my idea would be now to have a build pipeline that is running every time and fails whenever we've solved one of these methods so that would mean if we have here the darts cohen subject cohen about the service froze assertion error ah perfect i started with that already so if this one is now true and i let this test run we'll get it in red is that correct the past makes thought about everything i'm very proud of him perfect stuff but maybe we can have a look into how we create a github action pipeline that will run automatically whenever we commit something to this main branch to see if our project is still running okay so how would we do that by the way if you have any questions or if i talk about something different please let me know you have no idea what i'm doing you're perfect so i'm not doing actually flutter what i did i have an old project the dart cohens and there you can learn dart so writing tests and solve them so for example you go here inside you run in your terminal the dart command and what you can see now is everything so this test has been fold and now you can go into the project and solve the test save the file and in the meantime the um the terminal is updating automatically so if i move this one for example to the right side and have on the left side my terminal or my workspace i can now solve all these problems so for example hey this is two okay cool i've solved this issue so let me think about this one is a string a number hmm how could i solve that well i could solve it by adding here a two which is a bit boring but what would be if i say something like pars int or i think it's in parse or something yeah so input parse we add the string so expected value and if i save now hey it's also green now so i learned something about the language and step by step i'm coming further so now it's telling me okay uh cohen entered value succeed so it tells me okay i have done it so if i copy that over we are now in the next chapter and as you see you completed the chapter one successful thinking about chapter two okay now i as a good student go to chapter two can have a look here again and solve these puzzles more or less and with that step by step you get better in dart and my idea is to add here more and more of these chapters this is not really my idea this is an idea that comes from the good old ruby on rails i think they started with these cohens the first time so if we have a look quickly i added that to the readme so if we go to the readmemd you can see that down here in the special things we have the butler mac that was the first idea where i saw the dart cohens already but he was not that advanced that it automatically run the tests all the time so but what i wanted to do is actually copy over some of his tests but as you see in the project itself there is currently not so much done so the next idea was to go back from matthew and take the idea from the ruby on rails people so for example python oh it was python okay sorry for that was python so the python people did it exactly like i did now so think about this xyz give some of the examples with green ticks and red ticks and you can think about it and then you can solve the enlightenment more or less and they did it also with reflections and everything like that so if we go to the cohen's you see they have a lot of different chapters and there would be the idea that we say okay about asserts then we have i don't know about classes and stuff like that and then slowly regenerate their project because inside of dart so if someone is completely new to dart he can start right away learns the language and i really like the idea so in the meantime i can now say and what i did today is just upgrading the packages so far and made it possible that the color is again here inside so that you have some some visualization about how everything looks like or how your tests are running at the moment so this is a dependency upgraded packages and broad back color good now i could leave a comment what exactly i did but because i work mostly alone at the moment i can merge that anyway so but what do we see we don't have currently a pipeline so we don't have github actions running so my merch request actually well i could merge it but i don't know if it is actually valid are all tests they're running is the app still correct and stuff like that so what i could do or want to do is now set up a github action and if you have never heard something about ci cd i would recommend you i have created a video about that so a very small brief introduction into code magic versus github actions and these github actions are an automated workflow that runs whenever a trigger is created so for example you push to a specific branch suddenly your build pipeline is running you create a merge request your build pipeline is running you want to be sure that your tests are running inside of that you want to make sure that your application builds still and is still executable inside of these github actions and stuff like that and if you have a flutter project for example what you can do is connect it with google play and apple play sorry apple store and the good thing about these github workflows is that after you push so for example you merge one of your merge requests into main branch suddenly it starts this build pipeline and pushes everything up to the google developer console which brings me to the point that maybe a video about google developer console would be maybe a very interesting point i have to write that up some advice on how to practice in dart and flutter and how to be good in programming in general very well questioned and very good put together because what i like about your question is you don't ask about only flutter because flutter is just the framework it will not help you if you only know flutter so what i recommend you and this is how i learned flutter or how i learned in general programming because in my old days i worked together with [Music] what was the language it was horrible java site java site prime phase was the framework for it what was the name let me quickly take a look i hope they still do it prime phase and they did it with jst jsf yeah java server side framework still very popular and the framework itself is great so prime phase is really really great it looks amazing actually i think you can do a lot of cool stuff with it but the programming average jsf i don't like java anymore so not really my biggest fan there but what i did is i was able to try a lot of things inside of it so i i created a little elevator tool and i had a lot of co-workers and also some people that i could always ask questions so when i was in the study time i had a possibility to learn from them so asking questions is a main part to learn a language or to learn in general something about programming because inside of the study you usually get like paper and you have to write code and you learn error messages from scratch but none of that really helps you in the real world you will probably need to solve bugs you have to read tests you have to solve tests you have to create tests you have to get through all these struggles before you get even close to a good programmer and then still there is the gap where you have all this knowledge and you still feel like okay i'm still at the beginning because for example in javascript there's every second a new framework so what you will have to do is okay what do i actually want to learn and what can i transfer easily one example i started at sono motors this year so sonomotors.com which is a company that creates this funny car here and i'm really proud of it because it will be very green so environment friendly we are a company that drives that and i am believing in the company and not so much of the technology because we are working with react native but what i could do or what i did is i transferred my knowledge that i collected in flutter and transferred it to react native of course i knew already a lot about react native or more about react so i the transfer was pretty easy but what there's additionally to it like project structure understanding how code works seeing the different flows how to debug working with state management and all of that is very much transferable because flutter is for example declarative and also react native is declarative i learned also a lot of downsides in react native and also some downsides in flutter so you will what should i say you need to write code to get better if this makes sense uh so that was my advice i know it was a bit too much sorry for that thanks for subscribing blue eyes great to have you on the channel so who do we have next uh you can i explain about mixins not able to understand via documentation okay let's have a look dart mix-ins first let's go to the documentation and let's try to read it step by step so what do we see here mix in yup the keyword we search for that mixens our way of reusing a class's code in multiple class hierarchies to use a mixin use the with keyword followed by one or more mixer names the following example shows two classes that uses mixins so we have the classmaster we extend by something and then we have something additionally on top of that okay okay so we want to loosely couple maestro and musician with something additional so it is not only a person but it is also a musician a musical or it has the benefits of a musical if i can read that correctly to implement create a class that extends object and declare no co in the constructor unless you want your mixing to be able to use a regular class use the mixing keyword instead of class okay so we created like an object like a class actually and unless you want to be usable as a regular class which we won't but this is the good thing about dart everything is a class right so whatever you do um class is always right use the mixing keyword instead of class for example okay so let's have a basic example let's head over here to our scratch file go to dart and now we want to say we have two classes like um i don't know cyclist which is a bicycle driver and a skateboard how do you call a guy who's skateboarding a skateboarder skateboarder let's call him longboarder i'm more at the long border guy so i think that makes sense cool so we have these two and now we say they have the benefits of using the street right so we have something on the street that we want to connect with them but if you think about it a cyclist doesn't extend a a street so he's not part of the street you know they don't really are combined but maybe the street has some things like surface or that that makes this speed or something like that so we have the surface we have maybe fraction that we can calculate inside i don't know what the street has right it has a width in the worst case so double width and stuff like that so this class of a street the representation of a street is very useful for the cyclist and the long border to calculate stuff so we want to have that inside but we don't really want to mix them together because as i said you cannot say that a cyclist is a part of a street that doesn't make much of sense so there comes the mix-ins into play so if we have a mix in here we can say okay this cyclist is always combined somehow with the street and now suddenly you see that blue arrow now suddenly they are connected somehow without actually connecting that and it's very important that the cyclist doesn't show the arrow up because it is not extending it if we would extend the street so let's have this a class and extend it oh it's working exactly the same oh i'm telling stuff sorry for that but let's have a look but now we have this mix in here and with that we can head over once and this is not mixing this is with so and also this one has with street good and now we have the combination with a loose coupled part i guess so this would be my gesture and why we would need mix-its sometimes you want to restrict the types that can use a mix-in for example the mixing might depend on being able to invoke a method that the mixin doesn't define sometimes you want to restrict the types that can use a mix-in for example the mixer might depend on being able to invoke a method that the mixin doesn't define as the following example shows you can restrict a mix-ins use by using the on keyword to specify specify the required superclass on musician musical performer on musician in the pres ah crazy stuff okay so this one is the other way around you would restrict that even that extend or implement the musician class can use the mix-in musical performer makes sense because singer dancer extends musician singer dancer can use mix in musical performer okay so extends musician then he can use that one interesting so to give a bit more examples we have this now and we have a method that we can maybe implement so the street has i don't know what has a street for a method what can it do i don't know it can zing for us it doesn't make so much sense but we want to say that so it will sing can i have no okay so if this cyclist would use now the street we can execute here probably something with the string uh maestro string name master name can conduct true can conduct comes from the parents so we can just override these things okay so inside of our constructor here exactly so inside of here we can now execute stuff from the street so we could say so for example surface equals 10 and this is allowed because we have access to the street so it will not complain so if we would remove that for example it is still possible interesting but where does it go then print play piano waving hand can play piano is true can conduct is true it should override that but why doesn't it do it the maestro extends person with musical aggressive demand name master name and can conduct so this is just the override and why do we need that now specifically that use mix in so we have the two classes extend each other but we want to have it loosely coupled so that's for sure but why can i now just override that why is that a benefit ah because i have two different class hierarchies okay so let's say the cyclist and the long borders are both persons right so if you have a person and this can do something now if you extend them now you have the streets still on them so but if this one wouldn't be a person but a robot for example that we could also create now both of them still can use the mixing on top of it so and this is very important so that means this one is a different extension hierarchy so the long border is getting extended by the robot while the cyclist is a person but still both have the benefits of the street and i think i told that at the beginning good so i still understood correctly so but what i cannot do is i cannot access this stuff that is inside of the different classes here so if there is an int i don't know no let's call it bool and say is human and this one is a bull is person then we shouldn't have any access to that hopefully so if person equals true that should be perfect but if we have is robot hopefully it fails now because else it's still green ah guys are getting crazy you remember i worked in a scratch file and the problem with a scratch file is that it doesn't show the errors correctly so probably that is my issue so let's create a real main.dart let's call it main one dart at this look at that it's so much better that was stupid sorry for that it made me nervous and then i just talked and talked and going into my own grave so with that we can now i think we don't even need the main method so so why is this stuff red yeah because of non-nullible of course so this is something different can go over here some question marks will fix that ah and now we see the error so this robot is not existent anymore so if i remove now up here in the this one it's also getting red you see so that means now we have interfered in one so if i could draw that do i have a tool for that i think draw io right so draw dot io decide later if we have like a boxes right and we have person and we have robot and we would say they are all thinking so both of them are thinking right so we could say okay this one and of course they not really think the machine learning but this is an abstraction right so this is i don't know calculating calculate so they both can calculate and and now the person and the robot share this representation but now on the other side inside of person we have now this skate uh the how did i call him um cyclist the cyclist and on the robot side we have now the uh long border and as you see now if you combine these two so how do i manage that both of them have something that is in the level of calculate for example but you don't want to interfere inside of this hierarchy chain then you can create a width so a mix-in so this is our mix-in and this mix-in is now still related to both of them but has nothing to do with the rest of the upper world so you don't have to change your whole class extension hierarchy more or less and of course there are some smarts behind so that's the reason why you see all this down here because with this on and with this width you can even declare you don't want to allow it everywhere so let's say you want to like they told it with the musician because this singer dancer needs to be a musician it can be a musical performer because the music performer says it has this musician on top of it so only if you are a musician you can be a musical performer and we can do that with the mixins and with that we disable users of our class to use things they are not allowed to i would be always very careful with things like that and only use it if you have a very specific use case where it makes sense because else you overload your your programming environment and people will not necessarily understand it as easy as someone who's thinking about this stuff good i hope i didn't do it too complicated and as i said i was a bit nervous but maybe try a little bit around with this mix-ins and with classes and hierarchies and maybe learn a little bit more about how they extend each other and then it helps you i guess cool uh more eco project going forward what is eco echo ah yeah uh environment uh i will hope so yeah um i'm really really into that stuff uh because at the moment i think it is one of the biggest issues in the world right so uh and biggest threats for humankind so let's hope that we can fix that i love the content can you please explain app monetization on app stores i mean are free apps profitable uh [Music] i can give you a short intro they are profitable if you do something that people are interested if you are just putting um advertisement inside of it i guess it will not be yeah successful and profitable is also a very stretched word because usually apps don't really earn money or not at least not a lot of it so it's just a luck strikes that today is earning money if you check out the app stores usually to get listed in the app store and even high rated in the app store is a task that can take years it's really difficult to get up to the 100 best apps or newcomers or stuff like that also usually today you work together with companies that will help you to get the lever another option is of course if you do live streams or active on twitter and stuff and try to get users onto your app the issue with it is like the advertisement is not really profitable if you don't get a lot of people onto your apps you can always ask for donations that helps and i hear that this is usually a pretty good possible way to earn money but yeah i will take it on my list actually it's very interesting that i have never made a monetization video because i think there was an update in flutter 2.2 or something where we have no packages for that and is there also something for primary sorry i was just here right now so no they don't support flutter huh maybe something where we can open source a bit right okay well good fair enough so how to handle roadblocks when while learning dart and flutter that would be a fantastic question for machtap actually how do you tackle roadblocks so first of all that highly depends on yourself of course because you need to motivate yourself you need to sit in front of your computer and write code you need to be passionate understand how it works what helped me a lot at the beginning was i did tutorials that i did already once so for example i'm started with javascript and i was okay with javascript at the beginning and and learned every day something new and then i tried to solve again tutorials that i had done like i don't know three weeks ago and i did one month ago and then i don't know a year ago and the reason for that is i tried to memorize of course but on the other hand i saw how much progress i did in the meantime so if you do a tutorial and you come back three months later and you see the tutorial again and you sit there and say oh great yeah this i have understood and now i can do this and this and he makes there a mistake and oh and if you do this and this you can also learn that and this has two main advantages first of all you get this boost for yourself hey i'm getting better i understand what he's talking about but on the other side you also get the more finer nuances in between so you understand suddenly more and with that you get also a deeper understanding of the parts for example for me now i wear operators where long time a thing that i didn't use because i was always afraid of it or if cases there are two ways of writing an if statement right i had a long time troubles to use the shorter form for if so if i don't know if you know that but if you have a bool like hello and you say hey if there is an if with this hello then you return true and else you return false okay this is a very bad example but what you can do is having a string test and if this is a true then you say test equals to hello world and else it is wyoming so and hello is in this case false so now if you say that and you think okay it's very clear what is here right you have the if statement and in the university i always learned that so that was super easy to understand and suddenly javascript gave up one new level of if statements and suddenly this thing was here i was like is that good will everyone understand how this works that this one is the bullish question so the the check if this is correct or not and this one is true and this one is false it is not really speakable right you need to know that stuff you need to understand the question mark here is not as another operator or something and this double column here makes is something you know it doesn't speak to me anymore with more and more practice i suddenly understood and i saw also okay this is way more cleaner because it takes less space and you of course have to be careful that you don't wrap them too much because if you have now inside of here again a bullish algebra like i don't know uh hello equals false and say again um test equals blue or green then it's getting a little bit messy you know then after a while if you if you nest these things it doesn't really look nice anymore and it's very hard to read of course you could mix them together and stuff but just you get my point you know a lot of these things uh channeled or changed is is a bad practice and very hard to read yeah so as i said repeating is always key learning is best if you repeat it thank you for support subscribing charisma nice to see you on chain uh on the channel this is not fair i didn't get notified again you have to click on the bell icon and i have never said that in any of my videos and then you get notified usually yeah exactly ternary operators is the name thank you so much can you share templates for different ui in hub so on github actually i'm always interested that people always search templates for that stuff because well flutter does a lot of these things but if you are doing something like searching for a git login screen in flutter can do something like search like this login flutter and you will get a ton and ton of different login screens for example which are usually pretty cool to use the only thing that you have to keep in mind is your license so be sure that you always use mit license or something that has a license else you can get some issues lawsuit and stuff so holy uh nobody wants to have that the good thing is usually you get a good documentation it's easy to use you can implement it in your projects also get some ideas i know it is now a bad idea and what i also can recommend you if you search for inspiration on how to create app like flutterfolio is great in flutterfolio they all did something that you should let me think and then talk g skinner team created flutter for you for responsive design and flutter so how to work sorry not responsive design adaptive design because it's also on different machines and with that you can get here the github repository and check that out i should use that here like so and push also i don't know what have i closed now not prime faces but stuff like that and if you then still search for inspiration well you could try i don't know how good it is in the meantime i uh code pen exactly on codepen io you can search for pens and i think you can also search for flutter here where you will get some ideas on how uh flutter stuff is done like the twitter clone from mariano and stuff like that and i think i even i did some of the smaller things here let me check if i have a login somewhere good that worked your work do we have something i haven't created projects but pens yeah like my 3d flutter logo or profile card and stuff like that so you can get some inspiration here too my video legs still oh that's sad sorry for you i'm cracking i i look at the speed but youtube tells me everything is fine so difficult sorry guys huh hopefully it's getting better okay talked again a lot hey uchenna nice to see you great stuff so should we work on the github actions on our project was quite a large circle to come back to github actions but what we want to do or what the plan was at the last is that for our dart cohens dart currents exactly this ones we want to create an accent reason is we created a pull request and we want to see if the tests are still green and i don't want to do that always manually because i am a human and i make mistakes and i forget it also and i'm really bad with this so we create our own github actions and a good thing is if you have a dart project not a flutter project a dart project in this case you can just click on setup workflow here because it is for dot specified and as you see we run dart pub get dart analyze and dart test and hey this sounds exactly like the stuff that i need and what i want to do is if i push on the branches master and if i create a pull request that targets master what does that mean if we go to the pull requests once more and have a look inside of it we can see here that our branch mdw mr weber upgrade process goes into master so this is the idea so if we go back to this file we see it runs on the ubuntu it checks out the whole thing we see that dart is installed dependencies are installed we call dart pubget and after that we analyze the project and run the tests as you see this is a new file here because it's the file editor in dart in github and what's happening is it creates a new folder dot github inside of our project and inside of the workflows folder we find now this start yaml that we can call whatever we want as long as it is a yaml file and it is valid it will take it because here the name is more important for the run so what we can do is calling this test run i don't know flutter and a dart coins good then we start committing and create that i think i will not add anything here and we commit the whole thing and done so interesting enough so what happened next if we go now to the pull requests did it actually run and i'm not sure if it will now directly run the reason is it will not understand that there is a github action for that yet or it was not sure ah but it runs it immediately for the main branch which brings me to the next point i have here still the branch master which i don't like because i think it's not inclusive i think what's the name hairstyle thank you i was at the barber this week and i was regretting it a little bit because it's a bit too short but that's okay can you do something on uploading files with flutton mobile i can absolutely do that and i did that already sometimes where we use the image picker selected images from an application i think the recipe app that i did with math tab also included that we saved it even on a shared preferences but i know the live streams to watch after is always a bit tiresome so i can understand if you didn't see that yet but i can make maybe an extra video for that separately so let's have a look the analyze of the project didn't work and the reason is uh of course these things so we have to ignore that it's not possible with so if we go to our project again and have a look in the analyzes options we will have to remove some stuff unused local variable yeah invalid format for the enable experiment section what does that mean like that no um let's check analyzes options unused local variable customize static and here we go the pressing rules and i want to have that to suppress more than one rule yeah i don't want to do it in line i would do it for a whole part linda rules and is it a lintel rule maybe not an analyzer what's the reason why he's mad i don't get that completely or should i just add that here unused local variable now we remove that maybe that works nope ah now it works i think this is now um a warning instead of no an info instead of an error good analyzes or better static analyzers and the reason is remove keep unused variables cool let's push that and with that on the server we should see now the running ci hopefully actions ah here we go and as you see inside of our merge request or pull request we see now that the test run dart cohens is inside of it and now we only have to set up our build pipeline or better our github repository that this one is not mergeable until this one is run through so let's have a look and hopefully fingers crossed everything works my limb rule was correct but it needed a minus i don't think so but pedentic is deprecated really completely yeah it could be i think they used now flutter right i think was the name or flutter lint or something like that but good point uh we can also upgrade that so our tests are all passed and completed job so with that if we go back to our pull request this is the great thing we have this green check mark and we know that our code at least runs the tests and everything works with that so that means what i can do now is i can rebase and merge and we'll do that and i confirm that and with that we have done that we have a deleted branch so now the only thing that i would create is that i am not able to merge it into my uh oh before i do that i rename the master branch i think i can do that also in the settings head over to branches find here the master and rename it to main which is the correct name that we should use for branches today or for the main branch well easy enough so it's now renamed to okay got it so the question is is the workflow still working correctly and it works on master so we have to change that and we have to change it to main main start commit great stuff that works and now just the merge request change and i think uh where was it i think that was branches and i think i have to branch a protect the branch the name is main reviews no requires status check to pass before mergers i think this was the one requires signed commits status checks that are required [Music] was it a status check i'm not sure anymore if it was something different um linear atmospheric restrict to allow force pushes not in the slightest was it not a status check success failure [Music] uh what is the status okay there is none i create that for now uh it asks me for my email again i will have to quickly go to the bathroom i am back in one sec sorry for the intermediate paused hmm [Music] [Music] i have to create more pages with different texts i see where my starting stream is wrong of course thank you mino and i was on toilet what are you doing so your lindro was correct analyzer errors unused warning like this okay but it works right now i don't know it should be fine i think it was because i needed when i started the experimental one but i think you are right with the and this we should change the um pedantic package i think that would be fantastic uh you have issues with your shared preferences test taobias as the test somehow caches the changes from the previous test [Music] yeah i experienced that a lot and i read that also a lot to have the tests if they are unit tests of course and they are depending on each other you do something wrong probably you have to clean your shared preferences because what could happen is if you just initialize it once and you don't clean it it will save it on the device so on your test framework and if you cache something like that it's getting difficult also the same thing can happen if you do it in your integration tests because you work on the real device right and i have to slowly tune down a bit of music i guess so cool hello have a good day have your own good day unknown wizard great to have you here and thank you for the subscription untamed good besides of all that i think that works now and i wanted to secure this here with the status checks i status checks are required i yeah i hope this does already trick but we can try that immediately because i want to replace this pendant file and minnow do you have in mind right now what is the replacement for bandantic the package is deprecated thanks so much so instead please see package lins which is recommendation from dart team or package flutterlands okay the official lint rules wow start create blah blah blah okay cool so this would be probably the one that we want to use interesting uh was it not pascal welch who created a lint i think was the package i thought this was the beloved one is it not this one no it's also from this no no no no that was a different package order linz or something or just lint just lint it was just lint so this was from pascal welch and i think interesting so the flutter team was also responding to it and created their own set of rules fair enough i will take that one now because we have anyway a dart project rather than a real flutter project so let's install that remove penduntic in this case fair enough and with that we can push it to the limits or create a new branch for it and then push it to the limits so master will not exist anymore so we delete that one we try to fetch new stuff and i really need something for the future that's like a keyboard shortcut holder something that shows me um keyboard shortcuts for to the screen if you know a good tool that does that for me so that i can share my keyboard shortcuts with you that would be amazing so origin main we check that out and we create a new branch like mdw we replace linting rules good static analyzers are good upgraded linting rules commit and let's see if our project still runs because of course the rules has changed right yep looks all good if you press that red arrow here you restart your dart analyzer server which helps you sometimes that if you don't see errors that the errors getting displayed and also visa versa maybe you get arrows displayed and they don't make much sense then you can press that and sometimes that helps you already to clean it up cool sponsoring this time minnow you are great get 100 points this time i hope you are feeling well with it um so we have that this is the docs i want to go to my pull request that i need to create let's create it with the same name i don't mind too much and the only thing that i want to see is if the status check is now in place and sadly not i can still merge without anything interesting why is that some checks haven't completed do i need to add something here i thought that would be that actually applies to a branch named pattern branch protector yeah we want to require that's for sure and what would be build test maybe no so i guess the status checks are the ones that we find if we go to the workflow and inside of here we should have on push rubber and here's the job and the job is called build so that's the reason we find only build here now and if i head over here again and nah can i restart this one rerun refund all let's quickly head over and here we go now we cannot merge or at least we can merge but only if i'm administrator and i'm doing it with force i have not tried windows 11 actually i have my computer here and actually there would be something i would be very interested maybe this would be a cool live stream for next week sounds very optimistic actually and i see right now that the flutter logo is directly in my face all the time but i hope this doesn't bother you too much at least you didn't say anything so far which is a good sign so can i unlock that yeah move myself maybe there ah hopefully it doesn't bother you too much next time i have to keep that in mind hey ambresh nice to see you no worries tobias you are more than happy ah teardown is a good option to clean it down yeah i think windows 11 has not been released if i have that in mind but i think you can download it if you want something like that so if you are interested you can check it out already or is it released no i don't think so officially released on 5th of october at least according to yahoo microsoft is allowing here windows 11 it looks pretty sleek which i like so could be very interesting i don't like that there is more uh apps pre-installed like for example linkedin and stuff but yeah i think that's fine um could be very interesting actually let's see so if you are interested here's the side go for it i'm very good i'm very good i have a lot of fun with live streaming again and hopefully in the next couple of weeks we have some videos prepared well what that means helpfully i have some videos prepared now so there will come some new content soon to the channel that is not a short that is a real actual thing so that's pretty great oh i clicked that that was something about not too important i guess so what do we have list of buses these are just different messages done can now receive sponsorships through github sponsors don't mind it's not not now go away good with that in mind we can now create new chapters we have tests that run if the chapters are broken and if you don't know the dart code still there is now the possibility that you learn dart in a playful dart or tdd driven way and i want to also expand that to a flutter application it was very smooth cool can i make a tutorial about ci cd and flutter yeah sure do you have a platform in mind or what kind of ci cd do you interested or did you checked out already my comparison video with github actions and code magic that could help you maybe to at least give an understanding because the first five minutes i take some time to explain what are ci cds what they are for how they are built and then you can maybe yeah already relate a lot of that and now i'm a bit open what we should do next should we work further on dart cohen's are you interested or should we search another topic that we should work on do you have something in mind so we have all that no worries you're most welcome so what we can do is at least try to get one more cone inside flutter markdown no i didn't also not a package from a flutter markdown a markdown renderer for flutter [Music] a lightweight markup language into flutter widget containing a rich rapid [Music] it supports the original format but no inline html flutter markdown is built on top of dart markdown package which passes the markdown into an abstract syntax tree or an html representation [Music] interesting [Music] [Music] so i have not tried it but i really like the idea actually so you can just use this markdown tag and then you can write your markdown inside of it that would be pretty cool is there an example yeah demo screen thanks for that a bit complicated but you love it that's good hey deepak nice to see you hope you are well so what do we have here now flutter markdown examples and examples open slip and there we have the demos basic markdown demo demo is the string notes okay and where do we use it down here with the future of notes okay uh hard to tell okay so it builds the stuff said state markdown with the snapshot data okay it's getting downloaded interesting [Music] link on tab okay so you need to specify for each for each element inside what to happen handled link yeah if you click on a link for example you have to handle that via this one yeah it's difficult i guess because markdown is not really made for that right cool but i like the idea that it's going further with abstractions because we need more packages for flutter especially packages that are well designed and documented right it's very very important to keep the environment alive thank you amino for the ideas today i just add that as bookmark good so but what i want to do is i'm taking the next chapter i guess from here so the python cohens was the idea that i bring step by step into the dart way more or less and if we check out i think they have these things called in chapters isn't it so need an illustration more never sometimes we will ask a class on a trigger for example see yourself what is the class name need in israel [Music] no i thought this is follows a strict hierarchy and we just need to find what's that cohen's txt oh yeah exactly so this was it first about a third and about strings about none would be the next and for us none would be null probably about none now let's see how we can implement a new dart cohen we would copy that over for example just to have an idea what we want to implement so that's what i said i'm not really doing here something completely new i really just copy it over and try to make it as compile a compatible for dart users as possible we have this class we define test is none keep it empty it's just annoying i guess can do that by the side and what we can do is we have also a class with the chapter because i call them chapters at the moment and we have here chapter three is about null and now we can have a look at what we can do with our null and what null is check in of topic channel ah okay for pretty cool so is it a blog entry or let me check quickly so too many channels i tell you so here nice great stuff i will quickly copy the url and then we'll share it here [Music] package material stay for widget example [Music] text hello great but where is the markdown now in this case okay so back to about null in the meantime so we have a test none is an object unlike null in a lot of languages so we want to check if dart has another language so how did we do it we had just a function where we had an assert inside of it that would be a copy of that one we say [Music] um none is none interesting [Music] for example don't know yet we would remove that and something is string we wouldn't have that we would have null here in that case and now we would have some hint for that but what is instance can we have that matcher instance off is it i think and then we have object is it object good question thank you for subscribing milo please great to have you on board uh and i feel right now that i'm tired i don't know what i'm doing i just write code that that doesn't help anyone so what i would say is i make today a little bit shorter episode thank you so much for joining today i'm very tired because i couldn't sleep tonight very good i was awake at three o'clock and after that i was awake till now and i feel slowly sluggish and i make that i don't write good code with that i hope you could get something out of it thank you so much minoo for the donation and also for the great support here uh i my water is already empty so getting difficult i hope i could help you a little bit with the different things and learning what dart coins is the next chapter would be maybe windows 11 installing i think that would be amazing also i got some very good inspirations for a new video i also want to do the video for the service talking about dart shelf and also talking what is server and client architecture i think that would be amazing having some looks on how that works and how they interconnect with each other and i got the idea with the ci pipeline which i also will take a look into so if you don't have any additional questions we will probably see us in next sunday again and what i will do is i will create a question here again on youtube where i will ask you what you are interesting to see next sunday in a live stream so we have like a two hour blog and inside of that i want to explain you something or we want to learn something together to just have a deep dive into it so if you are interested in also somehow help me with finding topics in these live streams feel free to check that out and answer there cool and else there is nothing else to say then thank you so much for the live stream had made tons of fun again and we will see us then the next time enjoy and have a great evening bye on next saturday ok i will try that the problem with with saturday i always have some troubles with finding good spots there but i will have a look if we can manage that all right bye everyone until the next time

Channel: Flutter Explained

Views: 1,123

Keywords: Flutter, Development, Mobile, Dart, Server, Tutorial, Training, Development Q&A, Q&A, Asking, Learning, Social, Chatting, Software, Engineering, Mobile Development, Mobile Framework, Framework

Id: -QT_WInCqws

Length: 107min 8sec (6428 seconds)

Published: Sun Sep 05 2021