Flutter Basic Training - 12 Minute Bootcamp
Summary
TLDRThis 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
🚀 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.
🛠 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.
🔄 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.
Mindmap
Keywords
💡Flutter
💡Cross-platform framework
💡Developer experience
💡Productivity boosters
💡Hot reload
💡Widgets
💡Layout
💡State
💡Navigator
💡Hero widget
💡State management
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
Voir Plus de Vidéos Connexes
5.0 / 5 (0 votes)