Learn the basics of Flutter in 12 minutes. Take a hands-on tour of Flutter's most important building blocks to start building apps for iOS, Android, the web, and desktop.  https://fireship.io/courses/flutter-firebase/basic-training/

🔥 Get The FULL FlutterFire Course - Upgrade to PRO
💰 30% off (expires 11/23) with code: ibTd664q

#flutter #dev #learntocode

🔗 Resources

Full Course: https://fireship.io/courses/flutter-firebase/
Flutter Docs https://flutter.dev/
Hire Rolly Peres for Flutter Dev https://github.com/narcodico or rolly@narcodic.com

📚 Chapters

00:00 Flutter Basic Training
00:56 Get Started
02:36 Stateless Widget
03:20 Material App
03:58 Container
05:07 Flex Layout
06:07 Stack
07:00 Scaffold Magic
07:27 Debugger
07:47 ListView
08:09 Builder
08:25 Stateful Widget
09:32 Advanced State Management
10:03 Navigator
10:51 Hero


🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Flutter Tutorial for Beginners
- Flutter Flex Layout
- Stateless vs Stateful Widgets
- Navigation in Flutter
- Flutter for Mobile Dev on iOS and Android
2024-02-04T05:39:52.343Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
1f9b7ce7-1be1-4589-822e-97072b3396b5
9fb7080200bbe6769b83fc8f0cfe04d1e5d150f478ee0dd110a94e5681eac13f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Welcome to Flutter basic training.
By the end of this video, you'll be shipping apps on iOS, Android, the web, and desktop.
You will not laugh.
You will not cry.
You will learn by the numbers.
I will teach you.
Flutter is quickly becoming the world's most popular cross platform framework, Thanks to its awesome developer experience and ability to ship high quality apps on multiple platforms.
It's unlike anything else out there, which also means that it has a steeper learning curve.
To good at it, you'll need to stop watching YouTube and start building something.
I created a bunch of satisfying examples that we'll go through together, designed to make you a productive full stack water Developer.
There are certain things they don't tell you when you first get started, like it's a 100 times faster to refactor your code by hitting control period than it is to do manually.
We'll look at a ton of productivity boosters like this, and at the end of basic training, I'll give you a certificate that you can frame on your wall.
And if you wanna go beyond a 6, I just released a brand new Flutter course available to pro members on FireShip IO.
There's an ephemeral discount in the video description.
To get started, you'll need to use the most important skill for any developer, following directions.
Head over to flutter.dev and follow the install instructions for your system.
Or if you want an easier way to get started, DartPad allows you to edit and run Flutter code in the browser.
Now, open the terminal and create a new project by running Or create.
Now open it in Versus Code and make sure to have the Flutter extension installed.
At the bottom, you'll see an option to select a device like Windows, Chrome, or a A mobile emulator.
I'm going to run my app in Android by running Flutter run from the command line.
Now, find your application code in the main Read in between the lines to find a color or icon in your UI.
Change one of these values to something else.
You'll notice that when you type after the period, everything is Auto completed in the IDE, tooling is partly what makes Flutter development so productive.
If you don't leverage it, you are not going to survive basic training.
If you survive recruit training, You will be a weapon.
Save the file.
Now, type a lowercase r into the terminal.
That performs a hot reload, allowing you to instantly see the Changes in the UI without having to rebuild the entire app.
Now, take all the code in this file and delete it.
We're going to start from scratch.
1st, import the Flutter material package at Atop.
This gives you access to hundreds of pre built widgets in your code, ranging from low level building blocks like text to complex UI elements like a page view That performs animation and layout.
As a Flutter developer, you'll need to learn how to combine these widgets together into a tree like structure To create a complex UI.
But first, we need a main function.
This is where the program will start executing.
Flutter has a global function called run app.
It takes a single widget as its argument and will inflate that widget to the screen on whatever device it happens to be running on.
Let's create a custom widget to represent the application.
Type s t into your editor and it should automatically give you a snippet for a Flutter stateless widget.
Hit tab to insert it, then give it Name like my app.
Notice how this class extends a stateless widget.
That's a class built into Flutter that you use when creating a UI element That doesn't have any internal data.
In other words, it's just a dumb widget that paints some pixels to the screen.
You'll notice it has a constructor with a key.
You don't need to worry about that for right now.
But if you hover over it, you'll notice that it has a link to a YouTube video explaining more because Flutter's documentation is absolutely awesome.
The thing you do need to know about is the build method.
This method returns a widget and will be called anytime Flutter needs to rebuild the UI, like when your data changes.
The first widget we'll return is a material app.
It's used as the root of the application and allows us to configure themes and routes.
Perform a hot reload and you should have a blank canvas to work with.
We can Quickly add a screen to it by adding a scaffold to the home property.
A scaffold allows you to build screens with common UI elements, Like an app bar at the top.
Every prebuilt widget has a bunch of named parameters where you can customize its appearance.
Put your cursor inside a widget, then hit control spacebar to bring up all The options.
Go ahead and add a background color, then add a title by creating a text widget.
Now, hot reload to check out your first Flutter screen.
That's pretty cool, but there's no time to celebrate.
Now, we need to talk about layout or how do I put widgets where they need to go in the screen.
The most fundamental way to layout a widget is with a container.
It's kind of like a div in HTML or a view in Android.
It takes one child widget as an argument.
We can make that a text widget for now, which will place it in the top left corner of Screen.
You can think of it being surrounded by a box, and we can change the dimensions of that box by adding margin and padding.
We can also customize things It's like the height, width, and color.
We can also make the box look a lot cooler using the decoration property.
It takes a box decoration widget as its argument, Which allows us to customize things like the border, gradient, shape, and shadow of the box.
Containers do a lot, but Flutter has some other widgets that are more Focused.
For example, if you just want to center a widget in the middle of the screen, you can do so by wrapping it with center.
Now, you could write that code manually, but if you want to have a good time, you'll right click on the widget or hit control period to find the refactor tool, then select the option to wrap with center to write that code for You automatically.
Another tip is that if you're using a container to apply some padding, use the padding widget instead.
Or if you're creating a container with a fixed width and height, Use the size box widget instead.
But, how do we deal with multiple related widgets like a row or column?
That's where flex layout comes in.
If you're familiar with CSS Flexbox, you'll be way ahead of the game here.
Flutter provides row and column widgets used to layout multiple children horizontally or vertically.
Unlike a container that takes only 1 widget as a child, a column takes multiple children as a list.
Create a column, then add 3 icons inside of it.
You'll notice that Each icon is laid out one after the other vertically.
Change that widget to a row and now they flow horizontally.
The direction they flow is called the main access, while the opposite direction is the cross axis.
You can change the spacing and alignment between the children by modifying the cross axis and main axis alignment on the widget.
By default, each child has a flex value of 1, which means that each sibling occupies the same amount of space.
If that's not desirable, You can wrap a child in a flexible or expanded widget.
Expanded tells a child to take up any available space, and you can give it more space than the other children by modifying its flex value.
But in some cases, you may want to have one widget overlap another, like a button that floats on top of some other UI element.
In that case, the widget we're looking or is a stack.
Just like a row or column, it takes a list of children as an argument.
And just one little side note here, you'll notice that I'm using a trailing comma after every block of code.
The comma is not required, but it keeps your code nicely formatted.
If you right click and choose format document, it will format it with multiple lines as opposed to one line when the comma is missing.
Now in our stack, we might have a container and an icon.
If we want to display the icon on top of the container, we make sure that it comes after the container in the list.
Now if we want to move things around, We can use positioned to move a widget into a specific spot, kind of like absolute positioning in CSS.
Or if we want to modify its positioning relative to its parent, we can use align to move it to the top, left, bottom, right, or center.
Those are your low level building blocks for layout, but Flutter takes care of many UI elements out of blocks.
For example, if we add a floating action button to our scaffold, that button magically appears down here at the bottom right.
The floating action button widget has an event handler They're called onPressed.
We can define an anonymous function here to handle the gesture.
If we then want to add a bottom bar to it, we can use the bottom bar widget to add some navigation icons to the scaffold.
We also need a drawer that animates out from the left.
We can achieve that by simply adding a drawer to the scaffold.
That's pretty awesome, but eventually, you'll lay out your widgets and they will overflow the bounds of their parent, which will summon the red screen of death or this black and yellow error tape.
When you get an error like this, the terminal output will link you to Flutter's built in debugger.
That'll give you more information about layout to help debug things like this.
In this case, the The problem is that our parent is not a scrollable view.
Things don't just scroll automatically.
Instead, you need to use a widget like list view.
It takes a list of as its argument, but will scroll between them.
It can scroll both horizontally and vertically, and you can even tell it to garbage collect items that are no longer on the screen.
You'll notice that this list, we're adding each widget individually.
But in real life, you'll often need to fetch a bunch of items from a database and then create each list item programmatically.
In Flutter, many widgets can be built dynamically using builders, which is just a function that you define that can map a list of data to a list of widgets.
And that means can create a scrollable list that is infinitely long, where the children are rendered lazily, keeping the UI smooth and fast.
Now that you know how to build a UI, we need to talk about state, Or the data that changes throughout the life cycle of the app.
A stateless widget has no state as the name implies.
To give this widget mutable data, we need to convert it To a stateful widget, which we can do by right clicking, going to the refactor tool, and choosing the option to convert it.
That will break the widget up into 2 different classes.
That keeps the widget itself immutable while giving us a state class where we can play with mutable data.
It has a build method, but we can also define variables on this class And then change them by using the built in set state function somewhere else in our code, like when a button is pressed.
We can create a counter app by defining a property called count, then reference the value in the UI using a text widget.
When working with strings in Dart, you can interpolate a Variable inside of it with a dollar sign.
Now when our button is pressed, we call set state to change the value, and the widget will automatically Rerender to reflect the latest data.
Another thing you might wanna do in a stateful widget is initialize data, like maybe fetch a record from a database.
The init state method is called once when the widget is first initialized, and there's also another life cycle hook called dispose that runs when the widget is removed from the UI.
Now you should know that this is not the only way to manage state in Flutter.
In fact, there are many different approaches And many strong opinions out there about this topic.
In my full course, I use a package called provider that allows us to share real time data throughout the entire widget tree without ever needing to use a stateful widget at all.
There are also full blown solutions out there like Block and Qubit.
The full course also contains a repo of the same app built with Qubit.
I wanna give a shout out to Raleigh Perez for putting that demo together.
If you're looking to hire a Flutter developer, you'll definitely want to get in touch with him.
Now we have a fully functional counter app, the question becomes, how do we navigate to a different screen?
Well, confusingly, Flutter has navigator 1.02.0, and all you need to know for Sick training is 1 point o.
At this point, go ahead and build 2 different stateless widgets, then give each one of them a scaffold.
Make sure that each scaffold has an app bar at the top.
In the first page, go ahead and add a button to the body of the scaffold.
Now think of your navigation like a stack, where you can push and pop Different screens onto it.
To add a new screen to the top of the stack, we use navigator push with the build context, then create a new material page route.
The route expects a builder function, which then returns the screen that you want to render, which in our case will be page 2.
Now do a full restart of the application And by typing a capital r into the command line, and you should be able to navigate back and forth between the two pages.
One magic thing that Flutter Doing here is adding a back button to the app bar, which under the hood is calling the navigator pop method.
That was easy, but I want to finish things off with something really Cool.
Flutter has a hero widget that can animate elements from one screen to another.
So check this out.
On page 1, I have an icon button with an image as Background.
Then on page 2, I'm showing the same image taking up the full screen.
That works, but I think we could do a little better.
The magic comes into play when I wrap these images in a hero.
The only argument the hero needs is an ID to identify it when it gets animated to the other page.
Flutter will use the ID to keep the image in the UI on both pages While the navigation is taking place.
Now on the other screen, we'll also use a hero widget with the image inside of it.
When we navigate to this route, you'll notice the image itself is animated Between the two screens automatically, it makes the biggest impact when you have a list of images to navigate to.
Not only does it look awesome, but it would be extremely difficult to Implement from scratch.
Congratulations.
You just completed basic training for Flutter.
Take a screenshot of the certificate and frame it on your wall.
If you wanna go beyond the basics, Become a pro member at Fireship IO to get access to the full Flutter 2 course, where we build a complex application with Firebase.
Thanks for watching and I will see you in the next one.

Speaker 0: Welcome to Flutter basic training. By the end of this video, you'll be shipping apps on iOS, Android, the web, and desktop. You will not laugh. You will not cry. You will learn by the numbers.

I will teach you. Flutter is quickly becoming the world's most popular cross platform framework, Thanks to its awesome developer experience and ability to ship high quality apps on multiple platforms. It's unlike anything else out there, which also means that it has a steeper learning curve. To good at it, you'll need to stop watching YouTube and start building something. I created a bunch of satisfying examples that we'll go through together, designed to make you a productive full stack water Developer.

There are certain things they don't tell you when you first get started, like it's a 100 times faster to refactor your code by hitting control period than it is to do manually. We'll look at a ton of productivity boosters like this, and at the end of basic training, I'll give you a certificate that you can frame on your wall. And if you wanna go beyond a 6, I just released a brand new Flutter course available to pro members on FireShip IO. There's an ephemeral discount in the video description. To get started, you'll need to use the most important skill for any developer, following directions.

Head over to flutter.dev and follow the install instructions for your system. Or if you want an easier way to get started, DartPad allows you to edit and run Flutter code in the browser. Now, open the terminal and create a new project by running Or create. Now open it in Versus Code and make sure to have the Flutter extension installed. At the bottom, you'll see an option to select a device like Windows, Chrome, or a A mobile emulator.

I'm going to run my app in Android by running Flutter run from the command line. Now, find your application code in the main Read in between the lines to find a color or icon in your UI. Change one of these values to something else. You'll notice that when you type after the period, everything is Auto completed in the IDE, tooling is partly what makes Flutter development so productive. If you don't leverage it, you are not going to survive basic training.

If you survive recruit training, You will be a weapon. Save the file. Now, type a lowercase r into the terminal. That performs a hot reload, allowing you to instantly see the Changes in the UI without having to rebuild the entire app. Now, take all the code in this file and delete it.

We're going to start from scratch. 1st, import the Flutter material package at Atop. This gives you access to hundreds of pre built widgets in your code, ranging from low level building blocks like text to complex UI elements like a page view That performs animation and layout. As a Flutter developer, you'll need to learn how to combine these widgets together into a tree like structure To create a complex UI. But first, we need a main function.

This is where the program will start executing. Flutter has a global function called run app. It takes a single widget as its argument and will inflate that widget to the screen on whatever device it happens to be running on. Let's create a custom widget to represent the application. Type s t into your editor and it should automatically give you a snippet for a Flutter stateless widget.

Hit tab to insert it, then give it Name like my app. Notice how this class extends a stateless widget. That's a class built into Flutter that you use when creating a UI element That doesn't have any internal data. In other words, it's just a dumb widget that paints some pixels to the screen. You'll notice it has a constructor with a key.

You don't need to worry about that for right now. But if you hover over it, you'll notice that it has a link to a YouTube video explaining more because Flutter's documentation is absolutely awesome. The thing you do need to know about is the build method. This method returns a widget and will be called anytime Flutter needs to rebuild the UI, like when your data changes. The first widget we'll return is a material app.

It's used as the root of the application and allows us to configure themes and routes. Perform a hot reload and you should have a blank canvas to work with. We can Quickly add a screen to it by adding a scaffold to the home property. A scaffold allows you to build screens with common UI elements, Like an app bar at the top. Every prebuilt widget has a bunch of named parameters where you can customize its appearance.

Put your cursor inside a widget, then hit control spacebar to bring up all The options. Go ahead and add a background color, then add a title by creating a text widget. Now, hot reload to check out your first Flutter screen. That's pretty cool, but there's no time to celebrate. Now, we need to talk about layout or how do I put widgets where they need to go in the screen.

The most fundamental way to layout a widget is with a container. It's kind of like a div in HTML or a view in Android. It takes one child widget as an argument. We can make that a text widget for now, which will place it in the top left corner of Screen. You can think of it being surrounded by a box, and we can change the dimensions of that box by adding margin and padding.

We can also customize things It's like the height, width, and color. We can also make the box look a lot cooler using the decoration property. It takes a box decoration widget as its argument, Which allows us to customize things like the border, gradient, shape, and shadow of the box. Containers do a lot, but Flutter has some other widgets that are more Focused. For example, if you just want to center a widget in the middle of the screen, you can do so by wrapping it with center.

Now, you could write that code manually, but if you want to have a good time, you'll right click on the widget or hit control period to find the refactor tool, then select the option to wrap with center to write that code for You automatically. Another tip is that if you're using a container to apply some padding, use the padding widget instead. Or if you're creating a container with a fixed width and height, Use the size box widget instead. But, how do we deal with multiple related widgets like a row or column? That's where flex layout comes in.

If you're familiar with CSS Flexbox, you'll be way ahead of the game here. Flutter provides row and column widgets used to layout multiple children horizontally or vertically. Unlike a container that takes only 1 widget as a child, a column takes multiple children as a list. Create a column, then add 3 icons inside of it. You'll notice that Each icon is laid out one after the other vertically.

Change that widget to a row and now they flow horizontally. The direction they flow is called the main access, while the opposite direction is the cross axis. You can change the spacing and alignment between the children by modifying the cross axis and main axis alignment on the widget. By default, each child has a flex value of 1, which means that each sibling occupies the same amount of space. If that's not desirable, You can wrap a child in a flexible or expanded widget.

Expanded tells a child to take up any available space, and you can give it more space than the other children by modifying its flex value. But in some cases, you may want to have one widget overlap another, like a button that floats on top of some other UI element. In that case, the widget we're looking or is a stack. Just like a row or column, it takes a list of children as an argument. And just one little side note here, you'll notice that I'm using a trailing comma after every block of code.

The comma is not required, but it keeps your code nicely formatted. If you right click and choose format document, it will format it with multiple lines as opposed to one line when the comma is missing. Now in our stack, we might have a container and an icon. If we want to display the icon on top of the container, we make sure that it comes after the container in the list. Now if we want to move things around, We can use positioned to move a widget into a specific spot, kind of like absolute positioning in CSS.

Or if we want to modify its positioning relative to its parent, we can use align to move it to the top, left, bottom, right, or center. Those are your low level building blocks for layout, but Flutter takes care of many UI elements out of blocks. For example, if we add a floating action button to our scaffold, that button magically appears down here at the bottom right. The floating action button widget has an event handler They're called onPressed. We can define an anonymous function here to handle the gesture.

If we then want to add a bottom bar to it, we can use the bottom bar widget to add some navigation icons to the scaffold. We also need a drawer that animates out from the left. We can achieve that by simply adding a drawer to the scaffold. That's pretty awesome, but eventually, you'll lay out your widgets and they will overflow the bounds of their parent, which will summon the red screen of death or this black and yellow error tape. When you get an error like this, the terminal output will link you to Flutter's built in debugger.

That'll give you more information about layout to help debug things like this. In this case, the The problem is that our parent is not a scrollable view. Things don't just scroll automatically. Instead, you need to use a widget like list view. It takes a list of as its argument, but will scroll between them.

It can scroll both horizontally and vertically, and you can even tell it to garbage collect items that are no longer on the screen. You'll notice that this list, we're adding each widget individually. But in real life, you'll often need to fetch a bunch of items from a database and then create each list item programmatically. In Flutter, many widgets can be built dynamically using builders, which is just a function that you define that can map a list of data to a list of widgets. And that means can create a scrollable list that is infinitely long, where the children are rendered lazily, keeping the UI smooth and fast.

Now that you know how to build a UI, we need to talk about state, Or the data that changes throughout the life cycle of the app. A stateless widget has no state as the name implies. To give this widget mutable data, we need to convert it To a stateful widget, which we can do by right clicking, going to the refactor tool, and choosing the option to convert it. That will break the widget up into 2 different classes. That keeps the widget itself immutable while giving us a state class where we can play with mutable data.

It has a build method, but we can also define variables on this class And then change them by using the built in set state function somewhere else in our code, like when a button is pressed. We can create a counter app by defining a property called count, then reference the value in the UI using a text widget. When working with strings in Dart, you can interpolate a Variable inside of it with a dollar sign. Now when our button is pressed, we call set state to change the value, and the widget will automatically Rerender to reflect the latest data. Another thing you might wanna do in a stateful widget is initialize data, like maybe fetch a record from a database.

The init state method is called once when the widget is first initialized, and there's also another life cycle hook called dispose that runs when the widget is removed from the UI. Now you should know that this is not the only way to manage state in Flutter. In fact, there are many different approaches And many strong opinions out there about this topic. In my full course, I use a package called provider that allows us to share real time data throughout the entire widget tree without ever needing to use a stateful widget at all. There are also full blown solutions out there like Block and Qubit.

The full course also contains a repo of the same app built with Qubit. I wanna give a shout out to Raleigh Perez for putting that demo together. If you're looking to hire a Flutter developer, you'll definitely want to get in touch with him. Now we have a fully functional counter app, the question becomes, how do we navigate to a different screen? Well, confusingly, Flutter has navigator 1.02.0, and all you need to know for Sick training is 1 point o.

At this point, go ahead and build 2 different stateless widgets, then give each one of them a scaffold. Make sure that each scaffold has an app bar at the top. In the first page, go ahead and add a button to the body of the scaffold. Now think of your navigation like a stack, where you can push and pop Different screens onto it. To add a new screen to the top of the stack, we use navigator push with the build context, then create a new material page route.

The route expects a builder function, which then returns the screen that you want to render, which in our case will be page 2. Now do a full restart of the application And by typing a capital r into the command line, and you should be able to navigate back and forth between the two pages. One magic thing that Flutter Doing here is adding a back button to the app bar, which under the hood is calling the navigator pop method. That was easy, but I want to finish things off with something really Cool. Flutter has a hero widget that can animate elements from one screen to another.

So check this out. On page 1, I have an icon button with an image as Background. Then on page 2, I'm showing the same image taking up the full screen. That works, but I think we could do a little better. The magic comes into play when I wrap these images in a hero.

The only argument the hero needs is an ID to identify it when it gets animated to the other page. Flutter will use the ID to keep the image in the UI on both pages While the navigation is taking place. Now on the other screen, we'll also use a hero widget with the image inside of it. When we navigate to this route, you'll notice the image itself is animated Between the two screens automatically, it makes the biggest impact when you have a list of images to navigate to. Not only does it look awesome, but it would be extremely difficult to Implement from scratch.

Congratulations. You just completed basic training for Flutter. Take a screenshot of the certificate and frame it on your wall. If you wanna go beyond the basics, Become a pro member at Fireship IO to get access to the full Flutter 2 course, where we build a complex application with Firebase. Thanks for watching and I will see you in the next one.
Welcome to Flutter basic training. By the end of this video, you'll be shipping apps on iOS, Android, the web, and desktop. You will not laugh. You will not cry. You will learn by the numbers. I will teach you. Flutter is quickly becoming the world's most popular cross platform framework, Thanks to its awesome developer experience and ability to ship high quality apps on multiple platforms.
It's unlike anything else out there, which also means that it has a steeper learning curve. To good at it, you'll need to stop watching YouTube and start building something. I created a bunch of satisfying examples that we'll go through together, designed to make you a productive full stack water Developer. There are certain things they don't tell you when you first get started, like it's a 100 times faster to refactor your code by hitting control period than it is to do manually.
youtube
water
We'll look at a ton of productivity boosters like this, and at the end of basic training, I'll give you a certificate that you can frame on your wall.
And if you wanna go beyond a 6, I just released a brand new Flutter course available to pro members on FireShip IO. There's an ephemeral discount in the video description. To get started, you'll need to use the most important skill for any developer, following directions. Head over to flutter.dev and follow the install instructions for your system.
video gaming
youtube
games
Or if you want an easier way to get started, DartPad allows you to edit and run Flutter code in the browser. Now, open the terminal and create a new project by running Or create. Now open it in Versus Code and make sure to have the Flutter extension installed. At the bottom, you'll see an option to select a device like Windows, Chrome, or a A mobile emulator. I'm going to run my app in Android by running Flutter run from the command line. Now, find your application code in the main Read in between the lines to find a color or icon in your UI. Change one of these values to something else. You'll notice that when you type after the period, everything is Auto completed in the IDE, tooling is partly what makes Flutter development so productive. If you don't leverage it, you are not going to survive basic training. If you survive recruit training, You will be a weapon. Save the file. Now, type a lowercase r into the terminal. That performs a hot reload, allowing you to instantly see the Changes in the UI without having to rebuild the entire app. Now, take all the code in this file and delete it. We're going to start from scratch. 1st, import the Flutter material package at Atop. This gives you access to hundreds of pre built widgets in your code, ranging from low level building blocks like text to complex UI elements like a page view That performs animation and layout.
As a Flutter developer, you'll need to learn how to combine these widgets together into a tree like structure To create a complex UI. But first, we need a main function. This is where the program will start executing. Flutter has a global function called run app. It takes a single widget as its argument and will inflate that widget to the screen on whatever device it happens to be running on. Let's create a custom widget to represent the application.
programming
animation
Type s t into your editor and it should automatically give you a snippet for a Flutter stateless widget. Hit tab to insert it, then give it Name like my app. Notice how this class extends a stateless widget. That's a class built into Flutter that you use when creating a UI element That doesn't have any internal data.
In other words, it's just a dumb widget that paints some pixels to the screen. You'll notice it has a constructor with a key. You don't need to worry about that for right now. But if you hover over it, you'll notice that it has a link to a YouTube video explaining more because Flutter's documentation is absolutely awesome. The thing you do need to know about is the build method. This method returns a widget and will be called anytime Flutter needs to rebuild the UI, like when your data changes.
youtube
animation
The first widget we'll return is a material app. It's used as the root of the application and allows us to configure themes and routes. Perform a hot reload and you should have a blank canvas to work with. We can Quickly add a screen to it by adding a scaffold to the home property. A scaffold allows you to build screens with common UI elements, Like an app bar at the top. Every prebuilt widget has a bunch of named parameters where you can customize its appearance. Put your cursor inside a widget, then hit control spacebar to bring up all The options. Go ahead and add a background color, then add a title by creating a text widget. Now, hot reload to check out your first Flutter screen. That's pretty cool, but there's no time to celebrate. Now, we need to talk about layout or how do I put widgets where they need to go in the screen. The most fundamental way to layout a widget is with a container. It's kind of like a div in HTML or a view in Android. It takes one child widget as an argument. We can make that a text widget for now, which will place it in the top left corner of Screen. You can think of it being surrounded by a box, and we can change the dimensions of that box by adding margin and padding. We can also customize things It's like the height, width, and color. We can also make the box look a lot cooler using the decoration property. It takes a box decoration widget as its argument, Which allows us to customize things like the border, gradient, shape, and shadow of the box. Containers do a lot, but Flutter has some other widgets that are more Focused. For example, if you just want to center a widget in the middle of the screen, you can do so by wrapping it with center. Now, you could write that code manually, but if you want to have a good time, you'll right click on the widget or hit control period to find the refactor tool, then select the option to wrap with center to write that code for You automatically.
Another tip is that if you're using a container to apply some padding, use the padding widget instead. Or if you're creating a container with a fixed width and height, Use the size box widget instead. But, how do we deal with multiple related widgets like a row or column?
crafts
That's where flex layout comes in. If you're familiar with CSS Flexbox, you'll be way ahead of the game here. Flutter provides row and column widgets used to layout multiple children horizontally or vertically. Unlike a container that takes only 1 widget as a child, a column takes multiple children as a list. Create a column, then add 3 icons inside of it. You'll notice that Each icon is laid out one after the other vertically. Change that widget to a row and now they flow horizontally.
The direction they flow is called the main access, while the opposite direction is the cross axis. You can change the spacing and alignment between the children by modifying the cross axis and main axis alignment on the widget. By default, each child has a flex value of 1, which means that each sibling occupies the same amount of space. If that's not desirable, You can wrap a child in a flexible or expanded widget. Expanded tells a child to take up any available space, and you can give it more space than the other children by modifying its flex value.
children
geometry
But in some cases, you may want to have one widget overlap another, like a button that floats on top of some other UI element. In that case, the widget we're looking or is a stack. Just like a row or column, it takes a list of children as an argument. And just one little side note here, you'll notice that I'm using a trailing comma after every block of code. The comma is not required, but it keeps your code nicely formatted. If you right click and choose format document, it will format it with multiple lines as opposed to one line when the comma is missing. Now in our stack, we might have a container and an icon. If we want to display the icon on top of the container, we make sure that it comes after the container in the list. Now if we want to move things around, We can use positioned to move a widget into a specific spot, kind of like absolute positioning in CSS.
Or if we want to modify its positioning relative to its parent, we can use align to move it to the top, left, bottom, right, or center. Those are your low level building blocks for layout, but Flutter takes care of many UI elements out of blocks. For example, if we add a floating action button to our scaffold, that button magically appears down here at the bottom right. The floating action button widget has an event handler They're called onPressed. We can define an anonymous function here to handle the gesture. If we then want to add a bottom bar to it, we can use the bottom bar widget to add some navigation icons to the scaffold. We also need a drawer that animates out from the left. We can achieve that by simply adding a drawer to the scaffold. That's pretty awesome, but eventually, you'll lay out your widgets and they will overflow the bounds of their parent, which will summon the red screen of death or this black and yellow error tape.
animation
crafts
When you get an error like this, the terminal output will link you to Flutter's built in debugger. That'll give you more information about layout to help debug things like this. In this case, the The problem is that our parent is not a scrollable view. Things don't just scroll automatically. Instead, you need to use a widget like list view.
It takes a list of as its argument, but will scroll between them. It can scroll both horizontally and vertically, and you can even tell it to garbage collect items that are no longer on the screen. You'll notice that this list, we're adding each widget individually. But in real life, you'll often need to fetch a bunch of items from a database and then create each list item programmatically.
databases
In Flutter, many widgets can be built dynamically using builders, which is just a function that you define that can map a list of data to a list of widgets.
And that means can create a scrollable list that is infinitely long, where the children are rendered lazily, keeping the UI smooth and fast. Now that you know how to build a UI, we need to talk about state, Or the data that changes throughout the life cycle of the app.
programming
A stateless widget has no state as the name implies. To give this widget mutable data, we need to convert it To a stateful widget, which we can do by right clicking, going to the refactor tool, and choosing the option to convert it. That will break the widget up into 2 different classes. That keeps the widget itself immutable while giving us a state class where we can play with mutable data.
It has a build method, but we can also define variables on this class And then change them by using the built in set state function somewhere else in our code, like when a button is pressed. We can create a counter app by defining a property called count, then reference the value in the UI using a text widget.
programming
When working with strings in Dart, you can interpolate a Variable inside of it with a dollar sign. Now when our button is pressed, we call set state to change the value, and the widget will automatically Rerender to reflect the latest data. Another thing you might wanna do in a stateful widget is initialize data, like maybe fetch a record from a database. The init state method is called once when the widget is first initialized, and there's also another life cycle hook called dispose that runs when the widget is removed from the UI. Now you should know that this is not the only way to manage state in Flutter. In fact, there are many different approaches And many strong opinions out there about this topic.
In my full course, I use a package called provider that allows us to share real time data throughout the entire widget tree without ever needing to use a stateful widget at all. There are also full blown solutions out there like Block and Qubit. The full course also contains a repo of the same app built with Qubit.
networking
I wanna give a shout out to Raleigh Perez for putting that demo together. If you're looking to hire a Flutter developer, you'll definitely want to get in touch with him. Now we have a fully functional counter app, the question becomes, how do we navigate to a different screen? Well, confusingly, Flutter has navigator 1.02.0, and all you need to know for Sick training is 1 point o.
At this point, go ahead and build 2 different stateless widgets, then give each one of them a scaffold. Make sure that each scaffold has an app bar at the top. In the first page, go ahead and add a button to the body of the scaffold. Now think of your navigation like a stack, where you can push and pop Different screens onto it.
robotics
To add a new screen to the top of the stack, we use navigator push with the build context, then create a new material page route. The route expects a builder function, which then returns the screen that you want to render, which in our case will be page 2.
visualization
Now do a full restart of the application And by typing a capital r into the command line, and you should be able to navigate back and forth between the two pages.
One magic thing that Flutter Doing here is adding a back button to the app bar, which under the hood is calling the navigator pop method. That was easy, but I want to finish things off with something really Cool. Flutter has a hero widget that can animate elements from one screen to another. So check this out. On page 1, I have an icon button with an image as Background. Then on page 2, I'm showing the same image taking up the full screen. That works, but I think we could do a little better. The magic comes into play when I wrap these images in a hero. The only argument the hero needs is an ID to identify it when it gets animated to the other page. Flutter will use the ID to keep the image in the UI on both pages While the navigation is taking place. Now on the other screen, we'll also use a hero widget with the image inside of it. When we navigate to this route, you'll notice the image itself is animated Between the two screens automatically, it makes the biggest impact when you have a list of images to navigate to. Not only does it look awesome, but it would be extremely difficult to Implement from scratch. Congratulations.
animation
visualization
graphic design
weapons
photography
multimedia
You just completed basic training for Flutter. Take a screenshot of the certificate and frame it on your wall. If you wanna go beyond the basics, Become a pro member at Fireship IO to get access to the full Flutter 2 course, where we build a complex application with Firebase. Thanks for watching and I will see you in the next one.
Welcome to Flutter basic training. By the end of this video, you'll be shipping apps on iOS, Android, the web, and desktop. You will not laugh. You will not cry. You will learn by the numbers. I will teach you. Flutter is quickly becoming the world's most popular cross platform framework, Thanks to its awesome developer experience and ability to ship high quality apps on multiple platforms. It's unlike anything else out there, which also means that it has a steeper learning curve. To good at it, you'll need to stop watching YouTube and start building something. I created a bunch of satisfying examples that we'll go through together, designed to make you a productive full stack water Developer. There are certain things they don't tell you when you first get started, like it's a 100 times faster to refactor your code by hitting control period than it is to do manually. We'll look at a ton of productivity boosters like this, and at the end of basic training, I'll give you a certificate that you can frame on your wall. And if you wanna go beyond a 6, I just released a brand new Flutter course available to pro members on FireShip IO. There's an ephemeral discount in the video description. To get started, you'll need to use the most important skill for any developer, following directions. Head over to flutter.dev and follow the install instructions for your system. Or if you want an easier way to get started, DartPad allows you to edit and run Flutter code in the browser. Now, open the terminal and create a new project by running Or create. Now open it in Versus Code and make sure to have the Flutter extension installed. At the bottom, you'll see an option to select a device like Windows, Chrome, or a A mobile emulator. I'm going to run my app in Android by running Flutter run from the command line. Now, find your application code in the main Read in between the lines to find a color or icon in your UI. Change one of these values to something else. You'll notice that when you type after the period, everything is Auto completed in the IDE, tooling is partly what makes Flutter development so productive. If you don't leverage it, you are not going to survive basic training. If you survive recruit training, You will be a weapon. Save the file. Now, type a lowercase r into the terminal. That performs a hot reload, allowing you to instantly see the Changes in the UI without having to rebuild the entire app. Now, take all the code in this file and delete it. We're going to start from scratch. 1st, import the Flutter material package at Atop. This gives you access to hundreds of pre built widgets in your code, ranging from low level building blocks like text to complex UI elements like a page view That performs animation and layout. As a Flutter developer, you'll need to learn how to combine these widgets together into a tree like structure To create a complex UI. But first, we need a main function. This is where the program will start executing. Flutter has a global function called run app. It takes a single widget as its argument and will inflate that widget to the screen on whatever device it happens to be running on. Let's create a custom widget to represent the application. Type s t into your editor and it should automatically give you a snippet for a Flutter stateless widget. Hit tab to insert it, then give it Name like my app. Notice how this class extends a stateless widget. That's a class built into Flutter that you use when creating a UI element That doesn't have any internal data. In other words, it's just a dumb widget that paints some pixels to the screen. You'll notice it has a constructor with a key. You don't need to worry about that for right now. But if you hover over it, you'll notice that it has a link to a YouTube video explaining more because Flutter's documentation is absolutely awesome. The thing you do need to know about is the build method. This method returns a widget and will be called anytime Flutter needs to rebuild the UI, like when your data changes. The first widget we'll return is a material app. It's used as the root of the application and allows us to configure themes and routes. Perform a hot reload and you should have a blank canvas to work with. We can Quickly add a screen to it by adding a scaffold to the home property. A scaffold allows you to build screens with common UI elements, Like an app bar at the top. Every prebuilt widget has a bunch of named parameters where you can customize its appearance. Put your cursor inside a widget, then hit control spacebar to bring up all The options. Go ahead and add a background color, then add a title by creating a text widget. Now, hot reload to check out your first Flutter screen. That's pretty cool, but there's no time to celebrate. Now, we need to talk about layout or how do I put widgets where they need to go in the screen. The most fundamental way to layout a widget is with a container. It's kind of like a div in HTML or a view in Android. It takes one child widget as an argument. We can make that a text widget for now, which will place it in the top left corner of Screen. You can think of it being surrounded by a box, and we can change the dimensions of that box by adding margin and padding. We can also customize things It's like the height, width, and color. We can also make the box look a lot cooler using the decoration property. It takes a box decoration widget as its argument, Which allows us to customize things like the border, gradient, shape, and shadow of the box. Containers do a lot, but Flutter has some other widgets that are more Focused. For example, if you just want to center a widget in the middle of the screen, you can do so by wrapping it with center. Now, you could write that code manually, but if you want to have a good time, you'll right click on the widget or hit control period to find the refactor tool, then select the option to wrap with center to write that code for You automatically. Another tip is that if you're using a container to apply some padding, use the padding widget instead. Or if you're creating a container with a fixed width and height, Use the size box widget instead. But, how do we deal with multiple related widgets like a row or column? That's where flex layout comes in. If you're familiar with CSS Flexbox, you'll be way ahead of the game here. Flutter provides row and column widgets used to layout multiple children horizontally or vertically. Unlike a container that takes only 1 widget as a child, a column takes multiple children as a list. Create a column, then add 3 icons inside of it. You'll notice that Each icon is laid out one after the other vertically. Change that widget to a row and now they flow horizontally. The direction they flow is called the main access, while the opposite direction is the cross axis. You can change the spacing and alignment between the children by modifying the cross axis and main axis alignment on the widget. By default, each child has a flex value of 1, which means that each sibling occupies the same amount of space. If that's not desirable, You can wrap a child in a flexible or expanded widget. Expanded tells a child to take up any available space, and you can give it more space than the other children by modifying its flex value. But in some cases, you may want to have one widget overlap another, like a button that floats on top of some other UI element. In that case, the widget we're looking or is a stack. Just like a row or column, it takes a list of children as an argument. And just one little side note here, you'll notice that I'm using a trailing comma after every block of code. The comma is not required, but it keeps your code nicely formatted. If you right click and choose format document, it will format it with multiple lines as opposed to one line when the comma is missing. Now in our stack, we might have a container and an icon. If we want to display the icon on top of the container, we make sure that it comes after the container in the list. Now if we want to move things around, We can use positioned to move a widget into a specific spot, kind of like absolute positioning in CSS. Or if we want to modify its positioning relative to its parent, we can use align to move it to the top, left, bottom, right, or center. Those are your low level building blocks for layout, but Flutter takes care of many UI elements out of blocks. For example, if we add a floating action button to our scaffold, that button magically appears down here at the bottom right. The floating action button widget has an event handler They're called onPressed. We can define an anonymous function here to handle the gesture. If we then want to add a bottom bar to it, we can use the bottom bar widget to add some navigation icons to the scaffold. We also need a drawer that animates out from the left. We can achieve that by simply adding a drawer to the scaffold. That's pretty awesome, but eventually, you'll lay out your widgets and they will overflow the bounds of their parent, which will summon the red screen of death or this black and yellow error tape. When you get an error like this, the terminal output will link you to Flutter's built in debugger. That'll give you more information about layout to help debug things like this. In this case, the The problem is that our parent is not a scrollable view. Things don't just scroll automatically. Instead, you need to use a widget like list view. It takes a list of as its argument, but will scroll between them. It can scroll both horizontally and vertically, and you can even tell it to garbage collect items that are no longer on the screen. You'll notice that this list, we're adding each widget individually. But in real life, you'll often need to fetch a bunch of items from a database and then create each list item programmatically. In Flutter, many widgets can be built dynamically using builders, which is just a function that you define that can map a list of data to a list of widgets. And that means can create a scrollable list that is infinitely long, where the children are rendered lazily, keeping the UI smooth and fast. Now that you know how to build a UI, we need to talk about state, Or the data that changes throughout the life cycle of the app. A stateless widget has no state as the name implies. To give this widget mutable data, we need to convert it To a stateful widget, which we can do by right clicking, going to the refactor tool, and choosing the option to convert it. That will break the widget up into 2 different classes. That keeps the widget itself immutable while giving us a state class where we can play with mutable data. It has a build method, but we can also define variables on this class And then change them by using the built in set state function somewhere else in our code, like when a button is pressed. We can create a counter app by defining a property called count, then reference the value in the UI using a text widget. When working with strings in Dart, you can interpolate a Variable inside of it with a dollar sign. Now when our button is pressed, we call set state to change the value, and the widget will automatically Rerender to reflect the latest data. Another thing you might wanna do in a stateful widget is initialize data, like maybe fetch a record from a database. The init state method is called once when the widget is first initialized, and there's also another life cycle hook called dispose that runs when the widget is removed from the UI. Now you should know that this is not the only way to manage state in Flutter. In fact, there are many different approaches And many strong opinions out there about this topic. In my full course, I use a package called provider that allows us to share real time data throughout the entire widget tree without ever needing to use a stateful widget at all. There are also full blown solutions out there like Block and Qubit. The full course also contains a repo of the same app built with Qubit. I wanna give a shout out to Raleigh Perez for putting that demo together. If you're looking to hire a Flutter developer, you'll definitely want to get in touch with him. Now we have a fully functional counter app, the question becomes, how do we navigate to a different screen? Well, confusingly, Flutter has navigator 1.02.0, and all you need to know for Sick training is 1 point o. At this point, go ahead and build 2 different stateless widgets, then give each one of them a scaffold. Make sure that each scaffold has an app bar at the top. In the first page, go ahead and add a button to the body of the scaffold. Now think of your navigation like a stack, where you can push and pop Different screens onto it. To add a new screen to the top of the stack, we use navigator push with the build context, then create a new material page route. The route expects a builder function, which then returns the screen that you want to render, which in our case will be page 2. Now do a full restart of the application And by typing a capital r into the command line, and you should be able to navigate back and forth between the two pages. One magic thing that Flutter Doing here is adding a back button to the app bar, which under the hood is calling the navigator pop method. That was easy, but I want to finish things off with something really Cool. Flutter has a hero widget that can animate elements from one screen to another. So check this out. On page 1, I have an icon button with an image as Background. Then on page 2, I'm showing the same image taking up the full screen. That works, but I think we could do a little better. The magic comes into play when I wrap these images in a hero. The only argument the hero needs is an ID to identify it when it gets animated to the other page. Flutter will use the ID to keep the image in the UI on both pages While the navigation is taking place. Now on the other screen, we'll also use a hero widget with the image inside of it. When we navigate to this route, you'll notice the image itself is animated Between the two screens automatically, it makes the biggest impact when you have a list of images to navigate to. Not only does it look awesome, but it would be extremely difficult to Implement from scratch. Congratulations. You just completed basic training for Flutter. Take a screenshot of the certificate and frame it on your wall. If you wanna go beyond the basics, Become a pro member at Fireship IO to get access to the full Flutter 2 course, where we build a complex application with Firebase. Thanks for watching and I will see you in the next one.
Welcome
welcome
to
to
Flutter
flutter
basic
basic
training.
training
By
by
the
the
end
end
of
of
this
this
video,
video
you'll
you'll
be
be
shipping
shipping
apps
apps
on
on
iOS,
ios
Android,
android
the
the
web,
web
and
and
desktop.
desktop
You
you
will
will
not
not
laugh.
laugh
You
you
will
will
not
not
cry.
cry
You
you
will
will
learn
learn
by
by
the
the
numbers.
numbers
I
i
will
will
teach
teach
you.
you
Flutter
flutter
is
is
quickly
quickly
becoming
becoming
the
the
world's
world's
most
most
popular
popular
cross
cross
platform
platform
framework,
framework
Thanks
thanks
to
to
its
its
awesome
awesome
developer
developer
experience
experience
and
and
ability
ability
to
to
ship
ship
high
high
quality
quality
apps
apps
on
on
multiple
multiple
platforms.
platforms
It's
it's
unlike
unlike
anything
anything
else
else
out
out
there,
there
which
which
also
also
means
means
that
that
it
it
has
has
a
a
steeper
steeper
learning
learning
curve.
curve
To
to
good
good
at
at
it,
it
you'll
you'll
need
need
to
to
stop
stop
watching
watching
YouTube
youtube
and
and
start
start
building
building
something.
something
I
i
created
created
a
a
bunch
bunch
of
of
satisfying
satisfying
examples
examples
that
that
we'll
we'll
go
go
through
through
together,
together
designed
designed
to
to
make
make
you
you
a
a
productive
productive
full
full
stack
stack
water
water
Developer.
developer
There
there
are
are
certain
certain
things
things
they
they
don't
don't
tell
tell
you
you
when
when
you
you
first
first
get
get
started,
started
like
like
it's
it's
a
a
100
100
times
times
faster
faster
to
to
refactor
refactor
your
your
code
code
by
by
hitting
hitting
control
control
period
period
than
than
it
it
is
is
to
to
do
do
manually.
manually
We'll
we'll
look
look
at
at
a
a
ton
ton
of
of
productivity
productivity
boosters
boosters
like
like
this,
this
and
and
at
at
the
the
end
end
of
of
basic
basic
training,
training
I'll
i'll
give
give
you
you
a
a
certificate
certificate
that
that
you
you
can
can
frame
frame
on
on
your
your
wall.
wall
And
and
if
if
you
you
wanna
wanna
go
go
beyond
beyond
a
a
6,
6
I
i
just
just
released
released
a
a
brand
brand
new
new
Flutter
flutter
course
course
available
available
to
to
pro
pro
members
members
on
on
FireShip
fireship
IO.
io
There's
there's
an
an
ephemeral
ephemeral
discount
discount
in
in
the
the
video
video
description.
description
To
to
get
get
started,
started
you'll
you'll
need
need
to
to
use
use
the
the
most
most
important
important
skill
skill
for
for
any
any
developer,
developer
following
following
directions.
directions
Head
head
over
over
to
to
flutter.dev
flutter.dev
and
and
follow
follow
the
the
install
install
instructions
instructions
for
for
your
your
system.
system
Or
or
if
if
you
you
want
want
an
an
easier
easier
way
way
to
to
get
get
started,
started
DartPad
dartpad
allows
allows
you
you
to
to
edit
edit
and
and
run
run
Flutter
flutter
code
code
in
in
the
the
browser.
browser
Now,
now
open
open
the
the
terminal
terminal
and
and
create
create
a
a
new
new
project
project
by
by
running
running
Or
or
create.
create
Now
now
open
open
it
it
in
in
Versus
versus
Code
code
and
and
make
make
sure
sure
to
to
have
have
the
the
Flutter
flutter
extension
extension
installed.
installed
At
at
the
the
bottom,
bottom
you'll
you'll
see
see
an
an
option
option
to
to
select
select
a
a
device
device
like
like
Windows,
windows
Chrome,
chrome
or
or
a
a
A
a
mobile
mobile
emulator.
emulator
I'm
i'm
going
going
to
to
run
run
my
my
app
app
in
in
Android
android
by
by
running
running
Flutter
flutter
run
run
from
from
the
the
command
command
line.
line
Now,
now
find
find
your
your
application
application
code
code
in
in
the
the
main
main
Read
read
in
in
between
between
the
the
lines
lines
to
to
find
find
a
a
color
color
or
or
icon
icon
in
in
your
your
UI.
ui
Change
change
one
one
of
of
these
these
values
values
to
to
something
something
else.
else
You'll
you'll
notice
notice
that
that
when
when
you
you
type
type
after
after
the
the
period,
period
everything
everything
is
is
Auto
auto
completed
completed
in
in
the
the
IDE,
ide
tooling
tooling
is
is
partly
partly
what
what
makes
makes
Flutter
flutter
development
development
so
so
productive.
productive
If
if
you
you
don't
don't
leverage
leverage
it,
it
you
you
are
are
not
not
going
going
to
to
survive
survive
basic
basic
training.
training
If
if
you
you
survive
survive
recruit
recruit
training,
training
You
you
will
will
be
be
a
a
weapon.
weapon
Save
save
the
the
file.
file
Now,
now
type
type
a
a
lowercase
lowercase
r
r
into
into
the
the
terminal.
terminal
That
that
performs
performs
a
a
hot
hot
reload,
reload
allowing
allowing
you
you
to
to
instantly
instantly
see
see
the
the
Changes
changes
in
in
the
the
UI
ui
without
without
having
having
to
to
rebuild
rebuild
the
the
entire
entire
app.
app
Now,
now
take
take
all
all
the
the
code
code
in
in
this
this
file
file
and
and
delete
delete
it.
it
We're
we're
going
going
to
to
start
start
from
from
scratch.
scratch
1st,
1st
import
import
the
the
Flutter
flutter
material
material
package
package
at
at
Atop.
atop
This
this
gives
gives
you
you
access
access
to
to
hundreds
hundreds
of
of
pre
pre
built
built
widgets
widgets
in
in
your
your
code,
code
ranging
ranging
from
from
low
low
level
level
building
building
blocks
blocks
like
like
text
text
to
to
complex
complex
UI
ui
elements
elements
like
like
a
a
page
page
view
view
That
that
performs
performs
animation
animation
and
and
layout.
layout
As
as
a
a
Flutter
flutter
developer,
developer
you'll
you'll
need
need
to
to
learn
learn
how
how
to
to
combine
combine
these
these
widgets
widgets
together
together
into
into
a
a
tree
tree
like
like
structure
structure
To
to
create
create
a
a
complex
complex
UI.
ui
But
but
first,
first
we
we
need
need
a
a
main
main
function.
function
This
this
is
is
where
where
the
the
program
program
will
will
start
start
executing.
executing
Flutter
flutter
has
has
a
a
global
global
function
function
called
called
run
run
app.
app
It
it
takes
takes
a
a
single
single
widget
widget
as
as
its
its
argument
argument
and
and
will
will
inflate
inflate
that
that
widget
widget
to
to
the
the
screen
screen
on
on
whatever
whatever
device
device
it
it
happens
happens
to
to
be
be
running
running
on.
on
Let's
let's
create
create
a
a
custom
custom
widget
widget
to
to
represent
represent
the
the
application.
application
Type
type
s
s
t
t
into
into
your
your
editor
editor
and
and
it
it
should
should
automatically
automatically
give
give
you
you
a
a
snippet
snippet
for
for
a
a
Flutter
flutter
stateless
stateless
widget.
widget
Hit
hit
tab
tab
to
to
insert
insert
it,
it
then
then
give
give
it
it
Name
name
like
like
my
my
app.
app
Notice
notice
how
how
this
this
class
class
extends
extends
a
a
stateless
stateless
widget.
widget
That's
that's
a
a
class
class
built
built
into
into
Flutter
flutter
that
that
you
you
use
use
when
when
creating
creating
a
a
UI
ui
element
element
That
that
doesn't
doesn't
have
have
any
any
internal
internal
data.
data
In
in
other
other
words,
words
it's
it's
just
just
a
a
dumb
dumb
widget
widget
that
that
paints
paints
some
some
pixels
pixels
to
to
the
the
screen.
screen
You'll
you'll
notice
notice
it
it
has
has
a
a
constructor
constructor
with
with
a
a
key.
key
You
you
don't
don't
need
need
to
to
worry
worry
about
about
that
that
for
for
right
right
now.
now
But
but
if
if
you
you
hover
hover
over
over
it,
it
you'll
you'll
notice
notice
that
that
it
it
has
has
a
a
link
link
to
to
a
a
YouTube
youtube
video
video
explaining
explaining
more
more
because
because
Flutter's
flutter's
documentation
documentation
is
is
absolutely
absolutely
awesome.
awesome
The
the
thing
thing
you
you
do
do
need
need
to
to
know
know
about
about
is
is
the
the
build
build
method.
method
This
this
method
method
returns
returns
a
a
widget
widget
and
and
will
will
be
be
called
called
anytime
anytime
Flutter
flutter
needs
needs
to
to
rebuild
rebuild
the
the
UI,
ui
like
like
when
when
your
your
data
data
changes.
changes
The
the
first
first
widget
widget
we'll
we'll
return
return
is
is
a
a
material
material
app.
app
It's
it's
used
used
as
as
the
the
root
root
of
of
the
the
application
application
and
and
allows
allows
us
us
to
to
configure
configure
themes
themes
and
and
routes.
routes
Perform
perform
a
a
hot
hot
reload
reload
and
and
you
you
should
should
have
have
a
a
blank
blank
canvas
canvas
to
to
work
work
with.
with
We
we
can
can
Quickly
quickly
add
add
a
a
screen
screen
to
to
it
it
by
by
adding
adding
a
a
scaffold
scaffold
to
to
the
the
home
home
property.
property
A
a
scaffold
scaffold
allows
allows
you
you
to
to
build
build
screens
screens
with
with
common
common
UI
ui
elements,
elements
Like
like
an
an
app
app
bar
bar
at
at
the
the
top.
top
Every
every
prebuilt
prebuilt
widget
widget
has
has
a
a
bunch
bunch
of
of
named
named
parameters
parameters
where
where
you
you
can
can
customize
customize
its
its
appearance.
appearance
Put
put
your
your
cursor
cursor
inside
inside
a
a
widget,
widget
then
then
hit
hit
control
control
spacebar
spacebar
to
to
bring
bring
up
up
all
all
The
the
options.
options
Go
go
ahead
ahead
and
and
add
add
a
a
background
background
color,
color
then
then
add
add
a
a
title
title
by
by
creating
creating
a
a
text
text
widget.
widget
Now,
now
hot
hot
reload
reload
to
to
check
check
out
out
your
your
first
first
Flutter
flutter
screen.
screen
That's
that's
pretty
pretty
cool,
cool
but
but
there's
there's
no
no
time
time
to
to
celebrate.
celebrate
Now,
now
we
we
need
need
to
to
talk
talk
about
about
layout
layout
or
or
how
how
do
do
I
i
put
put
widgets
widgets
where
where
they
they
need
need
to
to
go
go
in
in
the
the
screen.
screen
The
the
most
most
fundamental
fundamental
way
way
to
to
layout
layout
a
a
widget
widget
is
is
with
with
a
a
container.
container
It's
it's
kind
kind
of
of
like
like
a
a
div
div
in
in
HTML
html
or
or
a
a
view
view
in
in
Android.
android
It
it
takes
takes
one
one
child
child
widget
widget
as
as
an
an
argument.
argument
We
we
can
can
make
make
that
that
a
a
text
text
widget
widget
for
for
now,
now
which
which
will
will
place
place
it
it
in
in
the
the
top
top
left
left
corner
corner
of
of
Screen.
screen
You
you
can
can
think
think
of
of
it
it
being
being
surrounded
surrounded
by
by
a
a
box,
box
and
and
we
we
can
can
change
change
the
the
dimensions
dimensions
of
of
that
that
box
box
by
by
adding
adding
margin
margin
and
and
padding.
padding
We
we
can
can
also
also
customize
customize
things
things
It's
it's
like
like
the
the
height,
height
width,
width
and
and
color.
color
We
we
can
can
also
also
make
make
the
the
box
box
look
look
a
a
lot
lot
cooler
cooler
using
using
the
the
decoration
decoration
property.
property
It
it
takes
takes
a
a
box
box
decoration
decoration
widget
widget
as
as
its
its
argument,
argument
Which
which
allows
allows
us
us
to
to
customize
customize
things
things
like
like
the
the
border,
border
gradient,
gradient
shape,
shape
and
and
shadow
shadow
of
of
the
the
box.
box
Containers
containers
do
do
a
a
lot,
lot
but
but
Flutter
flutter
has
has
some
some
other
other
widgets
widgets
that
that
are
are
more
more
Focused.
focused
For
for
example,
example
if
if
you
you
just
just
want
want
to
to
center
center
a
a
widget
widget
in
in
the
the
middle
middle
of
of
the
the
screen,
screen
you
you
can
can
do
do
so
so
by
by
wrapping
wrapping
it
it
with
with
center.
center
Now,
now
you
you
could
could
write
write
that
that
code
code
manually,
manually
but
but
if
if
you
you
want
want
to
to
have
have
a
a
good
good
time,
time
you'll
you'll
right
right
click
click
on
on
the
the
widget
widget
or
or
hit
hit
control
control
period
period
to
to
find
find
the
the
refactor
refactor
tool,
tool
then
then
select
select
the
the
option
option
to
to
wrap
wrap
with
with
center
center
to
to
write
write
that
that
code
code
for
for
You
you
automatically.
automatically
Another
another
tip
tip
is
is
that
that
if
if
you're
you're
using
using
a
a
container
container
to
to
apply
apply
some
some
padding,
padding
use
use
the
the
padding
padding
widget
widget
instead.
instead
Or
or
if
if
you're
you're
creating
creating
a
a
container
container
with
with
a
a
fixed
fixed
width
width
and
and
height,
height
Use
use
the
the
size
size
box
box
widget
widget
instead.
instead
But,
but
how
how
do
do
we
we
deal
deal
with
with
multiple
multiple
related
related
widgets
widgets
like
like
a
a
row
row
or
or
column?
column
That's
that's
where
where
flex
flex
layout
layout
comes
comes
in.
in
If
if
you're
you're
familiar
familiar
with
with
CSS
css
Flexbox,
flexbox
you'll
you'll
be
be
way
way
ahead
ahead
of
of
the
the
game
game
here.
here
Flutter
flutter
provides
provides
row
row
and
and
column
column
widgets
widgets
used
used
to
to
layout
layout
multiple
multiple
children
children
horizontally
horizontally
or
or
vertically.
vertically
Unlike
unlike
a
a
container
container
that
that
takes
takes
only
only
1
1
widget
widget
as
as
a
a
child,
child
a
a
column
column
takes
takes
multiple
multiple
children
children
as
as
a
a
list.
list
Create
create
a
a
column,
column
then
then
add
add
3
3
icons
icons
inside
inside
of
of
it.
it
You'll
you'll
notice
notice
that
that
Each
each
icon
icon
is
is
laid
laid
out
out
one
one
after
after
the
the
other
other
vertically.
vertically
Change
change
that
that
widget
widget
to
to
a
a
row
row
and
and
now
now
they
they
flow
flow
horizontally.
horizontally
The
the
direction
direction
they
they
flow
flow
is
is
called
called
the
the
main
main
access,
access
while
while
the
the
opposite
opposite
direction
direction
is
is
the
the
cross
cross
axis.
axis
You
you
can
can
change
change
the
the
spacing
spacing
and
and
alignment
alignment
between
between
the
the
children
children
by
by
modifying
modifying
the
the
cross
cross
axis
axis
and
and
main
main
axis
axis
alignment
alignment
on
on
the
the
widget.
widget
By
by
default,
default
each
each
child
child
has
has
a
a
flex
flex
value
value
of
of
1,
1
which
which
means
means
that
that
each
each
sibling
sibling
occupies
occupies
the
the
same
same
amount
amount
of
of
space.
space
If
if
that's
that's
not
not
desirable,
desirable
You
you
can
can
wrap
wrap
a
a
child
child
in
in
a
a
flexible
flexible
or
or
expanded
expanded
widget.
widget
Expanded
expanded
tells
tells
a
a
child
child
to
to
take
take
up
up
any
any
available
available
space,
space
and
and
you
you
can
can
give
give
it
it
more
more
space
space
than
than
the
the
other
other
children
children
by
by
modifying
modifying
its
its
flex
flex
value.
value
But
but
in
in
some
some
cases,
cases
you
you
may
may
want
want
to
to
have
have
one
one
widget
widget
overlap
overlap
another,
another
like
like
a
a
button
button
that
that
floats
floats
on
on
top
top
of
of
some
some
other
other
UI
ui
element.
element
In
in
that
that
case,
case
the
the
widget
widget
we're
we're
looking
looking
or
or
is
is
a
a
stack.
stack
Just
just
like
like
a
a
row
row
or
or
column,
column
it
it
takes
takes
a
a
list
list
of
of
children
children
as
as
an
an
argument.
argument
And
and
just
just
one
one
little
little
side
side
note
note
here,
here
you'll
you'll
notice
notice
that
that
I'm
i'm
using
using
a
a
trailing
trailing
comma
comma
after
after
every
every
block
block
of
of
code.
code
The
the
comma
comma
is
is
not
not
required,
required
but
but
it
it
keeps
keeps
your
your
code
code
nicely
nicely
formatted.
formatted
If
if
you
you
right
right
click
click
and
and
choose
choose
format
format
document,
document
it
it
will
will
format
format
it
it
with
with
multiple
multiple
lines
lines
as
as
opposed
opposed
to
to
one
one
line
line
when
when
the
the
comma
comma
is
is
missing.
missing
Now
now
in
in
our
our
stack,
stack
we
we
might
might
have
have
a
a
container
container
and
and
an
an
icon.
icon
If
if
we
we
want
want
to
to
display
display
the
the
icon
icon
on
on
top
top
of
of
the
the
container,
container
we
we
make
make
sure
sure
that
that
it
it
comes
comes
after
after
the
the
container
container
in
in
the
the
list.
list
Now
now
if
if
we
we
want
want
to
to
move
move
things
things
around,
around
We
we
can
can
use
use
positioned
positioned
to
to
move
move
a
a
widget
widget
into
into
a
a
specific
specific
spot,
spot
kind
kind
of
of
like
like
absolute
absolute
positioning
positioning
in
in
CSS.
css
Or
or
if
if
we
we
want
want
to
to
modify
modify
its
its
positioning
positioning
relative
relative
to
to
its
its
parent,
parent
we
we
can
can
use
use
align
align
to
to
move
move
it
it
to
to
the
the
top,
top
left,
left
bottom,
bottom
right,
right
or
or
center.
center
Those
those
are
are
your
your
low
low
level
level
building
building
blocks
blocks
for
for
layout,
layout
but
but
Flutter
flutter
takes
takes
care
care
of
of
many
many
UI
ui
elements
elements
out
out
of
of
blocks.
blocks
For
for
example,
example
if
if
we
we
add
add
a
a
floating
floating
action
action
button
button
to
to
our
our
scaffold,
scaffold
that
that
button
button
magically
magically
appears
appears
down
down
here
here
at
at
the
the
bottom
bottom
right.
right
The
the
floating
floating
action
action
button
button
widget
widget
has
has
an
an
event
event
handler
handler
They're
they're
called
called
onPressed.
onpressed
We
we
can
can
define
define
an
an
anonymous
anonymous
function
function
here
here
to
to
handle
handle
the
the
gesture.
gesture
If
if
we
we
then
then
want
want
to
to
add
add
a
a
bottom
bottom
bar
bar
to
to
it,
it
we
we
can
can
use
use
the
the
bottom
bottom
bar
bar
widget
widget
to
to
add
add
some
some
navigation
navigation
icons
icons
to
to
the
the
scaffold.
scaffold
We
we
also
also
need
need
a
a
drawer
drawer
that
that
animates
animates
out
out
from
from
the
the
left.
left
We
we
can
can
achieve
achieve
that
that
by
by
simply
simply
adding
adding
a
a
drawer
drawer
to
to
the
the
scaffold.
scaffold
That's
that's
pretty
pretty
awesome,
awesome
but
but
eventually,
eventually
you'll
you'll
lay
lay
out
out
your
your
widgets
widgets
and
and
they
they
will
will
overflow
overflow
the
the
bounds
bounds
of
of
their
their
parent,
parent
which
which
will
will
summon
summon
the
the
red
red
screen
screen
of
of
death
death
or
or
this
this
black
black
and
and
yellow
yellow
error
error
tape.
tape
When
when
you
you
get
get
an
an
error
error
like
like
this,
this
the
the
terminal
terminal
output
output
will
will
link
link
you
you
to
to
Flutter's
flutter's
built
built
in
in
debugger.
debugger
That'll
that'll
give
give
you
you
more
more
information
information
about
about
layout
layout
to
to
help
help
debug
debug
things
things
like
like
this.
this
In
in
this
this
case,
case
the
the
The
the
problem
problem
is
is
that
that
our
our
parent
parent
is
is
not
not
a
a
scrollable
scrollable
view.
view
Things
things
don't
don't
just
just
scroll
scroll
automatically.
automatically
Instead,
instead
you
you
need
need
to
to
use
use
a
a
widget
widget
like
like
list
list
view.
view
It
it
takes
takes
a
a
list
list
of
of
as
as
its
its
argument,
argument
but
but
will
will
scroll
scroll
between
between
them.
them
It
it
can
can
scroll
scroll
both
both
horizontally
horizontally
and
and
vertically,
vertically
and
and
you
you
can
can
even
even
tell
tell
it
it
to
to
garbage
garbage
collect
collect
items
items
that
that
are
are
no
no
longer
longer
on
on
the
the
screen.
screen
You'll
you'll
notice
notice
that
that
this
this
list,
list
we're
we're
adding
adding
each
each
widget
widget
individually.
individually
But
but
in
in
real
real
life,
life
you'll
you'll
often
often
need
need
to
to
fetch
fetch
a
a
bunch
bunch
of
of
items
items
from
from
a
a
database
database
and
and
then
then
create
create
each
each
list
list
item
item
programmatically.
programmatically
In
in
Flutter,
flutter
many
many
widgets
widgets
can
can
be
be
built
built
dynamically
dynamically
using
using
builders,
builders
which
which
is
is
just
just
a
a
function
function
that
that
you
you
define
define
that
that
can
can
map
map
a
a
list
list
of
of
data
data
to
to
a
a
list
list
of
of
widgets.
widgets
And
and
that
that
means
means
can
can
create
create
a
a
scrollable
scrollable
list
list
that
that
is
is
infinitely
infinitely
long,
long
where
where
the
the
children
children
are
are
rendered
rendered
lazily,
lazily
keeping
keeping
the
the
UI
ui
smooth
smooth
and
and
fast.
fast
Now
now
that
that
you
you
know
know
how
how
to
to
build
build
a
a
UI,
ui
we
we
need
need
to
to
talk
talk
about
about
state,
state
Or
or
the
the
data
data
that
that
changes
changes
throughout
throughout
the
the
life
life
cycle
cycle
of
of
the
the
app.
app
A
a
stateless
stateless
widget
widget
has
has
no
no
state
state
as
as
the
the
name
name
implies.
implies
To
to
give
give
this
this
widget
widget
mutable
mutable
data,
data
we
we
need
need
to
to
convert
convert
it
it
To
to
a
a
stateful
stateful
widget,
widget
which
which
we
we
can
can
do
do
by
by
right
right
clicking,
clicking
going
going
to
to
the
the
refactor
refactor
tool,
tool
and
and
choosing
choosing
the
the
option
option
to
to
convert
convert
it.
it
That
that
will
will
break
break
the
the
widget
widget
up
up
into
into
2
2
different
different
classes.
classes
That
that
keeps
keeps
the
the
widget
widget
itself
itself
immutable
immutable
while
while
giving
giving
us
us
a
a
state
state
class
class
where
where
we
we
can
can
play
play
with
with
mutable
mutable
data.
data
It
it
has
has
a
a
build
build
method,
method
but
but
we
we
can
can
also
also
define
define
variables
variables
on
on
this
this
class
class
And
and
then
then
change
change
them
them
by
by
using
using
the
the
built
built
in
in
set
set
state
state
function
function
somewhere
somewhere
else
else
in
in
our
our
code,
code
like
like
when
when
a
a
button
button
is
is
pressed.
pressed
We
we
can
can
create
create
a
a
counter
counter
app
app
by
by
defining
defining
a
a
property
property
called
called
count,
count
then
then
reference
reference
the
the
value
value
in
in
the
the
UI
ui
using
using
a
a
text
text
widget.
widget
When
when
working
working
with
with
strings
strings
in
in
Dart,
dart
you
you
can
can
interpolate
interpolate
a
a
Variable
variable
inside
inside
of
of
it
it
with
with
a
a
dollar
dollar
sign.
sign
Now
now
when
when
our
our
button
button
is
is
pressed,
pressed
we
we
call
call
set
set
state
state
to
to
change
change
the
the
value,
value
and
and
the
the
widget
widget
will
will
automatically
automatically
Rerender
rerender
to
to
reflect
reflect
the
the
latest
latest
data.
data
Another
another
thing
thing
you
you
might
might
wanna
wanna
do
do
in
in
a
a
stateful
stateful
widget
widget
is
is
initialize
initialize
data,
data
like
like
maybe
maybe
fetch
fetch
a
a
record
record
from
from
a
a
database.
database
The
the
init
init
state
state
method
method
is
is
called
called
once
once
when
when
the
the
widget
widget
is
is
first
first
initialized,
initialized
and
and
there's
there's
also
also
another
another
life
life
cycle
cycle
hook
hook
called
called
dispose
dispose
that
that
runs
runs
when
when
the
the
widget
widget
is
is
removed
removed
from
from
the
the
UI.
ui
Now
now
you
you
should
should
know
know
that
that
this
this
is
is
not
not
the
the
only
only
way
way
to
to
manage
manage
state
state
in
in
Flutter.
flutter
In
in
fact,
fact
there
there
are
are
many
many
different
different
approaches
approaches
And
and
many
many
strong
strong
opinions
opinions
out
out
there
there
about
about
this
this
topic.
topic
In
in
my
my
full
full
course,
course
I
i
use
use
a
a
package
package
called
called
provider
provider
that
that
allows
allows
us
us
to
to
share
share
real
real
time
time
data
data
throughout
throughout
the
the
entire
entire
widget
widget
tree
tree
without
without
ever
ever
needing
needing
to
to
use
use
a
a
stateful
stateful
widget
widget
at
at
all.
all
There
there
are
are
also
also
full
full
blown
blown
solutions
solutions
out
out
there
there
like
like
Block
block
and
and
Qubit.
qubit
The
the
full
full
course
course
also
also
contains
contains
a
a
repo
repo
of
of
the
the
same
same
app
app
built
built
with
with
Qubit.
qubit
I
i
wanna
wanna
give
give
a
a
shout
shout
out
out
to
to
Raleigh
raleigh
Perez
perez
for
for
putting
putting
that
that
demo
demo
together.
together
If
if
you're
you're
looking
looking
to
to
hire
hire
a
a
Flutter
flutter
developer,
developer
you'll
you'll
definitely
definitely
want
want
to
to
get
get
in
in
touch
touch
with
with
him.
him
Now
now
we
we
have
have
a
a
fully
fully
functional
functional
counter
counter
app,
app
the
the
question
question
becomes,
becomes
how
how
do
do
we
we
navigate
navigate
to
to
a
a
different
different
screen?
screen
Well,
well
confusingly,
confusingly
Flutter
flutter
has
has
navigator
navigator
1.02.0,
1.02.0
and
and
all
all
you
you
need
need
to
to
know
know
for
for
Sick
sick
training
training
is
is
1
1
point
point
o.
o
At
at
this
this
point,
point
go
go
ahead
ahead
and
and
build
build
2
2
different
different
stateless
stateless
widgets,
widgets
then
then
give
give
each
each
one
one
of
of
them
them
a
a
scaffold.
scaffold
Make
make
sure
sure
that
that
each
each
scaffold
scaffold
has
has
an
an
app
app
bar
bar
at
at
the
the
top.
top
In
in
the
the
first
first
page,
page
go
go
ahead
ahead
and
and
add
add
a
a
button
button
to
to
the
the
body
body
of
of
the
the
scaffold.
scaffold
Now
now
think
think
of
of
your
your
navigation
navigation
like
like
a
a
stack,
stack
where
where
you
you
can
can
push
push
and
and
pop
pop
Different
different
screens
screens
onto
onto
it.
it
To
to
add
add
a
a
new
new
screen
screen
to
to
the
the
top
top
of
of
the
the
stack,
stack
we
we
use
use
navigator
navigator
push
push
with
with
the
the
build
build
context,
context
then
then
create
create
a
a
new
new
material
material
page
page
route.
route
The
the
route
route
expects
expects
a
a
builder
builder
function,
function
which
which
then
then
returns
returns
the
the
screen
screen
that
that
you
you
want
want
to
to
render,
render
which
which
in
in
our
our
case
case
will
will
be
be
page
page
2.
2
Now
now
do
do
a
a
full
full
restart
restart
of
of
the
the
application
application
And
and
by
by
typing
typing
a
a
capital
capital
r
r
into
into
the
the
command
command
line,
line
and
and
you
you
should
should
be
be
able
able
to
to
navigate
navigate
back
back
and
and
forth
forth
between
between
the
the
two
two
pages.
pages
One
one
magic
magic
thing
thing
that
that
Flutter
flutter
Doing
doing
here
here
is
is
adding
adding
a
a
back
back
button
button
to
to
the
the
app
app
bar,
bar
which
which
under
under
the
the
hood
hood
is
is
calling
calling
the
the
navigator
navigator
pop
pop
method.
method
That
that
was
was
easy,
easy
but
but
I
i
want
want
to
to
finish
finish
things
things
off
off
with
with
something
something
really
really
Cool.
cool
Flutter
flutter
has
has
a
a
hero
hero
widget
widget
that
that
can
can
animate
animate
elements
elements
from
from
one
one
screen
screen
to
to
another.
another
So
so
check
check
this
this
out.
out
On
on
page
page
1,
1
I
i
have
have
an
an
icon
icon
button
button
with
with
an
an
image
image
as
as
Background.
background
Then
then
on
on
page
page
2,
2
I'm
i'm
showing
showing
the
the
same
same
image
image
taking
taking
up
up
the
the
full
full
screen.
screen
That
that
works,
works
but
but
I
i
think
think
we
we
could
could
do
do
a
a
little
little
better.
better
The
the
magic
magic
comes
comes
into
into
play
play
when
when
I
i
wrap
wrap
these
these
images
images
in
in
a
a
hero.
hero
The
the
only
only
argument
argument
the
the
hero
hero
needs
needs
is
is
an
an
ID
id
to
to
identify
identify
it
it
when
when
it
it
gets
gets
animated
animated
to
to
the
the
other
other
page.
page
Flutter
flutter
will
will
use
use
the
the
ID
id
to
to
keep
keep
the
the
image
image
in
in
the
the
UI
ui
on
on
both
both
pages
pages
While
while
the
the
navigation
navigation
is
is
taking
taking
place.
place
Now
now
on
on
the
the
other
other
screen,
screen
we'll
we'll
also
also
use
use
a
a
hero
hero
widget
widget
with
with
the
the
image
image
inside
inside
of
of
it.
it
When
when
we
we
navigate
navigate
to
to
this
this
route,
route
you'll
you'll
notice
notice
the
the
image
image
itself
itself
is
is
animated
animated
Between
between
the
the
two
two
screens
screens
automatically,
automatically
it
it
makes
makes
the
the
biggest
biggest
impact
impact
when
when
you
you
have
have
a
a
list
list
of
of
images
images
to
to
navigate
navigate
to.
to
Not
not
only
only
does
does
it
it
look
look
awesome,
awesome
but
but
it
it
would
would
be
be
extremely
extremely
difficult
difficult
to
to
Implement
implement
from
from
scratch.
scratch
Congratulations.
congratulations
You
you
just
just
completed
completed
basic
basic
training
training
for
for
Flutter.
flutter
Take
take
a
a
screenshot
screenshot
of
of
the
the
certificate
certificate
and
and
frame
frame
it
it
on
on
your
your
wall.
wall
If
if
you
you
wanna
wanna
go
go
beyond
beyond
the
the
basics,
basics
Become
become
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO
io
to
to
get
get
access
access
to
to
the
the
full
full
Flutter
flutter
2
2
course,
course
where
where
we
we
build
build
a
a
complex
complex
application
application
with
with
Firebase.
firebase
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss Flutter basic training and provide resources for Flutter basic training, including a course on Flutter basic training and a course on Flutter basic training. They also explain the build method for creating a widget and layout, including the use of flexible or expanded widget options. The speaker explains how to use Flutter to build a UI, including hierarchy and a fully functional counter app, and provides a demo of a fully functional counter app. They encourage the audience to use it for more information.
Flutter Basic Training - 12 Minute Bootcamp
Welcome to Flutter basic training. By the end of this video, you'll be shipping apps on iOS, Android, the web, and desktop. You will not laugh. You will not cry. You will learn by the numbers. I will teach you. Flutter is quickly becoming the world's most popular cross platform framework, Thanks to its awesome developer experience and ability to ship high quality apps on multiple platforms. It's unlike anything else out there, which also means that it has a steeper learning curve. To good at it, you'll need to stop watching YouTube and start building something. I created a bunch of satisfying examples that we'll go through together, designed to make you a productive full stack water Developer. There are certain things they don't tell you when you first get started, like it's a 100 times faster to refactor your code by hitting control period than it is to do manually. We'll look at a ton of productivity boosters like this, and at the end of basic training, I'll give you a certificate that you can frame on your wall. And if you wanna go beyond a 6, I just released a brand new Flutter course available to pro members on FireShip IO. There's an ephemeral discount in the video description. To get started, you'll need to use the most important skill for any developer, following directions. Head over to flutter.dev and follow the install instructions for your system. Or if you want an easier way to get started, DartPad allows you to edit and run Flutter code in the browser. Now, open the terminal and create a new project by running Or create. Now open it in Versus Code and make sure to have the Flutter extension installed. At the bottom, you'll see an option to select a device like Windows, Chrome, or a A mobile emulator. I'm going to run my app in Android by running Flutter run from the command line. Now, find your application code in the main Read in between the lines to find a color or icon in your UI. Change one of these values to something else. You'll notice that when you type after the period, everything is Auto completed in the IDE, tooling is partly what makes Flutter development so productive. If you don't leverage it, you are not going to survive basic training. If you survive recruit training, You will be a weapon. Save the file. Now, type a lowercase r into the terminal. That performs a hot reload, allowing you to instantly see the Changes in the UI without having to rebuild the entire app. Now, take all the code in this file and delete it. We're going to start from scratch. 1st, import the Flutter material package at Atop. This gives you access to hundreds of pre built widgets in your code, ranging from low level building blocks like text to complex UI elements like a page view That performs animation and layout. As a Flutter developer, you'll need to learn how to combine these widgets together into a tree like structure To create a complex UI. But first, we need a main function. This is where the program will start executing. Flutter has a global function called run app. It takes a single widget as its argument and will inflate that widget to the screen on whatever device it happens to be running on. Let's create a custom widget to represent the application. Type s t into your editor and it should automatically give you a snippet for a Flutter stateless widget. Hit tab to insert it, then give it Name like my app. Notice how this class extends a stateless widget. That's a class built into Flutter that you use when creating a UI element That doesn't have any internal data. In other words, it's just a dumb widget that paints some pixels to the screen. You'll notice it has a constructor with a key. You don't need to worry about that for right now. But if you hover over it, you'll notice that it has a link to a YouTube video explaining more because Flutter's documentation is absolutely awesome. The thing you do need to know about is the build method. This method returns a widget and will be called anytime Flutter needs to rebuild the UI, like when your data changes. The first widget we'll return is a material app. It's used as the root of the application and allows us to configure themes and routes. Perform a hot reload and you should have a blank canvas to work with. We can Quickly add a screen to it by adding a scaffold to the home property. A scaffold allows you to build screens with common UI elements, Like an app bar at the top. Every prebuilt widget has a bunch of named parameters where you can customize its appearance. Put your cursor inside a widget, then hit control spacebar to bring up all The options. Go ahead and add a background color, then add a title by creating a text widget. Now, hot reload to check out your first Flutter screen. That's pretty cool, but there's no time to celebrate. Now, we need to talk about layout or how do I put widgets where they need to go in the screen. The most fundamental way to layout a widget is with a container. It's kind of like a div in HTML or a view in Android. It takes one child widget as an argument. We can make that a text widget for now, which will place it in the top left corner of Screen. You can think of it being surrounded by a box, and we can change the dimensions of that box by adding margin and padding. We can also customize things It's like the height, width, and color. We can also make the box look a lot cooler using the decoration property. It takes a box decoration widget as its argument, Which allows us to customize things like the border, gradient, shape, and shadow of the box. Containers do a lot, but Flutter has some other widgets that are more Focused. For example, if you just want to center a widget in the middle of the screen, you can do so by wrapping it with center. Now, you could write that code manually, but if you want to have a good time, you'll right click on the widget or hit control period to find the refactor tool, then select the option to wrap with center to write that code for You automatically. Another tip is that if you're using a container to apply some padding, use the padding widget instead. Or if you're creating a container with a fixed width and height, Use the size box widget instead. But, how do we deal with multiple related widgets like a row or column? That's where flex layout comes in. If you're familiar with CSS Flexbox, you'll be way ahead of the game here. Flutter provides row and column widgets used to layout multiple children horizontally or vertically. Unlike a container that takes only 1 widget as a child, a column takes multiple children as a list. Create a column, then add 3 icons inside of it. You'll notice that Each icon is laid out one after the other vertically. Change that widget to a row and now they flow horizontally. The direction they flow is called the main access, while the opposite direction is the cross axis. You can change the spacing and alignment between the children by modifying the cross axis and main axis alignment on the widget. By default, each child has a flex value of 1, which means that each sibling occupies the same amount of space. If that's not desirable, You can wrap a child in a flexible or expanded widget. Expanded tells a child to take up any available space, and you can give it more space than the other children by modifying its flex value. But in some cases, you may want to have one widget overlap another, like a button that floats on top of some other UI element. In that case, the widget we're looking or is a stack. Just like a row or column, it takes a list of children as an argument. And just one little side note here, you'll notice that I'm using a trailing comma after every block of code. The comma is not required, but it keeps your code nicely formatted. If you right click and choose format document, it will format it with multiple lines as opposed to one line when the comma is missing. Now in our stack, we might have a container and an icon. If we want to display the icon on top of the container, we make sure that it comes after the container in the list. Now if we want to move things around, We can use positioned to move a widget into a specific spot, kind of like absolute positioning in CSS. Or if we want to modify its positioning relative to its parent, we can use align to move it to the top, left, bottom, right, or center. Those are your low level building blocks for layout, but Flutter takes care of many UI elements out of blocks. For example, if we add a floating action button to our scaffold, that button magically appears down here at the bottom right. The floating action button widget has an event handler They're called onPressed. We can define an anonymous function here to handle the gesture. If we then want to add a bottom bar to it, we can use the bottom bar widget to add some navigation icons to the scaffold. We also need a drawer that animates out from the left. We can achieve that by simply adding a drawer to the scaffold. That's pretty awesome, but eventually, you'll lay out your widgets and they will overflow the bounds of their parent, which will summon the red screen of death or this black and yellow error tape. When you get an error like this, the terminal output will link you to Flutter's built in debugger. That'll give you more information about layout to help debug things like this. In this case, the The problem is that our parent is not a scrollable view. Things don't just scroll automatically. Instead, you need to use a widget like list view. It takes a list of as its argument, but will scroll between them. It can scroll both horizontally and vertically, and you can even tell it to garbage collect items that are no longer on the screen. You'll notice that this list, we're adding each widget individually. But in real life, you'll often need to fetch a bunch of items from a database and then create each list item programmatically. In Flutter, many widgets can be built dynamically using builders, which is just a function that you define that can map a list of data to a list of widgets. And that means can create a scrollable list that is infinitely long, where the children are rendered lazily, keeping the UI smooth and fast. Now that you know how to build a UI, we need to talk about state, Or the data that changes throughout the life cycle of the app. A stateless widget has no state as the name implies. To give this widget mutable data, we need to convert it To a stateful widget, which we can do by right clicking, going to the refactor tool, and choosing the option to convert it. That will break the widget up into 2 different classes. That keeps the widget itself immutable while giving us a state class where we can play with mutable data. It has a build method, but we can also define variables on this class And then change them by using the built in set state function somewhere else in our code, like when a button is pressed. We can create a counter app by defining a property called count, then reference the value in the UI using a text widget. When working with strings in Dart, you can interpolate a Variable inside of it with a dollar sign. Now when our button is pressed, we call set state to change the value, and the widget will automatically Rerender to reflect the latest data. Another thing you might wanna do in a stateful widget is initialize data, like maybe fetch a record from a database. The init state method is called once when the widget is first initialized, and there's also another life cycle hook called dispose that runs when the widget is removed from the UI. Now you should know that this is not the only way to manage state in Flutter. In fact, there are many different approaches And many strong opinions out there about this topic. In my full course, I use a package called provider that allows us to share real time data throughout the entire widget tree without ever needing to use a stateful widget at all. There are also full blown solutions out there like Block and Qubit. The full course also contains a repo of the same app built with Qubit. I wanna give a shout out to Raleigh Perez for putting that demo together. If you're looking to hire a Flutter developer, you'll definitely want to get in touch with him. Now we have a fully functional counter app, the question becomes, how do we navigate to a different screen? Well, confusingly, Flutter has navigator 1.02.0, and all you need to know for Sick training is 1 point o. At this point, go ahead and build 2 different stateless widgets, then give each one of them a scaffold. Make sure that each scaffold has an app bar at the top. In the first page, go ahead and add a button to the body of the scaffold. Now think of your navigation like a stack, where you can push and pop Different screens onto it. To add a new screen to the top of the stack, we use navigator push with the build context, then create a new material page route. The route expects a builder function, which then returns the screen that you want to render, which in our case will be page 2. Now do a full restart of the application And by typing a capital r into the command line, and you should be able to navigate back and forth between the two pages. One magic thing that Flutter Doing here is adding a back button to the app bar, which under the hood is calling the navigator pop method. That was easy, but I want to finish things off with something really Cool. Flutter has a hero widget that can animate elements from one screen to another. So check this out. On page 1, I have an icon button with an image as Background. Then on page 2, I'm showing the same image taking up the full screen. That works, but I think we could do a little better. The magic comes into play when I wrap these images in a hero. The only argument the hero needs is an ID to identify it when it gets animated to the other page. Flutter will use the ID to keep the image in the UI on both pages While the navigation is taking place. Now on the other screen, we'll also use a hero widget with the image inside of it. When we navigate to this route, you'll notice the image itself is animated Between the two screens automatically, it makes the biggest impact when you have a list of images to navigate to. Not only does it look awesome, but it would be extremely difficult to Implement from scratch. Congratulations. You just completed basic training for Flutter. Take a screenshot of the certificate and frame it on your wall. If you wanna go beyond the basics, Become a pro member at Fireship IO to get access to the full Flutter 2 course, where we build a complex application with Firebase. Thanks for watching and I will see you in the next one.
The speakers discuss Flutter basic training and provide resources for Flutter basic training, including a course on Flutter basic training and a course on Flutter basic training. They also explain the build method for creating a widget and layout, including the use of flexible or expanded widget options. The speaker explains how to use Flutter to build a UI, including hierarchy and a fully functional counter app, and provides a demo of a fully functional counter app. They encourage the audience to use it for more information.