Building your first Flutter Widget

MARTIN AGUINIS: Hi, everyone. I’m Martin from the Flutter team. Today, I’m going to show you how Flutter’s widget composition.


MARTIN AGUINIS: Hi, everyone. I’m Martin from
the Flutter team. Today, I’m going to show you
how Flutter’s 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 does, or even animating an ink splash. Every widget 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. Say 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. All right. So here’s your client’s 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 MyHomePage
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 FancyButton. There we go. Let’s import a couple of
the basic Flutter packages. There is the foundation and
the material package that’s got a ton of widgets in it. And I’ll define
FancyButton as an extension of stateless widget. I’m going to skip
over the details of stateless widget for now. The important thing, as
far as we’re concerned, is that stateless widgets
don’t have mutable properties or a 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 call 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. You can see the name
parameter for onPressed. I’ll give it the same
method that the other button was firing. OK. Let’s get back to FancyButton
and the build method. This is where the
composition happens. I’m going to 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 going to build this. And since this is
the first build, it’s going to take
a few seconds. Once the app is
up and running, we can use hot reload to
cut the 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’ve got something going. OK. 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 I’ll add a
comment 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 going to
update the app’s code without restarting the app. And there is 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 onPressed call back 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 a 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 2, so I can pop it right out. OK. 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. All right. What else can we do? Let’s give the text
a little more pop by changing it to white. There is 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. OK. 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. The problem here is that
padding takes a single child. But we want it 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 row widget to
display the icon and text widgets next to each
other horizontally. Instead of a child property, row
has a property called children, which takes a list of widgets. Let me finish up by
getting the icon in there. All right. 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
row is horizontal. So this code tells
the row widget to use the smallest
amount of space it can. All right. Let’s hot reload again. There we go. This is another nice
thing about hot reload. I just messed up the UI by
forgetting to set a property and I was still able
to go back, add a fix, and keep going
without a restart. Next, how about a little space
between the icon and text? There is a great widget
for that called SizeBox. You can give it a
dimension or two and it will take up some space. And you know what? All three children of
the row are constants. So let’s just move that
const up to the list itself. There we go. All right. Hot reload. And there’s SizeBox 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’ve
mostly used 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
GestureDetector widget. There are properties for taps,
long presses, drags, and more. Just like the graphics-focused
widgets you’ve seen, GestureDetector handles
it’s one particular area of responsibility and that’s it. All right. Let’s get back to the app and
put some more widgets to work. OK. We’re back with a button. Let’s say the client’s
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 is a widget for
rotating other widgets. It’s called RotatedBox and
we can give it 3/4 turns and get this. 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 RotatedBox 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 PulseAnimator, with
a child property of its own, and its 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 is 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.

100 thoughts on “Building your first Flutter Widget”

  1. How to use VS Code Assist & Quick fix to invoke "wrap with Row" when the cursor is selected the child? (I'm using MacOS)

  2. What about complex layouts?
    If you want to build a page with lots of widgets placed in a certain order with a certain relation to parent and to other widgets – it's easy to do with native ConstraintLayout in a single xml.
    But can you imagine the mess in code if you want to construct this layout with code also adding there listeners and other business logic. It will be a hell in code.

    Not all apps are just a list with a floating button.
    How do you manage such cases?

  3. 5:47 How does these context menu items coming for him? I had to use flutter outline window to achieve this.

  4. I'm kinda confuesd. We normally just need to write some html code for a button with a little css classes to beautify it, but this video tutorial seems far more complicated to do such thing.

  5. Nowadays they are changing languages syntax and everyone wants own syntax but in c and c++ time more languages were influenced from old languages.

  6. I had to create a flutter app in Android Studio, and use visual studio emulator for Android.
    Why all these mess?
    Why can't you guys make something as simple as, click next install, code then run.???

  7. I'm Android developer using Java for my codes. Few month ago, I started to learn Kotlin language, because all Android Doc, videos and presentation were in Kotlin.
    Few days ago, I read some news about Google have been planning to change Android O.S for Fuchia O.S in the next 5 years.
    I've searching about Fuchia and discovered that for Fuchia development, I'll have to use Flutter and Dart…
    So I have a question for you guys:
    Where I have to focus my studies?!

  8. I m getting one error while installing flutter…how is will be solved??
    Error is when I m setting environmental variable after that I m using flutter doctor in cmd but that is not working and showed the error of unable to find git path

  9. what was so wrong about including the reserved keyword "new". Also, it seems that Flutter is just nesting widgets upon widgets to create an amazing widget. Nice effects! Also, all the material design principles are embedded in each widget. I need to learn how to include it in my Java code on Android Studio.

  10. if flutter works with widgets it should be possible to get the basic visual code for your app by simply importing from a design/prototyping software. That would be so much nicer

  11. @04:50 he already assigned colors to the button. can anyone help me how to display or show the square color boxes right next to the ruler or line numbers in VS Code particularly. Thanks for everyone who can help out.

  12. Still i couldn't find a job as a flutter developer. At least an internship. Can anyone help me to find something like that to increase my flutter skills buy using it reality.

  13. It's kinda strange to see google pushing java, kotlin and flutter as a mobile development strategy at the same time… Which one should we really invest our time in?

  14. Anyone know what plugin is being used to color the parentheses and brackets? Or is that something I need to configure myself in the editor settings?

  15. "At this point we composed the completely new button with six widgets…"

    Come on, SIX widgets to create ONE button! How many objects were instantiated to create a single element of an interface?

  16. I dont understand why some people are giving negative reviews about flutter. If you can build better platform than this one, you are more than welcome. About flutter, it is the only platform I liked sooo much that I am going to invest in learning it. Google is actively making this platform better and better. And about ui, this is the easiest and fun part to build any complex ui with flutter. Much better than react native and ionic. You can check out videos of people building complex ui easily. Try doing so in react native or android studio with xml. Here I rest my case. I love flutter and I respect Google for creating such an awesome tool. Keep innovating Google.

  17. dear developer I am start design layout of flutter mobile app I don't how to create slider behind silver AppBar pls advice me or give the example thanks

  18. i am from china.we want to creat a app for hospital.but we dont know chose react native or flutter.we have 20 fontend enginer,we all good at react,but flutter is populer now,so which we should chose

  19. Is it possible to emulate android and ios cellphones simultaneously? side by side? (and use them to communicate with eachother)

  20. Thanks for tutorial. May you give PulseAnimation Widget example? It is really interesting for me for training )) P.S. I'm an iOS Swift/Objective-C.

  21. I guess a "first Flutter Widget" is not a my first Flutter demo.. Is there anything on this channel for an actual beginner?

  22. Crazy hell! I died with Views and trying to create widgets for the last 5 years and hell ya, look at this cool thing! Man you've done a fantastic job in explaining

  23. Nice, you shove up OOP in the heads of everyone and now, going all Reactive/Functional with Kotlin/Dart.
    I smell React/ReactNative, but created from scratch and more messy code?
    Good time for mobile developers to switch jobs 😛

  24. I am very new to Flutter, and stuck at the following error: package:http/http.dart That library is in a package that is not known. Maybe you forgot to mention it in your pubspec.yaml file?

    Please help in resolving this error.

  25. Hi. I've installed latest version of Flutter, 1.5. Now when I want to install external packages, get this error:
    HTTP error 403: Forbidden

    package:pub/src/http.dart 218:5 _ThrowingClient.send

    ===== asynchronous gap ===========================

    I search a lot, but no help! :[

    I had seen below links already. But no help!!! What should I do? I couldn't do anything with the Flutter! Could you guide me? thanks.

    https://github.com/flutter/flutter/issues/21565

    https://www.dartlang.org/tools/pub/troubleshoot#pub-get-fails-from-behind-a-corporate-firewall

  26. I like flutter and what it can do, but still not comfortable for the idea of typing too much code just to make a button! Amount of widgets used here and there bother me. But I can't deny it is very very customizable. I hope there will be a drag&drop panel for UI so I can configure all elements in it and it will generate code, I think I will enjoy it more.

  27. Am not getting that virtual device bcos of less space. Is their is another way to see the same output without virtual device?

  28. why you copy the animation code instead of explaining it..and as well you are also not explain how it works !!

  29. How to integrate WordPress with Flutter and dealing to build Mobile App since many owners have sites with WordPress?

    we need videos related to that topics and how database will work between each of them specially I am new in that field

  30. 0:32 I thought he was going to say “And you, are also a widget, the whole society and the human-computer interactions are a huge widget tree.”

Leave a Reply

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