To contribute to Flutter start with THIS | Building Flutter

welcome to building flutter a brand new video series where we show you how to contribute to the flutter framework yourself today I'm joined by Taha tesser who will be walking me through the setup of the flutter SDK the flutter framework so that we're able to start contributing Taha welcome to the show thanks for having me of course now before we jump in you will you kind of be leading me today even though I was previously on the flutter team a lot has probably changed you'll be showing me how to get set up as a contributor to the flutter framework can you tell the audience just a little bit about how you know so much about contributing to the flutter framework um I have been working at good magic as a flutter contributor for the last four years like over four years and uh my day job involved contributing to flutter open source project uh my focus is on the framework side so if you use any material any material widgets and uh like samples documentation like I do all kinds of different contributions uh sometimes I also dabble into other areas of FL like tul cotino uh but my primary focus is working on material design and the framework and uh as part of my role like I introduced new Futures I fix bugs um I provide feedback I review PRS I comment donation shes on a daily basis okay great so you kind of do all the things that a a typical and traditional flutter framework developer does so code magic they brought you on they hired you and they said hey we're going to pay you to make the flutter framework better is that about right that's about it yeah okay cool all right so with that obviously you know what you're doing you work on flutter all the time you file issues you put up PRS you fix bugs you create features you're a great person to help us understand us and the rest of the community understand how we can clone flutter and start contributing to it ourselves and so with that let's not wasting any more time let's get right into it so I let's say I'm a brand new developer I'm really excited about contributing to flutter as an open source developer what's the first step uh let's go over a couple of scenarios um the the the most common scenario would be a developer uh who is working at a job or they have their their own machine they will usually have a flutter stable version installed on their system and uh when they have this version sometime they tend to make mistakes by editing the source class Source uh code of this SDK that is downloaded from the website it's not from GitHub it's from the pl website and uh the they make a mistake to edit the source code and they try to push those changes somehow to the GitHub repository and they run into problems like I have I know some people who try to contribute and they say oh like I have modified but I don't know how to push these changes so in this video we're going to be talking about how you can have a fork uh setup of FL s DEC that's not your stable version of FL DEC where you you would use on a daily basis for your job for your projects for anything uh for studies uh but uh in order to contribute to open source You' have to think of a a flutter setup that is different from what you regularly use on a daily basis so uh okay so what I've what I've got here so just so the audience knows what they're seeing on the screen this is my regular flutter configuration so uh I have one flutter installation on my machine like you said I follow the directions on the website to install flutter every time that I run a build of a flutter app it's using these files that you see right before you on the on my computer and you're saying we want an additional a separate version of flutter so that when we start working on it we don't ruin the main version that we use for all of our other apps and packages is that right yes ideally because you could theoretically still use this setup but uh if you're working with a stable Channel you have to to switch to the master Channel which is where the flutter would merge your changes so you have to pull Master changes from the repository like if you switch to the repository tab to your uh GitHub repository you can see the changes are much recent they are like some changes are like few minutes ago so you have to work with a updated Master branch on your system so technically you can use the same setup that you have you can add Upstream git remote to this repository because typically when you download it doesn't have a Upstream uh git remote uh to send your code to the gith repository you need to have a fork you need to have a origin and a remote we can talk about that a little bit later and uh you could technically still use your setup but I wouldn't recommend this for almost anyone because you're working with a stable Channel you need that channel on a daily basis and you're not contributing as often as me like I us have Master Branch I don't have stable and uh like when you make changes to this you have to switch between master and stable and sometimes you could run into issues where okay I need to work on this important bug in my project for my work or for my project and uh I'm accidentally on master and I try to do something with my code and I see oh I see bunch of erors or I see like bunch of new API showing up in my code code and you would Panic you would like oh oh oh then you would realize oh I was on Master Branch I was not on state whe I should be on a state whe to work with my code so in that case pretty much for everyone I would say you have you need to have a separate copy it should be very simple and straight for award and uh you will not touch this master Branch unless you need to contribute and you will only modify that uh version not your stable version okay yeah let's do it so is the first so obviously I have the uh GitHub repo for flutter pulled up here is the first step to come over here and clone this repo no the first step would be to Fork it to your GitHub account and you will clone your uh Fork so this is the flutter SL flutter which is the main repository when you clone it it will become part of your account it would say your username then SL flutter you need to clone your own fork okay so when you go to click fork and you Fork it to your account I may already have a fork in fact I probably do but let's uh no no it's fine go do your fork well I was thinking it's super far behind maybe we should just Fork it fresh so let me say no we can update it you can go to your for and update it I understand I I'd like for I'd like for the audience to see what they're going to see though yeah uh but it's still okay that's weird so even if I give it a different name GitHub still says hey you've already got it yeah well okay then I guess we're gonna there are ways to do that there are ways to like you can get a repository into your account with a custom name but we don't need to that right now okay so this so imagine imagine that we went through the forking process that you just saw this is what you'd be looking at now you and the audience you'd already be up to date mine is way at a date it's 5 years old so I'm going to click sync Fork all right and I'm going to say update Branch okay and just like that it is important it is important to know that you have just updated only your master Branch not your other branches of your fork so if you imagine you Fork this like clone this repository to your local system your other branches will still be outdated but not the master we'll go to Beta beta is where about every month or so uh the flutter team releases to Beta to prove things out and then there's also of course stable which is where most projects uh actually is stable not tagged in here probably not yeah I don't see it h that's interesting did they do release tags let's see what's over here okay so it looks like perhaps there's no stable Branch there are only stable tags maybe uh in any event Master well yeah master and beta those are definitely branches for you to know about and to keep those synced but I think we're going to develop on Master because that's where all new changes go into flutter so that's right so Taha I now have a fork of flutter in my personal GitHub account so now we want to go over here and clone this right yes step one done Fork the repository if you already forked it but you didn't contribute like lot of people fork and they forget repositories they tend to forget for fork just out of like curiosity and uh they don't do anything with that so it's pretty common for people to have four repositories so in your case you updated it and now we can clone it so normally if you clone the GitHub repository it will add origin because your account will be part of that clone and G will say okay you are cloning from your account so I'm going to add remote origin which is your own origin and it's not going to add Upstream origin let's um let's clone it and then we can actually go in the terminal and we can show the origin that you're talking about just so everyone's crystal clear so I'll come over here I'll open a ter now what I've done is in my case I've chosen a directory on my machine that's near the route this you can see flutter Google SDK Chrome driver this is where I stick developer libraries and things that I need in other projects so from here I thought I was going to be able to open a tab let's maybe I have to come in here uh terminal I mean all right here's a terminal so so I'm going to go back up a directory so now I'm here and then I'm going to say get clone and I'm going to create uh a flutter which I should probably make the directory first I don't know if get will do that so we will make directory flutter dev then I will get clone into flutter Dev that's my yeah that's a good idea because you're cloning in the same uh root directory as your regular folder regular fler folder yeah by the way do you know the quick key on a Mac to increase the font size here I'm sure people can't see what I'm typing command plus like I just typed command plus interesting yeah then you resize your window because it also increases the window SI the whole window bigger okay all right well so you can see here now hopefully on the video git clone I just put in the URL from GitHub and then I specify the directory and then back here in flutter ddev my new directory here's an entire copy of flutter again file structure similar to the existing one right there's a little bit of a difference here but not much so this is essentially the same thing that we already had but now it's a copy now we can mess with it and all right Taha what's the next step did you should we check out the origin that you're talking about yeah let's do that okay so we'll do get remote is it dash dash list yeah you're not in the folder got it go into flutter ddev get remote V okay so there's this thing called origin now origin is just a name you can have any name any remote name you want but origin is the default it's the standard and what this is saying is that whenever we try to pull down updates from the M from quote remote or wherever we try to push updates to it this is the actual git repository that we're talking to and this is this is my copy so Taha is that what we want or do we want origin to point to the real flutter no we want the origin to point to your forth uh flutter repository because when you make changes you're pushing to your own copy of which is your own fork and then you click open PR from your repository to the flood repository then you whatever changes you make in your branch will be merge into Master Branch because you can't directly edit and make changes to the Upstream which is which is what the main repository is like splatter slpl but in this case we we make changes to Matthew car slpl got it okay and do we so do we only operate with origin or do we add a second remote for main flutter yes because right now whatever changes you make are being pushed only to your repository but also you have to consider you have to sometime update your local branch to work with the latest Branch from Upstream right now if you fetch you're only fetching your origin you're not fetching Upstream so let's just say right now you just cloned it so your SDK is pretty latest but after a couple of days it will be outdated your master Branch will be uh like 20 commments behind and uh sometimes you will have to most of the time you'll have to sync your branch with the Upstream uh repository which in this case would be flutter / flutter so the very first step would be uh and and I can give you another tip uh if you use GitHub CLI if you open the website for users maybe they can see it GitHub CLI is my favorite tool for this because uh GitHub c not only make it easy to clone your own repository or the Upstream repository but also when you uh clone if you go to documentation uh manual uh on the top right if to go to uh repo uh there should be a repo on the left uh if you contrl f repo uh you can clone your own repository so when you clone it uh clone get GH repo clone the second command yeah so the what this does is essentially what you already did with Git clone and then your SSH link uh you use SSH link so when you do that that it only adds origin but what G GitHub CLI does is because you're using uh your GitHub account to login into the CLI tool and you can manipulate your repositories you can push changes you can review comments if you want there are so many features in this CLI and I use this because when I clone using gith CLI it not only adds origin it also add Upstream because it checks my GitHub account because I this is the GitHub CLI so it checks okay this is the or origin link and then it says okay this is part of the this is Fork from this Upstream repository so it also add that automatically so I don't have to do the manual process in fact I don't even remember the exact Command right now to add Upstream so but let's add this for our users let's um well so we we'll leave we'll leave that as a as a tool for people to check out I think it's uh it's always good to also see what's really happening under the hood I think what we can say is get remote add upstream and my guess is we're going to say GI github.com uh flutter flutter. getet let's see that was good but yeah that was good but you next for it so you can type that link but I was going to say like you type you type get remote ad of stream then you can copy the SS link from Flat repository so you don't have to remember the whole thing yeah so let's um let's make that really yeah you don't you don't have to remember those URLs so if we go if we go to flutter flutter this is the regular flutter now this is the real thing if you click this green code button this right here is the same thing that I just typed this URL is what you add as the upstream and again up I mean Upstream could be anything but in this case Upstream just means the real project that the actual flutter team is working on they're adding commits every few minutes and we want to be able to pull their new work into our copy that's what this URL here is for so going back to what I typed I typed get remote so we're going to add we're going to add a new remote repository we're going to call it Upstream could be called whatever you want we're going to call it upstream and then this was the URL that I typed in which we could otherwise just copy directly from GitHub but now we have two remote repositories we have the one that we own and we have the real flutter repository yes exactly now you can see that each link has Fetch and push you would often do Fetch and pushing with your like you will push with your origin and you will fetch from Upstream so you can sing the latest changes from the Upstream repository and then make changes to your uh fork and uh the the idea is to uh have a latest copy of the Upstream branch in this case master and then uh make changes to it and update your fork then your fork and the Upstream would have everything up to date until one commit or two commits when you make the actual changes so if right now if you open your fork it will say like everything is latest like it's it's matching right but when you make a changes make you make changes for the pr uh everything would be up to date except one commit ahead or two commit ahead like in the future like we can talk about uh how to like why don't we show why don't we show that command and real quick is not going to make any changes but why don't we do one fetch from upstream and one push to origin just so the audience knows what that what those commands are yeah you can fetch like from Upstream get fetch Upstream I'm not sure because I don't use CLI uh let's see so right now let's see what what branch we're on so if we check we we are on our Master yeah so now you I it has been a long time since I've actually done this routine because usually I'm working directly on packages that I own and control so I can I can do everything on one branch I don't actually know how to let's see if we get pull Upstream Master let's see if that breaks things or not you're up to date you need to fetch because CLI don't automatically fetch the latest data well get get pull actually includes a fetch okay um so get pull I think is like a fetch yeah we we can say get fetch Upstream this this tells our local repo like what the latest commits are yeah so it it pulled like all the I guess it doesn't pull Tags by default so now we have all the tags but we can so now so now we locally know all the latest stuff in the real flutter and we can try again we can say get pull Upstream so we're take say pull stuff take stuff from the real flutter and you say master yeah yeah and then apply it to our local Master now again already up to date because no one on the flutter team has merged a commit since we set this up a few minutes ago but once you once you do the get pull Upstream Master let's say you make some changes on your version you can then say get push origin Master everything's up to date again because we haven't made any changes but those two commands pull from Upstream push to origin that's going to be a common thing to do so okay okay so with a bunch of that g stuff figured out what's next on our list tah the the next thing is the command itself like when you are running test when you're running your project or when you open your IDE you need to know like which version of the flutter SDK you're working with so your your Ida needs to know which flutter to sync it with because when you're making changes to the source code you're using flutter to make test you run test with flutter so it uses itself to test it so let's say you if you go to this folder your setup right now your default flutter command which is flutter Dr V would point to your regular flutter not the new one new one is not used anywhere you just cloned it so if you type flutter doctor and see the output it should say flutter stable Channel how about we do a flutter version yeah so this is pointing to your regular flutter how do we know that and there's by the way there's another way we can say witch flutter yes and you can see that it's pointing to Dev lives SL flutter not flutter Dev just flutter so not flutter Dev just flutter it's pointing to my original installation we want to be able to in some cases run flutter from the new installation exactly and this is what what is important like right now like you need to keep everything as it is with flatter command you should not like modify this because you will be using it for your regular development but we still want to be able to also use fluts DD with a command to tell our IDE that okay I want to modify uh some code it could be your own project it could be a sample project it could be the actual flut DHD with with its own uh command so in this case there are so many ways to do this like some people use fvm which is flutter version manager I don't personally use it for uh for various reason that we can't go into right now uh some people use uh some other ways like but what I do is the simplest way on a Mac OS and Linux OS system is pretty simple I just use Alias to call whatever custom Fork I have so instead of having regular command like pointing to to my flutter D Dev I use another Alias with a different name alas is just a just a same flat of command but you could call it whatever you want you can call it Michael and Michael dr- V it will point to your flut Dash Dev just saying and what this does is it will only run your flut Dash Dev with this command and when you sync a project a sample project because when you're working with bugs you will be running sample project or the flatter dashd itself when you run flatter flatter command in this uh SDK it will tell that okay point to this uh SDK which is fl- Dev so now this is good we we need we don't need to modify this but we will go to uh your Z I don't know Zell RC file and you can set a new I'm I'm going to hide that because I I can't remember if I have some passwords or secrets in mind but why don't we get why don't we type the line out right here and then I will move it on my other monitor into that environment file so what would that line be that we're going to add yes uh because I'm only I'm only using Master but for this video I set this Alias so that uh we can tell our viewers like how to do this so I will send you this line it's pretty simple the same line as your regular flutter but instead of just bin uh we say the actual flutter uh can I say how can I send you the link uh okay yeah I can send you it here so what this does is it sets an alias to the fork SDK and in this case we're just using some other keyword to call this flatter Dash Dev so let me let me remove the comment so we don't confuse them there just a comment doesn't do anything so the format here is Alias that's the operating system command and then F that's what what you want to call it so I'm going to call it I'm going to call it flutter Dev so it's flutter plus the word Dev and then this is your path I've got to change it to mine you you'll notice that right up above this I did PWD print working directory that's the path we need to use so for me it's going to be users mat Dev Libs flutter Das Dev now we could run this line right here and in fact we will and if I say which flutter Dev it shows that it's an alias the problem is if we close this terminal and open another terminal or we open the IDE and we have a terminal it's going to forget this Alias that's why go ahead there is a problem with this because you're pointing to the root folder which is flooded that Dev but it doesn't mean it's actually executing the flutter uh file ex let's Also let's point this out to the audience too while we're here so again here we are in the distribution there's a bin directory and in the bin directory are executables these this is compiled code that you can run and you'll notice that in there is Dart and flutter so Taha I assume that what we want is bin flutter is that right yes okay so we'll say we'll take the same command I had a moment ago except we're going to say bin SL flutter and then I can say which flutter Dev that points to the path and now we can in fact verify it by saying flutter Dev version and now it's downloading the engine because that's a separate binary that isn't part of the source code of the framework in fact there's two different repositories on GitHub but once it downloads the engine and updates that background stuff we should see the version output and it should be we expect to be on Channel Master because everything we've done with our GitHub so far has been on master so we'll give it a moment here to do that okay and we're back so after that engine thing got downloaded in the background which you don't really need to understand right now we end up with this text here at the bottom let me add some blank lines in here you'll see that it's flutter referencing my personal GitHub revision 28 minutes ago so that's clearly what we expected and what that means again is that every time that we type flutter Dev it's like the same thing as typing flutter except it points to our personal version which we can change and update okay Taha we have our version actually let me Alias that in the environment folder yeah uh to be clear what that means if you're on a Mac or I don't about Windows but Mac and Linux there's a file that a script that is run every time you log into your machine or every time you start it up so anything that you want to always initialize you can do it in that environment uh file that's where I update my path to include flutter to include the Android SDK to include various uh SSH Keys it's all in that file I'm going to add this Alias to that file too I'm going to add where where was it this line right here so I will do that on the other screen and while I do that Taha feel free if you want to introduce where we're going next by all means yeah what this does is it's pointing to the flutter Dash flut Dev folder so when we use this command or this Alias rather it's pointing to the flutter DDE flutter version when you use this command to run let's just say pubg in a a project like a sample project when you create it tells that project that I want to point to this version of SDK where where it is inside flooded death and from that point if you run that project your IDE will use fluted Dev to run your project instead of your stable version and that's very important because when you make changes you need to be able to test those changes using the version that you modify like if I make some changes to my flutter Dev like for example if I go into a class for a widget and I let's just say add a new parameter or fix something in that widget when I run the project my project has to point to that particular flatter setup so I can sync those changes and actually test it so this is very important for that and then when you run test you will be using this command or your IDE will use a location provided by this command and uh it will not be changed until you run regular flutter command which you won't do if you're are testing only master so like you can switch between both commands uh it's up to you like if you if you have a sample project and you want to test it on Master see if your bug fixes the issue then you can run regular command regular flut flutter run and it will run your project in the stable channel so you have the ability to run your code on a stable and master at the same time without having to modify your uh flatter setup okay so I went to I added that Alias to my environment file and what I did here you'll notice I opened a new tab all this junk here is rerunning what's in there so now in this new tab normally the Alias would be gone because it only exists in the one tab that you set it but I can now say flutter Dev D- version and it still finds flutter and it still gives me the version which means from now on everywhere I go I can type flutter Dev and I will run my own version of flutter that's right perfect okay what's next now we can create a sample project to show uh how that sample project would use flutter Dev instead of regular flutter so this is important to test our changes which we make in the next video or in the future but let's create a new sample project using a flutter Dev command you can use both but I would recommend flutter Dev so you have the master Branch uh project to test Master Branch changes okay we'll go up a directory and then we'll go to flutter sample and so what you're saying is that in here in the flutter sample I'm going to give us some more room we want to say flutter create and there are a few options that we're going to need to specify here so one of them is T for template which we want an app right what other options do we want to pass at this point we can omit this because the template is default uh the app template is default so you don't need to specify and you're using flutter command that will create the project with the stable right got it so flutter Dev create are there any other flags SLE yes sample you can call it this would be a project name so you can call it sample or test anything you want well so we've uh so we've already got the directory here so I'm guessing that we can just say dot to use the current directory right yeah yeah that's true yeah if you want to put it in the same folder so what this is doing is this is creating a this is basically creating a new project in inside this folder uh so it's going to complain okay so in in uh in Dart and flutter you can't have dashes and names for some reason so I'll come back back actually let me let me first get out of that directory I'll come back here I will rename to flutter sample then we will go back into flutter uncore sample and now I'm going to rerun flutter Dev create in the current working directory let's try that again yes perfect okay and so now if we look back at the files under flutter sample now we have a totally normal flutter project but it was created with the latest version of flutter from our local master and we can do something for example like we can say flutter test there's always a one or two oh I press wrong thing again I got to get used to that flutter Dev test that's going to run the default do nothing tests that come with every flutter project they passed so what this verifies is that we were able to build compile essentially our new sample flutter app and we were able to run the test of our sample flutter app now this is not to be confused with building actual flutter or testing actual flutter this is just our sample app so okay uh and did now Taha did you want us to open the sample app in the ID for any reason or do you just want to verify that we're able to build and test yes uh you run this command like flutter Dev to run the test and you could run this command use this command to run the app as well so I want to show like you can run the project and then we can look into one particular folder after we open this project run let's run the app one time so I don't have any emulator or simulator so let's see if it'll launch in Chrome hopefully it will do so while this is running you can also it's actually pretty quick it says it's launching yeah okay so here it is here is our here's the app that we just created this is what you see by default if you haven't created a sample app in a while this might look different this is as Taha knows very well this is all material three stuff these days uh but this is our app in fact running in the browser if we if we had an Android emulator open we could run on that if we had an iOS simulator open we could run on that we could also run it as a Mac desktop app Linux windows but browser was the fastest that's right okay so now we can open this project and we can look into couple of things that are important to consider okay I'm I'm going to open from my other IDE here so I I use Android Studio we're going to give that a try here today I'm going to find it over here I'm going to say trust the project open it in a new window and here we are let me now actually there's two things that we should do here right off the bat Taha one of them is to increase the font size for the people watching so let's see settings font size go like size 20 okay now the the terminal might still be small I'm not sure if that's a different we can still use regular terminal okay and so I'll also show the files here these are the files I it's like I want I want everything to be bigger but it's like all controlled by different settings so uh we don't want to see this as an Android project we want to see it as a flutter project and then the second thing now this doesn't the second thing does doesn't matter so much for our sample project but Taha if I remember correctly flutter itself does not actually follow standard Dart language formatting is that right yeah that will come later because in your project you can do whatever you want right it will be later but before I forget and see I have automatic formatting turned on I have Dart format in here and somewhere in here it's going to say autosave I think see allow perform so per no that's hot reload I'm sorry where is it format code on save this this right here is great for your own projects but it's going to create a lot of pain in the flutter framework the flutter framework does not follow standard formatting so if you automatically format every time you save a file every file that you open in the flutter framework you're going to totally reformat it and then you're going to real you're you're going to change one line and you're going to end up with a thousand lines of change so we're going to turn off the format on Save not it doesn't matter for my project but it matters for the flutter framework so say okay but all right so now we're back at this default flutter project that we've generated yeah so couple of things to consider uh because we use flutter Dev to create this project this project is not going to use your stable version of Dart it will use a edge version or like a latest version that's higher than your stable version so what this uh like this is perfectly normal for master Branch but when you try to run the same project on a stable it says oh this version is not supported so what you should do is you should have a a SDK version the flutter SDK version or SDK version pointing to stable version so in this case pointing to 3 5.0 Dev uh this is going to be unsupported unstable so what I usually do is in my sample project I always use the stable do SDC because the we when we are contributing to flutter framework we are not actually worried about a particular version of dot uh it's like in some cases it might matter but it's very rare so you're safe to use stable version so what I do is I go to do we just remove this part here or do we have to look up the number it's better to look up so you're are up to date with the stable one so your project still runs on stable version okay so where do we find that number we go to flood. Dev yeah get it started you can choose whatever version we just need to look a uh SDK version uh choose a platform scroll down uh you can see SDK archive uh somewhere there s yeah SDK archive uh doesn't seem to find anything how about arch in the install install uh scroll up little bit there will be a link there uh SDK archive somewhere oh download and install this is actually vs code installation I saw the other day if you scroll up little bit scroll up you switch to download and install now you will see uh SDK archive little bit up yeah below the blue button yeah here you can see all the uh stable and beta version you can actually Google this directly I took a long route for this but here you can see the current stable version the latest one is using dot 3.3.3 so what this tells is like you will be fine if you run the sample project on the stable version or on Master you will be fine but if you run 3.5 this Dev version on stable it will not work okay so we'll save that and we'll also do a pub get to let it make whatever adjustments it wants to make there yeah I the second thing I wanted to show is like when you did pob Dev what it is doing actually it should be running this Pub Dev from your flat Dev version but you just uh did it so how do we know it is is actually doing FL Dev from your uh FL Dev version we can tell yeah you can go there but also you can go to do tool there is a folder there dot tool do. tool in your project um yeah on the left there will be a version folder yeah version so this version folder tells like you're pointing to this version C to be clear just to be clear since we did just change to Dart version 3 3.3.3 this is not the dart version uh or S is this the dart version or is this the flutter version flutter version like when you run flutter dab doctor or flutter dab version yeah yeah that's yeah that's what I was expecting so this is this is the version of flutter not the version of Dart and this is obviously our Master version this is not this is not what a stable version of flutter would look like if it had a number yes so because when you like this is important like when you have this sample project let's just say I run you created this sample project on Master Branch you're using Master Branch to test this and when you run pubget even from UI in your IDE this is already using your master Branch because it knows from this context that my do tool version folder is pointing to this there is another folder somewhere here that point to your location where the flut Dev is actually located so these uh files tells your IDE that I want to use this version and this is where it is located I don't know which file is that exactly but there is a uh file there that will tell your IDE in this case and Studio or if you're using vs code it will tell your IDE that I'm using this particular version and when I run pubget or when I execute poget from my IDE use this version so now what we're going to do is we have sync our uh project uh yaml file to 3.3 just so that in future we can run this project on a stable branch and we know that currently our project is actually seeing with FL de you inspected from CLI you inspected from the file most of the time you won't need to do it you will remember what what last command you have run so now I want you to close this project uh close your IDE and then uh run this uh when you open this project from terminal instead of flutter Dev you type flutter Pub get so that will SN your project with a stable Branch this time not instead of Master and this should not throw any error but it actually does because uh it says current version is 3.3 your your stable version is probably not the latest one with 3.3.3 you're probably using a little bit older version if you look at the website it's right behind the terminal so 3.3 is actually pointing to the ver release number uh if scre down a little bit uh you can see the 3.3.1 3.3.3 yeah so your version is probably 3.19 you can actually confirm by typing flatter version yeah yeah so okay that's and I I probably shouldn't mess with that because I may have some client projects that actually are a bit behind stable that's the idea yeah you should think with instead of uh like I'm sorry like instead of uh updating your stable Channel sync your sample project with the particular version in this case I say 3.3.3 assuming you would have lat stable but if you don't have you're fine to use 3.3.0 as well or or like 3.0.0 it's fine completely fine okay so we'll do 33 0 yeah and then we'll come back here and we'll say uh I sorry was it flutter what did we just run flutter p get just regular flutter pget yeah okay because that's that's using the real flutter not our version of flutter yes because you might need to change test changes on the stable Channel just to verify that whatever changes is making are actually uh like verified you can test on a stable something could be different than your master Branch so you could test both version of your sample project now it is interesting that flutter Pub get for me is not completing it's hanging here at the bottom okay there it finally went through okay cool all right that sounds good so yeah the overall point here is that you're going to be working with real flutter on real apps at the same time that you're working on you're actually altering flutter with sample apps and you want to be able to do all those things from the same computer without a big headache what we just went over is how you can do that how you can have real flutter real apps uh your development flutter with sample apps that's right now you can actually verify this you don't have to but just for fun you can actually open the same version f file in your sample project and you can see it will point to it your stable version now instead of the master version just to verify this yeah and what that means is that if I use the default IDE capabilities to run this it's going to run it not using our version of flutter but the real version of flutter so that's an important thing to keep in mind so best practice is to just run uh use different command to run pubget then open IDE so your IDE will know which version of flutter to use that's what I do it could be different from you but uh whenever I open my project if I want to use a different Channel or even different branch for example I run pubg so that my IDE knows which version to point to got it and I think probably up here in the Run configuration Let's see we also probably want this to use a we want use to use flutter Dev as the command right no we don't need to do that like we already told because because of this version because this version it'll pick it up yes there's another file I'm forgetting where it is it actually has the location of the SDK but you don't need to worry about that as long as you run the correct command and pubget you're fine and since we we have our SDK separated you don't need to worry about running wrong command you can always switch to the correct command like if you want to test on stable change the command if you say to master brand change the command that's it got it okay cool are so are we in a position yet to actually get into the the flutter framework or is there still more to look at in the sample app yeah we are ready to go into flut table or flutter framework but okay so this is the sample project we done with with it now what we want to do is we want to modify our flutter Dev Branch so this here this flutter distribution yep yeah so there is there are a few things to few things to consider here because uh when you work with a stable brand you don't really worry about the actual structure of the flood is Decay but when you're modifying it you need to know where is what and you need to know which correct packages because flood SDK itself is a is just a collection of packages so you need to know which package to edit and uh where to run the flutter pep command because we're going to be running it in the SDK itself so what I recommend is open this uh flut Dev in terminal and uh you can run L yeah trying to get us some larger sizes for the audience here okay so you want us to be in terminal so we will have a new terminal at folder I'll get rid of the previous one this one needs to be larger as well we are now in a terminal in the actual our our custom flutter SDK all right and what would you like to do in the terminal now we can run LS just to see the structure from the terminal perspective we already know the structure from the finder and I'll do la so we'll we also get all the all the private stuff that's hidden in here too because there's some visible stuff there's some hidden stuff no we don't need to do all of that like we can just run LS because I want to show the different folders because we don't need to see the other files yeah so here you can see there are some files and there are some uh folders so there is the authors and read me just a standard and then the example folder actually contains several examples let's at least get it vertical okay so here you can see the example folder is a folder and Dev is a folder and then B we don't need to about that and then uh there is something called packages like just like any other package flatter SDK is just a a collection of packages so when I say FR by the way that's that's known as a mono repo usually when you create a flutter app your flutter app is just one package and even if you create a library for other people to use by default that's just one package yeah but flutter itself contains many different packages all in one repository and that's why we have this directory here called packages all the packages are in the packages directory that's right if you use uh if you go to flaty repository you will see a collection of packages as well so it's it's also a mon repository so if you go if you CD into packages we can actually see what packages the fluts DK has so here we can see there is something called flutter which is the actual flut framework package and then there is a flutter driver package flutter goldens flutter to yeah let's just just again to add some context let's mention what each of these does flutter driver is used to run tests on actual devices flutter goldens is used to when you're running a widget test locally it paints it actually paints pixels to a file so you can compare painted pixels before and after your test flutter localizations is dealing with essentially language translations and things like that flutter test is the pack when you write a widget test you're actually using the flutter test package that testing stuff is not built into flutter it comes from flutter test flutter tools I don't even know what all is in there these days probably a bunch of stuff web plugins are things that are are specific to web that wouldn't apply to other you know mobile or desktop versions of flutter fuchsia is we can kind of ignore that integration test is kind of the it still uses flutter driver but integration test is kind of the evolution of what used to just be flutter driver so integration test is how you run a test is how you write and run a test on an actual Android device on an iOS device in an actual browser on an actual desktop that kind of stuff all of these these are all different packages in flutter and they all get pieced together into the final distribution so okay with that that's right uh we could have looked at this folder structure from the finder but the reason why I wanted to show it in the terminal because we when you when we contribute to one of these packages which would be most of the time would be flutter package because where that's where the material code is that's where the certina code is we can look at the the structure inside of the flutter package but if you're interested to contribute to other packages like for example integration test or FL tools you're welcome to to do that but you will need to know which package you need to open in your IDE and then make changes to that package so for framework let's just say if it is a flut widget or material widget or core widget you would open packages so now if you type PWD we can see like it's we are inside PL SDK packages but we need to go one level deep into a particular package that we are interested to contribute to so in this case would be flter packages uh packages SL fletter this is where our framework code the all the widgets uh are living and this is just a package you can see there is a I was going to point out the same thing notice we have a lib directory notice we have a test directory notice we have a pubs spec. yaml just like every other flutter and dart package you've ever created that's right so here when when we did what we did with FL sample what we did we created the project and then we did Pub get and open the project into our IDE we need to do the same thing we need to use our SDK uh flat SDK command in this case flat Dev to run pubg inside our package flutter package which you're modifying so in this case we will run flutter Dev pubg so what this does is it is using flutter Dev inside one of his own packages to say that okay I'm running this package I'm I'm I'm like basically running pubget into this package using itself so it is using the same bin folder bin flut bin / flutter executable to run the same uh uh pubget inside the own folder and now even though it says flutter we are not in in just regular flutter this is very important we are in the flutter Dev packages SL flutter that's good going to my regular so I guess that's okay well is and the version file must be in here somewhere right yeah but we can see the the actual structure yeah so here's the dart tool so let's say LS la. Dart tool yeah there's the version and then we can say probably cat Dart tool version yeah and there's that version number again okay you should almost never sorry go ahead you should almost never run your stable uh command into this folder because this is a very different version what stable exists stable is because St Dev in our case here yes because this version particular version is at least couple of months ahead of what you have in the stable version so even if you did by mistake you should immediately type flut Dev just so that any changes are not like modif even though most of the time it will not but you can get reset later on if you make these changes yeah so here now we're back to master okay now should we should we open the flutter framework package as as if we're going to work on it yes because we have executed flutter Dev Pub get so our package is synchronized and it's ready to edit so now we can open it we can open this only package a lot of people what they do is they open the actual flutter Dev folder if you do that you're not going to be able to sync your Pub get Pub Pub spec yaml you should open the actual flut package inside your fork so it uses the pub spec yl to sync it it uses the do dot tool version to sync your project and it is doing that right now like you going to look at the bottom analyzing the project yep doing that so and another thing to keep in mind so Taha just pointed out that the kind of this automatic version number that we see here you you you're not going to get that if you open the whole repository at one time that's one problem the other problem is that you can see even just in this one package our Android Studio is still analyzing files it's taking a while that's cuz there's a lot of stuff in the flutter framework package but there's way more stuff in the whole repository if you open the whole repository you're going to be sitting here all day waiting for analysis to finish so you want to try to open one package at a time to minimize the amount of work that your ID is doing that's right in fact this is the biggest package in the whole SDK and uh it would only do that sync like one time you won't do it most of the time this because this is the first time we opened it and we synced with a new uh command like like we seeing it for the first time now it is already done so here you can see it's just like a regular package it's just a regular public pyl that you would have in a sample project uh you can see the the pl SDK version the package pack is using which SDK version the package is using you don't need to modify that but you can see it's it's just a regular project just a big regular project so here's here's the pub spec and that's it's always fun to just see the name flutter as the name of the project in the pub spec description homepage like normal uh environment you'll see that we're on 330 and dependencies so apparently these are the only things that the flutter framework itself depends on it's a very small it's funny that the average flutter app has like a 100 dependencies and flutter itself has like six or seven of course this dependency here the engine is a pretty big one and then Dev dependencies are things that only exist locally for you as a developer things like your testing Frameworks here Tes and goldens and then fake stuff for test all that kind of stuff so lot lots of Dev dependencies but not many runtime dependencies yeah so here uh we are pretty much ready to do whatever we want but it's important to know where you want to make the changes where which file you are interested in I think I think before we even try to make a little change if one of the most common things to do when you pull down any open source package is two things run build run tests now I don't actually know I don't I don't remember what running a build independently would do here but certain certainly running tests are something that would be reasonable reasonable to do what do we have to do to run the tests in the flutter framework before we run test we can actually look at the structure because uh we can see that there is not just one test there are several uh sections of test so if you go to we can go to lip folder first just to see like what kind of uh Source we have so inside the LIF holder we have high level uh export file I don't know what we call it officially I just see there are export files and then there are subfolders for each category so uh this flutter package basically the framework it consisting of all the different subsections of framework so it could be material it could be copertino it could be just widget and each of these folders have more files in it so we need to look at the actual top level we can look at it here you can see that it's a top level view of the same folders and then when you go to test folder you will see the same structure inside the test folders yep so here we have and under test we have copertino we have material we have gestures Foundation all the same file directory names that we have up here like copertino material gestures Foundation now that's by the way again for those who haven't written a lot of tests that's not required the matching directories is not requ acquired by Dart or flutter but this is a chosen policy up to this point of the flutter team that in their test directory they have chosen to have the same directories with the same names as their source code it is important because there are thousands of test files so if you put them together in one test folder it would be a really long folder like huge folder so this way like it makes it very easy for anybody to navigate your your structure so you mentioned running test so we can do two two we can test like a particular file which I would recommend rather than running the whole thing it would take 30 minutes on some machine it could take like 40 minutes to run the whole test uh but we can choose one file so I want to show like when you navigate to this structure there are so many things happening and when you begin contributing for the first time you see oh there are so many things you will be daunted but you need to not worry about that you need to focus on what you are most interested in so I would ask you to pick because I work on materials I would ask you to pick a random material widget not in the test go in the in the source class I want to show something there so pick a random widget from Material because you can see there are so many material files even just in material folder what do I want to test let's see uh Let's test The Floating Action button perfect so here this is the actual Source class this is what you typically uh would use to modify the widget so this file simply called Flat Floating Action button do dot has the actual widget but it also has related code that makes Floating Action Buton it doesn't have just one widget it might have several widget it might have classes it might have enom it might have function so this whole class is consisting of Floating Action but but this file would also of course depend on other classes so you can see like which classes are imported into this file if you go to the top level yeah you here you can see it Imports the foundation for like the core widgets it uses render rendering package to import rendering widget it uses the widget package to import some of his widget then there are just uh you can see there are some files that are without any package name these are relative classes they are inside the same material folder so if you're importing a package that exists in a different if you're importing a class that exists in a different package folder in this case Foundation folder or widget folder it's not unide Material you import the actual folder but if the class is importing a relative file within the same material folder you import only the classes so here you can see it Imports some common things that are common in other widget too like it Imports color scheme Imports the theme class of this widget some widgets have theme so you need to import the theme to style that widget so you can see when you run test are you running test for the widget or are you running test for the Widget theme there is a big difference between them and then there are some other common ones like theme do dot theme data and uh what I usually do is uh I when I run into a new class which is rare but when into a new class I look at the Imports I look at how big this file is so go all the way down you can see how big this file is so it tells you the scope you're working with um in this case it is U 842 like it is uh relatively big but not the biggest there are bigger files than this so now uh let's just say I want to make sure that whatever changes imagine I want to work on floting action pattern I will run test for this widget so I will go to the test file with the same corresponding name Floating Action button Dash test or underscore test Floating Action button uncore test here we are yes so this file contains the all the tests for the whole that you have just seen and it has the main function then it has several uh tests it would have many more test and then it would have groups of test some uh widgets have just test then some have group group and then inside the group you would have more test so you can see how big this file is and I want to make sure that my changes that I would make in the future uh I can run my test before I make changes and I can run test after making changes so if you want to run test let's run uh test for floating action button okay now the way the way I usually run tests is I just specify the file from the terminal is that how you choose to do it or do you use like IDE buttons in here to run your test Suite I do both I do both it depends on the situation uh I do both okay so let's see what test and what's we need the path to the file here yeah we can Define it material and then Floating Action button test okay and I'm going to press enter and let's see what happens nope oh sorry I forgot the actual command and again this is is how you run a test in literally every other flutter project you've ever created yes and there we go we so apparently that file contained 44 different tests they all ran they all passed that's why it's plus 44 in green and of course all tests passed perfect so this tells you that everything is good because we haven't modified this class but this is very important to test your class before you make changes then after you make make changes they just say if is a breaking change or a non-breaking change uh you will run the test to verify that your changes are not breaking existing changes like other people have returned in the source class then you add your own test to verify the new changes yeah the reason that you run it first is just to make sure that you can make sure because if any of your configuration is off or any anything weird is going on it might not compile or for some reason it might fail when it's supposed to pass so first you run it to make sure it builds it runs it passes then you know you got a clean slate then you can go make your changes and then you run the test again to make sure that your changes didn't break anything though I will point out one additional point just because you make a change in Floating Action button doesn't mean that you didn't break a bunch of other stuff outside of Floating Action button we said Floating Action button depends on stuff but also a bunch of other stuff depends on Floating Action button so it you know if you're doing some quick development it's okay to just run that one file but once you think you've made a meaningful change you do need to run all the tests because all of them have to pass that's right there are other tests too like you need to test some other packages sometimes like you might need to run flatter localization if you're making changes to your uh P class with the localization test so there might be other scenarios and sometimes what happens it's very rare but it happens if you have uh it's rare with me probably but if you because we can't use that format to form with the source class you would have analyzation analyzation errors in the repository when you file the pr will say you have trailing spaces you have incorrect format or you don't have proper comment or proper documentation there could be other analyzation that would be caught later on you can't possibly run those analyzation locally but you would do your best to make make sure first of all no other tests are failed like you said like your all the other test are passing and your changes are correct everything is good you remove trailing spaces I can give some tips on how to remove trailing spaces in fact like uh there is the ID setting to remove trailing spaces so you could just enable that it will remove all the trailing spaces because flutter does not tolerate trailing spaces some most of the other repositories especially in JavaScript They Don't Really worry about trailing spaces but flut does it will fail your analyzation okay so it looks like I already have that turned on for modified lines um we probably don't need it on for all lines do we because that would change things that already existed and if it already exists it's supposed to be correct no it's perfectly fine because when you make changes you would have G changes for the particular lines and it automatically remove trailing spaces from those change lines and this is is running on Save end of save remove trailing blank lines I guess this one should probably be on as well right remove trailing blank lines at the end of although actually hold on a second let me because we were at the bottom we were at the bottom of Floating Action button yeah and that's a blank line so it looks like so flutter may not allow spaces at the end of lines but in fact if I remember correctly flutter wants a blank line at the very end of the file because I think historically that extra blank line is relevant to determining end of file so it it not just letter no just let it even get would complain yeah yeah I mean um I mean like from a historical operating system standpoint I think having a blank line at the end of the file historically is important even though modern systems don't require that so I think because of that history flutter says yeah let's let's make sure we have a blank line at the end of the file too that's so blank lines at the end are okay just not we wouldn't want Extra Spaces like this at the end of a line yeah all right cool so I think so to to help frame this if there's any I think what we want to do is create kind of a dividing Point here between initial setup and build and run and test versus trying to make our first contribution I think there's a good natural division there um I also think we've done we've done a good amount of stuff today so maybe let's try to wrap up this stage of the process and hopefully we can come back sometime in the future and and say okay now that we've got everything set up we can try a contribution and see what that looks like to look at an an issue ticket to put up a PR to get it approved all that stuff uh We've run tests that's great what about is there ever a need to actually build flutter because we know flutter has a binary do we ever actually build flutter or do we only write source code and then run tests we just write source code and run test because when you need to build you're building with flutter engine that's where you need to build the engine and then use the the command to run a custom engine but with the framework the best part this is what I this is I this is why I love working on framework you don't need to do all of that you just edit code you can instantly run the changes almost immediately like I have two ID sometime like I would have two instances of vs code side by side one would make changes I can switch to another window click save or refresh will immediately show the changes sometimes you would have to run pubg just so it sayings parameters sometimes I've noticed that but you don't need to build anything it is like editing the source code but if you do that with a stable version or like you're not properly doing the whole setup that we have talked about even if you make those changes it would not not reflect in your project but the steps we have taken ensures that our sample project is using the correct flooded Dev version and then whatever changes we make in the fluted Dev version are reflected in our sample project if they do do if they don't do that run fluted Dev pubg and it will do that it will reflect those changes immediately as long as you're running the correct command if you accidentally run flut pubg you're using the wrong SDK which is unmodified it will not reflect those changes immediately got it okay and yes building the engine is a a much more convoluted and difficult process and it takes a very long time and it's a real pain the engine just so everyone understands the engine is the part of the code base it has the code or C++ that's the stuff that talks to skia for rendering or impeller is the new rendering engine it's what talks to the Android code the iOS code like the actual the the application code that's specific to the platform it does contain a little bit of Dart code and so if you ever actually find yourself needing to alter that Dart code then you're stuck rebuilding the whole engine but that's just kind of some specialized Dart code that's meant to integrate the framework with the engine what we're dealing with in the framework it's all dart the framework is all dart so it's easy to recompile the dart it's easy to run the dart code and that's why it's so convenient for us so okay that's right if so if you followed along at home you are now ready to start contributing now again in in the future we do want to come back and talk about like what does it look like to file an issue ticket or to assign yourself an issue ticket or to put up a PR that's important stuff too for process but you're technically now in a position where you can alter flutter and you can you can make changes and you can offer those changes to the framework as we close out that phase of discussion Taha are there any final points that you'd like to make about what we've done today and where we go from here I think this setup we have shown is just one way you could use Alias you could use fpm or if you could have your own way like you want to have a different system if you have a spare computer that you use only for contribution you're welcome to do that you don't need to set Alias or anything like if you have a personal machine where you don't need to really use stable version feel free to use Just Master brand just to experiment to see what are the latest changes in the flut uh SDK and uh there are many ways to do this this is just one way this would ensure that your not modifying your stable version and you're ready to contribute and test the changes and you you have also shown how to add Upstream so later date if you don't decide to contribute the day you set up your SDK you can still use the setup to update it and then contribute in the later day like a week or whatever in the future but you're ready to sync your project test your uh test your sync your SDK test the changes and run a sample to verify your changes are valid in the future we can talk about like what issues to pick and how to go about editing those files running new test I would also give you tips on how to write test for a particular change and uh when you file a you need to go through a checklist I can talk about the checklist to ensure that your PR gets you there like 99% there could be like one or two% chance it could have some issues but you will be there ready to contribute with with confidence all right we had a few technical glitches there uh since we can't seem to get the uh the audio to work consistently here that's a forced ending point for us so I do want to thank Taha for joining me today on this video uh we look forward to more videos like this where we show you how to contribute effectively to flutter so that more people in the community can help build and test and extend flutter into the future the series again is building flutter brought to you by the flutter County Hunters subscribe to the channel so you can keep up to date with future videos like this and also like and share so more people in the flutter Community are aware of how to actually contribute to flutter thanks for joining us and we'll see you in the next one

Channel: Flutter Bounty Hunters

Views: 489

Keywords: flutter, dart, app development, open source, android, ios, web, desktop

Id: 7vf-XHHG-y4

Length: 77min 39sec (4659 seconds)

Published: Thu Apr 04 2024