Flutter Basic Training - 12 Minute Bootcamp

Summary

This video script offers an introduction to Flutter, a popular cross-platform framework for developing high-quality apps across iOS, Android, the web, and desktop. The training covers essential concepts such as UI building blocks, layout, state management, and navigation. It also highlights productivity tips, like code refactoring shortcuts, and introduces advanced features like the Hero widget for animated transitions. The script is designed to transform viewers into productive full-stack Flutter developers, with a certificate of completion and an invitation to a more in-depth course for further learning.

Takeaways

• 🚀 Flutter is becoming the world's most popular cross-platform framework due to its developer experience and ability to ship high-quality apps on multiple platforms.
• 🛠️ Flutter has a steeper learning curve, and to master it, one should focus on building projects rather than just watching tutorials.
• 📚 The instructor provides satisfying examples to make learners productive full stack Flutter developers.
• 🔑 Refactoring code in Flutter is much faster using shortcuts like 'control period' compared to manual editing.
• 🛑 Productivity boosters and hot reload features are highlighted as key to efficient Flutter development.
• 📝 The script emphasizes the importance of following directions and using resources like flutter.dev for installation instructions.
• 🔍 DartPad is introduced as a tool for editing and running Flutter code directly in the browser.
• 🏗️ The basics of creating a Flutter app involve using the 'Material App' as the root widget and 'Scaffold' for building screens with common UI elements.
• 🎨 Layout in Flutter is managed using widgets like 'Container', 'Center', 'Row', 'Column', and 'Stack', with explanations on how to use them effectively.
• 🔄 The concept of state in Flutter is introduced, explaining the difference between 'Stateless' and 'Stateful' widgets and how to manage mutable data.
• 🔄 'setState' is used in stateful widgets to update the UI in response to user interactions or data changes.
• 🌐 Navigation in Flutter is achieved using the Navigator 1.0, with 'push' and 'pop' methods to manage screen transitions.
• 🎉 The 'Hero' widget in Flutter is showcased for creating animated transitions between screens, enhancing user experience.

Q & A

What is the primary goal of the Flutter Basic Training video?

The primary goal of the Flutter Basic Training video is to teach viewers how to develop and ship high-quality apps on multiple platforms such as iOS, Android, the web, and desktop using Flutter, which is a cross-platform framework.

Why is Flutter becoming popular among developers?

Flutter is becoming popular due to its excellent developer experience and its ability to create high-quality apps that can be deployed on multiple platforms, making it a unique and powerful tool in the market.

What are some productivity boosters mentioned in the video for Flutter development?

The video mentions several productivity boosters such as using the 'control period' shortcut for refactoring code, leveraging the IDE's auto-completion features, and using hot reload for instant UI updates without a full rebuild.

What is the importance of the 'runApp' function in Flutter?

The 'runApp' function is a global function in Flutter that is used to start the execution of the program. It takes a single widget as an argument and inflates that widget to the screen on the device it is running on.

How does Flutter handle UI updates when data changes?

Flutter uses the 'build' method in widgets to handle UI updates when data changes. This method returns a widget and is called anytime Flutter needs to rebuild the UI, such as when the underlying data changes.

What is the purpose of the 'Material App' widget in Flutter?

The 'Material App' widget serves as the root of the application in Flutter. It allows developers to configure themes, routes, and other properties that are consistent across the entire app.

What is the difference between a 'StatelessWidget' and a 'StatefulWidget' in Flutter?

A 'StatelessWidget' in Flutter is used when creating a UI element that does not have any internal data and does not change. In contrast, a 'StatefulWidget' is used when the widget needs to have mutable data or state that can change over time.

How can developers navigate to a different screen in Flutter?

Developers can navigate to a different screen in Flutter by using the 'Navigator' class and calling the 'push' method with a 'MaterialPageRoute' that includes a builder function returning the new screen.

What is the 'Hero' widget used for in Flutter, and how does it enhance the user experience?

The 'Hero' widget in Flutter is used to create an animated transition between two screens, making it look like an element is moving from one screen to another. This enhances the user experience by providing a smooth and visually appealing transition.

What is the significance of using a 'ListView' widget in Flutter when dealing with overflow?

The 'ListView' widget in Flutter is significant when dealing with overflow because it allows the UI to scroll, both horizontally and vertically, and can even perform lazy loading and garbage collection of off-screen items, keeping the UI smooth and efficient.

How can developers create dynamic UI elements in Flutter based on data?

Developers can create dynamic UI elements in Flutter using 'builders', which are functions that map a list of data to a list of widgets. This allows for the creation of scrollable lists that can be infinitely long, with children rendered lazily as needed.

Outlines

00:00

🚀 Flutter Basics and Productivity Tips

This paragraph introduces the viewer to Flutter, a popular cross-platform framework for developing high-quality apps on multiple platforms. It emphasizes the framework's rapid rise in popularity due to its developer-friendly experience and the need for hands-on learning to master it. The instructor promises to guide the viewer through practical examples to become a proficient Flutter developer. It also highlights the importance of utilizing IDE tooling and productivity shortcuts, such as code refactoring with 'control period', and offers a certificate upon completion of basic training. For those looking to advance, a new Flutter course for Pro members is mentioned, along with a discount for the viewer. The paragraph concludes with instructions on setting up the Flutter development environment and creating a new project.

05:01

🛠 Understanding Flutter's Layout and UI Components

The second paragraph delves into the intricacies of Flutter's layout system, starting with the fundamental 'Container' widget, which is analogous to HTML's 'div' or Android's 'View'. It explains how to manipulate the layout properties like margin, padding, height, width, and decoration. The paragraph then introduces 'Row' and 'Column' for arranging widgets in a linear fashion, either horizontally or vertically, and discusses the concepts of 'main axis' and 'cross axis'. It also covers the use of 'Expanded' and 'Flexible' widgets to control the distribution of space among children. The paragraph further explores advanced layout widgets like 'Stack' for overlapping elements and 'Positioned' for precise placement. It touches on the importance of code formatting and the use of Flutter's built-in widgets for common UI elements, such as 'FloatingActionButton', 'BottomNavigationBar', and 'Drawer'. The discussion on layout concludes with the use of 'ListView' for scrollable content and dynamic widget creation with builders.

10:02

🔄 State Management and Navigation in Flutter

This paragraph focuses on state management and navigation within Flutter apps. It begins by explaining the difference between 'StatelessWidget' and 'StatefulWidget', and how to convert a StatelessWidget to a StatefulWidget for mutable data. The paragraph details the use of 'setState' to update UI elements in response to user interactions and the importance of lifecycle methods like 'initState' and 'dispose'. It also discusses various approaches to state management, including the use of the 'provider' package for real-time data sharing and mentions other solutions like 'Bloc' and 'Cubit'. The paragraph then moves on to navigation, explaining how to use Flutter's Navigator 1.0 to push and pop screens onto a stack, and introduces the concept of 'Hero' animations for seamless transitions between screens. The summary concludes with a congratulatory note for completing the basic training and an invitation to join the full course for advanced Flutter development with Firebase.

Keywords

💡Flutter

Flutter is an open-source UI software development kit created by Google, used for developing cross-platform applications. It allows developers to compile code written in Dart into native applications for iOS, Android, Windows, macOS, and the web. In the video, Flutter is presented as the main focus, being the framework that enables the development of high-quality apps across multiple platforms.

💡Cross-platform framework

A cross-platform framework is a software tool that allows developers to write code once and deploy it across multiple platforms. In the context of the video, Flutter is highlighted as a popular cross-platform framework due to its ability to ship apps on iOS, Android, the web, and desktop, which is a key selling point for developers looking to reach a wide audience with a single codebase.

💡Developer experience

Developer experience, often abbreviated as DX, refers to the overall experience of a programmer while using a particular tool or framework. The video emphasizes Flutter's 'awesome developer experience' as one of the reasons for its growing popularity, suggesting that it is user-friendly and efficient for developers to work with.

💡Productivity boosters

Productivity boosters are features or techniques that increase the efficiency and speed of development work. The script mentions several productivity boosters in Flutter, such as the ability to refactor code quickly using keyboard shortcuts, which are essential for developers to maximize their output and minimize manual coding efforts.

💡Hot reload

Hot reload is a feature in Flutter that allows developers to see the changes they make in the code instantly reflected in the app without needing to restart the app. The video script describes how hot reload can be performed by typing a lowercase 'r' in the terminal, which is a significant productivity feature for developers to quickly iterate on their UI changes.

💡Widgets

In Flutter, a widget is the basic building block of the UI. Widgets can be simple or complex, and they are used to construct the user interface. The script explains how Flutter provides hundreds of pre-built widgets that developers can combine to create a complex UI, ranging from basic elements like 'Text' to more complex ones like 'PageView'.

💡Layout

Layout in Flutter refers to the arrangement and organization of widgets on the screen. The video script discusses various layout widgets such as 'Container', 'Center', 'Row', 'Column', and 'Stack', which are used to position and align widgets in different ways, essential for creating a visually appealing and functional user interface.

💡State

State in Flutter refers to the mutable data that can change during the lifecycle of an app. The script introduces the concept of 'Stateless' and 'Stateful' widgets, where 'StatelessWidget' is used for UI elements that do not change, while 'StatefulWidget' allows for mutable data and UI changes over time, such as a counter app that updates as buttons are pressed.

💡Navigator

Navigator in Flutter is a core widget for handling navigation between pages in an app. The video script explains the use of 'Navigator 1.0' for basic training, where screens are pushed onto a stack and popped off to navigate between pages, demonstrating how to move between different screens in a Flutter app.

💡Hero widget

The Hero widget in Flutter is used for creating a hero animation that transitions an element from one screen to another, providing a smooth and visually appealing experience. The script illustrates this by showing how an image can be animated between two screens, making it appear as if it transitions seamlessly as the user navigates.

💡State management

State management in Flutter refers to the strategies and techniques used to handle the state of an application. The video script briefly touches on this by mentioning different approaches to state management, including the use of the 'setState' function for simple state changes and the mention of packages like 'Provider' for more complex state management solutions.

Highlights

Flutter is becoming the world's most popular cross-platform framework due to its developer experience and ability to ship high-quality apps on multiple platforms.

The learning curve for Flutter is steep, requiring hands-on building rather than passive learning.

Productivity boosters like code refactoring shortcuts are essential for efficient Flutter development.

A certificate of completion is provided for the Flutter basic training.

For advanced learning, a new Flutter course is available for pro members on Fireship.io with an ephemeral discount.

Flutter development requires following installation instructions on flutter.dev or using Dartpad for an easier start.

VS Code with the Flutter extension is essential for Flutter development, enabling hot reload for instant UI updates.

Auto-completion in the IDE is crucial for productivity in Flutter development.

Flutter's material package provides access to pre-built widgets for UI construction.

Understanding the widget tree structure is fundamental for combining widgets in Flutter.

The 'runApp' function is central to starting Flutter applications, taking a single widget as an argument.

Stateless widgets in Flutter are used for UI elements without internal data, making them immutable.

The 'build' method in Flutter is key for returning a widget and is called whenever the UI needs to be rebuilt.

Layout in Flutter can be managed using fundamental widgets like Container, Center, and Flex (Row and Column).

Advanced layout widgets like Stack and Positioned allow for overlapping and precise positioning of widgets.

Flutter's built-in widgets like Scaffold, AppBar, and BottomBar simplify common UI element implementations.

Handling UI overflow requires using scrollable widgets like ListView to enable scrolling.

Dynamic UI creation in Flutter is facilitated by builders, allowing for the programmatic generation of widgets from data.

State management in Flutter involves converting a Stateless Widget to a Stateful Widget for mutable data.

The 'setState' function in Stateful Widgets is used to mutate data and trigger UI re-rendering.

Flutter's navigation involves pushing and popping screens onto a stack using Navigator 1.0.

The Hero widget in Flutter enables animated transitions of elements between screens.

Upon completion of basic training, participants are encouraged to take a screenshot of their certificate.

For comprehensive learning, joining as a pro member on Fireship.io provides access to the full Flutter 2 course.

Transcripts

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 get good at it you'll

need to stop watching youtube and start

building something i created a bunch of

satisfying examples that will go through

together designed to make you a

productive full stack flutter developer

there are certain things they don't tell

you when you first get started like it's

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 want to go beyond the

basics 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 flutter create now open it in vs

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 mobile emulator i'm

going to run my app and android by

running flutter run from the command

line now find your application code in

the main dart file 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 it 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 first import the flutter

material package at the top 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 st into

your editor and it should automatically

give you a snippet for a flutter

stateless widget hit tab to insert it

then give it a 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 pre-built widget has a

bunch of name parameters where you can

customize its appearance put your cursor

inside a widget then hit ctrl 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

the 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 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 one

widget as a child a column takes

multiple children as a list create a

column then add three 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 axis 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 for is a stack just like a

rower 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 a line

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

the box 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

called on pressed 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 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 children 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 in 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 you 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

two 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 setstate

to change the value and the widget will

automatically re-render to reflect the

latest data another thing you might want

to 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

lifecycle 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 and 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 want to 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 that

we have a fully functional counter app

the question becomes how do we navigate

to a different screen well confusingly

flutter has navigator 1.0 and 2.0 and

all you need to know for basic training

is 1.0 at this point go ahead and build

two 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 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

is 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 the 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 want to 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