In this video, Emmanuel Henri explores the basics of widgets and then adds some code to demonstrate.
- [Instructor] Any Flutter application is built on widgets. And if you're familiar with components on React, widgets follow a similar approach where a widget can be stateless or stateful, the latter which has a state. If you're not familiar with the component approach, then a widget is simply the building block of an application, for example, your main page, your tab, a button, so on and so forth. So let's explore our base application to understand what these are. So make sure you main.dart as the first file open, and if you want, you can leave the debugger running.
So what I did, I simply moved it to the side here, and I have my emulator here running. And you want to make sure that you are in Explorer, so if you are in the debugger, just click on Explorer, and then click on main.dart. So as you can see right now, we have a widget. So every time you see class My App extends either StatelessWidget or StatefulWidget, then this is a widget. So right now, this is our main widget. So this is the main application here and it's called MyApp, which is executed when the main application runs.
So what you want to do is take a look at the other. So here we have a stateful widget, which is the MyHomePage. And then you have a class, which is this one is the actual state. So this is not a widget. This is the state of the application, and this works very similarly to React, so we have a state that includes a counter, which is an integer and that counter is literally the counter that we have here. So whenever we click on this plus here, the counter is increased is by one, and therefore the state is updated with a counter number as five, and so on and so forth.
Everything else is all widgets. So whenever you're using a text, whenever you're using a tab or any of the components for the explorer throughout this course, it is a widget. So if we take a look at the application, let's scroll all the way down till we see a text widget. In my home page, we have a Column, this is a widget/ We have the Center, this is also a widget. The AppBar is an actual widget. These are all widgets that are included with Flutter, so you don't need to see the code behind it.
But if you want to, you can take a look at the SDKs. The text is also a widget. So whenever you see something new, and then something and then pass some properties, so the column takes a few properties, so MainAxisAlignment is a property of Column, this is a widget that actually takes these states. And we'll explore this a little bit further down in this course. So these are all widgets. So if we take a look at the text, the text actually takes a text, so right now we have a widget.title that is passed to it.
So let's scroll up, where we see the widget.title, and it's passed right here. So we have Flutter Demo Home Page, which is here. So if we pass, if we change this to MyApp, and then save, the application will be updated with MyApp. And this is something that is really cool developing with Flutter because we get Auth Reload automatically. So whenever you make changes, you can see right away your changes, except when you add packages, and we'll get to that as well.
So for example, if you wanted to add some text, we can scroll all the way down to the actual section where we do that. So here you have Column, and what I'm going to do between this video and the next, I'm going to remove all the green comments. You can keep them if you want. I'm going to remove it so we actually have just the code and we can focus on that. So just a note to self. So we have a text here. So "You have pushed this button this many times." So I could change this to, for example, "Manny has pushed," "Manny has pushed the button "this many times." we could also add a second text.
So what we're gonna do is add a second line of text. And we could copy that and then paste it after here and then do something like, "Hey wait. I'm new here." Because it's using single quotes, let's use double quotes to make sure we can use the "I'm new here," like so. Perfect, so we added a second text which is the text.
So I'm using a second widget of Text and I'm adding a string to it, and then just save that, and then you can see "Manny has pushed the button "this many times. Hey wait. I'm new here." So this is how easy it is to play in code with a Flutter application. So if you want to go ahead and play a little bit and add some new widgets here and leverage some of the widgets that are a part of the library, feel free to add them here and experiment in this particular application here.
So let's move on.
- Programming with Dart
- Setting up the Flutter SDK
- Setting up app simulators
- Using Flutter for iOS
- Using Flutter for Android
- Using widgets and material components
- Adding interactivity, routing, and navigation
- Reading and writing with Dart IO
- Creating HTTP requests