Building your first Flutter Widget



hi everyone I'm Martin from the flutter team and today I'm going to show you how flutters widget composition can help you quickly build out a beautiful interface for your applications if you haven't tried flutter yet it's Google's new mobile UI SDK that can help you quickly build native ios and android apps from a single codebase widgets are the building block of any app built with flutter and their functionality spans from providing a framework for your entire app like the scaffold widget to accepting input like text field us or even animating an ink splash every Widgit has its own particular purpose and you the developer build your app through composition putting individual widgets together until they add up to a great interface let me give you an example see you're an engineer at a shop that builds mobile apps for other companies and one day your biggest client comes to the office and says we have to talk about an action button on our shopping app the look just isn't working we need something that really feels like our brand as a flutter developer you can say no problem have a seat and I'll pull up the code alright so here's your clients app and if we zoom in you can see this default looking floating action button there's nothing wrong with the basics but you can see why the client might want something a little more custom and here's the code that produces the UI you just saw it's written in the dart programming language which is what flutter uses there is the my home page class up at the top and here's the bit we're interested in the floating action button let's create a new file and define a new widget to use instead of the default we'll call it fancy button there we go let's import a couple of the basic flutter packages there's the foundation and the material package that's got a ton of widgets in it and I'll defined fancy button as an extension of stateless widget I'm gonna skip over the details of stateless widget for now the important thing as far as we're concerned is as stateless widgets don't have mutable properties or state that can change you just construct one and it's good to go speaking of properties let's give the button a callback for when it's pressed and we'll need a constructor to inject the callback so let me add that if you're new to dart you may not have seen this in a constructor before it just means that the constructor should have a parameter that matches the property and handles the assignment for you I can also put braces around the parameter to make it an optional named parameter you'll see how this works when this gets invoked and use the required annotation to make sure it's always passed in and there's one method I need to implement here which is build this is called by flutter and it's basically a way of asking your widget hey who are your children what widgets are below you in the hierarchy I've just got a placeholder null in here so that I can go back to my home page let's get the new file imported and then I'll come down here and replace the default button with my widget and you can see the name parameter for unpressed I'll give it the same method that the other button was firing okay let's get back to fancy button and the build method this is where the composition happens I'm gonna start putting child widgets together to define how this widget looks and performs let's start with some text maybe the client wants the button to say purchase now I'm gonna build this and since this is the first build it's gonna take a few seconds once the app is up and running we can use hot reload to cut the foot refresh time to less than a second but more on that later in the meantime there's the interface and there's the word purchase in the corner so we got something going okay so we need this widget to do more than just print black text and in flutter you can add a capability by putting widgets together so let's wrap the text with a basic button called raw material button the text widget now becomes its child and all add a common at the end here so that the auto formatter makes it look nice and pretty raw material button has a few properties so let's start with color I'll fill it with deep orange and use regular orange for the ink splash now let's save and do a hot reload that's gonna update the apps code without restarting the app and there's my updated button in about 400 milliseconds now I'm tapping on the button here and as you can see there's no splash which is because we haven't given this raw material button anything to do so let's give it the fancy buttons on press callback and a hot reload later I get a nice splash what's next say the client wants a rounded button I can do that by giving mine a stadium border as its shape and I can call that constructor with the Const keyword here that's always nice in fact it reminds me I don't need the new on raw material button the new keyword is optional in dart too so I can pop it right out okay let's hot reload and see the new shape boom rounded edges this quick cycle of making a change see the result making the change see the result is something flutter was designed from the start to provide alright what else can we do let's give the text a little more pop by changing it to white there's a style property for text widgets that can help me with that we can give it a textile object with the color set to white okay I've got some white text what about more padding sounds like a fun job for the padding widget I'll wrap the text in an instance of padding and I'll make it symmetrical 8 for vertical and 20 for horizontal and hot reload there's the padding what else might the client want how about an icon a lot of buttons have icons prom here is that padding takes a single child but we wanted to have two text and an icon so we need a container flutter has a number of them and they are as you probably guessed also widgets we can use a ro widget to display the icon and text widgets next to each other horizontally instead of a child property ro has a property called children which takes a list of widgets let me finish up by getting the icon in there alright and now to hot reload again and whoa that's not right looks like I forgot to set the main axis size for the row the main axis for a row is horizontal so this code tells the row widget to use the smallest amount of space it can alright let's hot reload again there we go this is another nice thing about hot reload I just messed up the UI by forgetting this set of property and I was still able to go back out of fix and keep going without a restart next how about a little space between the icon and text there's a great widget for that called size box you can give it a dimension or two and it'll take up some space and you know what all three children of the row are constants so let's just move that cost up to the lists itself there we go alright hot reload and there's size box at work not bad at this point we've composed a completely new button with six widgets each of them handling its own particular responsibilities and combining to give the client a button that's vibrant and unique so far we mostly use widgets to control basic presentation details but they can do a lot more for example say you're displaying an image and you'd like to know when the user taps on it just wrap the image in a gesture detector widget there are properties for taps long presses drags and more just like the graphics focus widgets you've seen gesture detector handles it's one particular area of responsibility and that's it alright let's get back to the app and put some more widgets to work okay we're back with a button let's say the clients so impressed with what you've done that they really want to push the envelope how about a vertical floating action button no problem there's a widget for rotating other widgets it's called rotated box and we can give it 3/4 turns and get this which you know it's vertical and everything but maybe just because you can do a thing doesn't mean you should so let's pack it out with the remove widget you can use rotated box on a lot of stuff though say the client preferred the little compass icon to point the other way no problem there it is leaning back instead of forward by the way so far I've been composing with widgets that are part of core flutter but it works the same with widgets built from scratch for example let me drop some code in here real quick say I had another widget that I'd already built called pulse animator and with a child property of its own and it's job was to apply a pulsing animation to the child you can use the same composition strategy with it that you do with the stock widgets here I'll add it to the hierarchy and make this text its child and when I hot reload there's the animation so there you go that's eight widgets in combination to make a great button and a happy client so now we've got an updated app and a happy client all thanks to widget composition that's it for today but if you'd like to learn more about flutter we've got links to guides sample apps and a bunch of other resources in the video description below so check those out and head to flutter IO to get started today

Leave a Reply

Your email address will not be published. Required fields are marked *