5 THINGS I WISH I KNEW When I Started Flutter

this video we're going to talk about five things that I wish I knew when I started flutter and this video is brought to you by Shannon Galloway which is the official sponsor of this video he's supposed me on patreon which you can find down in description if you like these kind of videos please let me know by liking subscribe to channel and put in some comments down below what do you like to see next but the first thing that I wish I knew was actually to start small projects what I mean with that from a personal experience was that my first project was actually quite big which meant in the end that actually didn't finish it I probably worked with it on about 6 months or so and probably longer and it never got to see the light of day so a small tip there is to smart start your project and create them as small as possible if you have then released them you can actually use build them up but my recommendation would be to be less many small projects as you can so you actually get the experience from creating an app to release in the app and then marketing and everything in between and then of course if you have more experience you can create video applications but for anyone out there that's having a bit of problems creating apps I would recommend starting with small projects my second tip is actually learning some simple state management so you can do this in a bunch of different ways they're mobile X their provider their bunch of different solutions I'm gonna show you a very very simple thing that I wish I knew that I could do and let's just go to the code or actually just show the application first so here's a super simple application we can press this button and that would update the variable right here but what if if I go back to the code let's close this what if we actually had a more complex with yet so right now we used have a text which is says change title on the button and then for the text we have a variable called title and when we press that button we change the state of that title and this is using the same state but what going to show you right now is how we can do that with a nother method and that's actually using something called a value notifier and there is also Shh notify you may be heard of them before but simply if we want to have for example a value that we provide down in the video tree we can create this simple class are used call it title notifier which extends this value notifier a muzychko is set the type to string but this could be a model or any kind of object that you want and then we used add a method so for example if this method is called our value be updated to notify title and the way we use this if we go and navigate up I'm actually using providers so if you don't have that you can simply add it into your dependencies so what we're simply doing is that when we display our homepage while using a listenable provider and giving that title notifier and we give that title notify a initial value of change title so remember now that we have a string value and that value is of has the value of change title we using that title notify them to update it so if we go down we can see that I've already done on the unpressed also called a context or read we get that tote title notified that we're passing down we call that update title so I have a complex widget with title deeper down that's just a widget that contains another widget and then down here we have that text so to do that without provider you will have to pass it down in the constructor but now we used using provider and then use a consumer where we want to listen to that value so we can see here that we get the title notifier get the title notify object and then we used type title notified of value and this is actually the string value so if we just save this and really run that and go back to the application this is very similar still there is no fancy UI here so this one is used with said state and this one is used with value notifier so if we now click this we change them both at the same time so this nothing really fans here we used ignoring the way that we passed down a value and instead we're using provider and a simple value notifier and we can use change no twice value notify uses for a single type you can have for example string in an object or so on but we can also have changed notifier which is as another layers we can build up more complex classes so that's one of the things that I wish I knew when I started so the third thing is actually learn to extract widgets and methods so to give a very basic example we can have a column and this column can contain for example text 1 it takes one takes one takes one so that would give us used a widget with multiple text in it so if you show that we can see that where takes one takes one takes one and takes one so we could do something very simple and that's extracting it to a method there there are times when you extract methods and sometimes when you do it with widgets but I'm going to show you the different ways of doing it so for example now we used have a method called build column and this is going to return our column and of course you can have it a or have another name for it and that would pretty much used to render this video so this is a normal method which returns a widget instead so if we would want to we could also build a widget with it so for example if I used to copy this code right here again we have this column here again and we can extract into a widget I'm going to call it will column now again but that's not a good name cover but cease to show you right now and that would actually build a safe stateless widget most of times this is preferred but you can do whatever fits your project are usually for myself build more reusable components with widgets and then for small bits and pieces of a widget and work or page or whatever I could use a function but that's up to you so for the fourth tip is actually start to test your project early and you can do this very very simply I'm just going to show you a way of doing simple unit tests so if we go back here and we go to test I will have a widget tested right now I'm going to just replace this and create a normal unit test I'm going to remove all of the code here so what I mean with unit tests is for example this class right here and we have a method called update title and for now I always wanted to set the value to notify title or even even better we'll we want to always when we call this we want to give it the name update title or the title so we can use a super simple test to just make sure that it always does that so even if we would change this that wouldn't matter so first off we give it a good name so they're different or a bunch of different ways you can name your tests I'd like to use to give them when they're naming which means that you use give it a name for example given so for example given title not fire when and then we check the method name of the title update title then change title to title this is an example and then we can then very simply create this class and when we create this class if we use import it we're going to give the value and the value is for example no title and then we want to simply call for example expect and we expect final title notifier we expect so if we check this we can have a actual and a matcher so the actual is title notify dot value but we expect it to be let's say title so right now if we would run this test it would result in an error or that it wouldn't wouldn't work we can check this output if we get output so here with the here we have the output we can see that we expected a title but we actually got a no title so that's because we didn't call the method so let's call the method which is called title not fired alt update title so now if we run this test we should see that it passes and this is a very very simple test you can do and at least it helps a little and you can start building your application up from that at least you have something to start with so try to make it as simple as possible then you can always scale up your tests so the fifth tip and the last tip is design your app before you create it so what I mean with that is for example you can use Sigma you can use Adobe XD you can use a wireframe - any kind of way that you actually designed out before you start to develop it development takes a lot of time so before you put yourself in that spot where you develop an app for two and three months or even more and the app doesn't look any good then what you should do is actually design it first create a design that your do you like and then start implement it and if you don't like design you can always look that up before but that will give you something to work with when you actually create an application the application will take a lot of time even though you have a design but at least it will remove the time you spend on redesigning the app because when you create the design first you follow that design create app complete it release it if you want to update the design then you update the design do a change of the design and an update app so start always try to finish your projects that's the one like the most important part if you liked this video please let me know by liking subscribing to the channel I hope these tips helped you as much as I wanted them in the beginning and if you like this video you can also check out my other videos here you can also check out patreon to support me we also have a discord face book you can find all of that in description and I will see you in the next video bye you

Channel: Robert Brunhage

Views: 19,516

Rating: 4.9132419 out of 5

Keywords: Flutter things I wish I knew, Flutter tips, Flutter mistakes, Flutter tutorial, Flutter tips and tricks, Flutter vscode, flutter, Flutter 5 things I wish I knew, Things I wish I knew when started Flutter, Things I wish I knew when started programming, Flutter for beginners, Flutter tips for beginners, Flutter beginner mistakes, Flutter common mistakes, Flutter getting started, Improve in Flutter, Dart, Flutter Dart, Flutter bird, Flutter tutorial for beginners

Id: ezewQc8OW1k

Length: 12min 22sec (742 seconds)

Published: Fri May 15 2020

Reddit Comments

[u/satvikpendem]

1. Start small projects
2. State management
3. Extract methods and widgets
4. Test your project early
5. Design your app

[u/dimension-software]

Solid tips and to your point about keeping the projects small as possible: we do similarly with our Components, especially since the look & feel is baked into the structure which can often times be unwieldy for those coming from React/Native, etc...

[u/abhishekmah98]

Good one