Build apps on iOS, Android, the web, and desktop with Flutter in 100 seconds. Go beyond the basics in the Flutter Firebase course https://fireship.io/courses/flutter-firebase/

#Flutter #100SecondsOfCode

Flutter https://flutter.dev

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:15:37.466Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
d11c5fdc-8394-42cc-8d5f-b6a96d09c702
8f3302a48dc6a2502cb5dc694fad2458263756276513eda0b985f1055d165cd1
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Flutter, a UI framework for building apps on iOS, Android, the web, and desktop.
At its core, Flutter combines a high performance graphics engine with the Dart programming language.
In development, Dart provides full type safety and stateful hot reload to help you build reliable apps quickly.
In production, Dart compiles to native machine code, which means your graphics will render beautifully on any platform.
Install Flutter, then run flutter create to create a new project.
Now open the main Dart file.
This is where you build your app.
The UI is laid out as a tree of widgets, and the framework provides hundreds of prebuilt widgets to handle things like animation, scrolling, responsive layout, and more.
You can build your own widget by extending the stateless widget class.
You then define your UI by overriding its build method.
Now it's important to understand that everything in Flutter is a widget.
This method returns a widget, and its children return widgets, and their children return widgets, giving us an expressive declarative UI structure, which you can easily traverse using Flutter's awesome tooling.
Whenever the input data to this widget changes, Flutter will rebuild the UI by calling your build method.
Stateless widgets are immutable and don't have any internal data.
When you have an interactive widget Where the internal data might change based on user input, you can extend a stateful widget.
Properties defined on this class can be reactive.
For example, we might have a counter that starts at strobe.
Then in our build method, we have one of Flutter's built in buttons that calls a function whenever it's pressed.
It increments the counter by calling set state, which tells the framework that the widget's data has changed, causing the UI to rerender with the latest data.
You can now play with this app on a real device using the Flutter run command.
That's cool and all, but let's make some changes.
We'll go back to our source code and center the button on the middle of the screen.
Instead of writing code, just click on the button and hit control shift r, then wrap your button with a center widget.
Next, change the color of the button and notice how Flutter previews that color directly in your IDE.
Now to hot reload the app, simply type r into the command line.
It only took a few milliseconds to build a new version of our app.
And notice how the state of the counter was unchanged.
That's what I like to call an awesome developer experience.
This has been Flutter in 100 seconds.
If you wanna learn more, check out my newly updated Flutter Firebase course on Fireship IO.
Thanks for watching, and I will see you in the next one.

Speaker 0: Flutter, a UI framework for building apps on iOS, Android, the web, and desktop. At its core, Flutter combines a high performance graphics engine with the Dart programming language. In development, Dart provides full type safety and stateful hot reload to help you build reliable apps quickly. In production, Dart compiles to native machine code, which means your graphics will render beautifully on any platform. Install Flutter, then run flutter create to create a new project.

Now open the main Dart file. This is where you build your app. The UI is laid out as a tree of widgets, and the framework provides hundreds of prebuilt widgets to handle things like animation, scrolling, responsive layout, and more. You can build your own widget by extending the stateless widget class. You then define your UI by overriding its build method.

Now it's important to understand that everything in Flutter is a widget. This method returns a widget, and its children return widgets, and their children return widgets, giving us an expressive declarative UI structure, which you can easily traverse using Flutter's awesome tooling. Whenever the input data to this widget changes, Flutter will rebuild the UI by calling your build method. Stateless widgets are immutable and don't have any internal data. When you have an interactive widget Where the internal data might change based on user input, you can extend a stateful widget.

Properties defined on this class can be reactive. For example, we might have a counter that starts at strobe. Then in our build method, we have one of Flutter's built in buttons that calls a function whenever it's pressed. It increments the counter by calling set state, which tells the framework that the widget's data has changed, causing the UI to rerender with the latest data. You can now play with this app on a real device using the Flutter run command.

That's cool and all, but let's make some changes. We'll go back to our source code and center the button on the middle of the screen. Instead of writing code, just click on the button and hit control shift r, then wrap your button with a center widget. Next, change the color of the button and notice how Flutter previews that color directly in your IDE. Now to hot reload the app, simply type r into the command line.

It only took a few milliseconds to build a new version of our app. And notice how the state of the counter was unchanged. That's what I like to call an awesome developer experience. This has been Flutter in 100 seconds. If you wanna learn more, check out my newly updated Flutter Firebase course on Fireship IO.

Thanks for watching, and I will see you in the next one.
Flutter, a UI framework for building apps on iOS, Android, the web, and desktop. At its core, Flutter combines a high performance graphics engine with the Dart programming language. In development, Dart provides full type safety and stateful hot reload to help you build reliable apps quickly. In production, Dart compiles to native machine code, which means your graphics will render beautifully on any platform.
programming
animation
Install Flutter, then run flutter create to create a new project. Now open the main Dart file. This is where you build your app. The UI is laid out as a tree of widgets, and the framework provides hundreds of prebuilt widgets to handle things like animation, scrolling, responsive layout, and more.
programming
animation
software development
software
You can build your own widget by extending the stateless widget class. You then define your UI by overriding its build method. Now it's important to understand that everything in Flutter is a widget.
This method returns a widget, and its children return widgets, and their children return widgets, giving us an expressive declarative UI structure, which you can easily traverse using Flutter's awesome tooling. Whenever the input data to this widget changes, Flutter will rebuild the UI by calling your build method. Stateless widgets are immutable and don't have any internal data. When you have an interactive widget Where the internal data might change based on user input, you can extend a stateful widget.
animation
Properties defined on this class can be reactive.
For example, we might have a counter that starts at strobe. Then in our build method, we have one of Flutter's built in buttons that calls a function whenever it's pressed. It increments the counter by calling set state, which tells the framework that the widget's data has changed, causing the UI to rerender with the latest data.
programming
You can now play with this app on a real device using the Flutter run command. That's cool and all, but let's make some changes. We'll go back to our source code and center the button on the middle of the screen. Instead of writing code, just click on the button and hit control shift r, then wrap your button with a center widget. Next, change the color of the button and notice how Flutter previews that color directly in your IDE. Now to hot reload the app, simply type r into the command line. It only took a few milliseconds to build a new version of our app. And notice how the state of the counter was unchanged. That's what I like to call an awesome developer experience. This has been Flutter in 100 seconds. If you wanna learn more, check out my newly updated Flutter Firebase course on Fireship IO. Thanks for watching, and I will see you in the next one.
Flutter, a UI framework for building apps on iOS, Android, the web, and desktop. At its core, Flutter combines a high performance graphics engine with the Dart programming language. In development, Dart provides full type safety and stateful hot reload to help you build reliable apps quickly. In production, Dart compiles to native machine code, which means your graphics will render beautifully on any platform. Install Flutter, then run flutter create to create a new project. Now open the main Dart file. This is where you build your app. The UI is laid out as a tree of widgets, and the framework provides hundreds of prebuilt widgets to handle things like animation, scrolling, responsive layout, and more. You can build your own widget by extending the stateless widget class. You then define your UI by overriding its build method. Now it's important to understand that everything in Flutter is a widget. This method returns a widget, and its children return widgets, and their children return widgets, giving us an expressive declarative UI structure, which you can easily traverse using Flutter's awesome tooling. Whenever the input data to this widget changes, Flutter will rebuild the UI by calling your build method. Stateless widgets are immutable and don't have any internal data. When you have an interactive widget Where the internal data might change based on user input, you can extend a stateful widget. Properties defined on this class can be reactive. For example, we might have a counter that starts at strobe. Then in our build method, we have one of Flutter's built in buttons that calls a function whenever it's pressed. It increments the counter by calling set state, which tells the framework that the widget's data has changed, causing the UI to rerender with the latest data. You can now play with this app on a real device using the Flutter run command. That's cool and all, but let's make some changes. We'll go back to our source code and center the button on the middle of the screen. Instead of writing code, just click on the button and hit control shift r, then wrap your button with a center widget. Next, change the color of the button and notice how Flutter previews that color directly in your IDE. Now to hot reload the app, simply type r into the command line. It only took a few milliseconds to build a new version of our app. And notice how the state of the counter was unchanged. That's what I like to call an awesome developer experience. This has been Flutter in 100 seconds. If you wanna learn more, check out my newly updated Flutter Firebase course on Fireship IO. Thanks for watching, and I will see you in the next one.
Flutter,
flutter
a
a
UI
ui
framework
framework
for
for
building
building
apps
apps
on
on
iOS,
ios
Android,
android
the
the
web,
web
and
and
desktop.
desktop
At
at
its
its
core,
core
Flutter
flutter
combines
combines
a
a
high
high
performance
performance
graphics
graphics
engine
engine
with
with
the
the
Dart
dart
programming
programming
language.
language
In
in
development,
development
Dart
dart
provides
provides
full
full
type
type
safety
safety
and
and
stateful
stateful
hot
hot
reload
reload
to
to
help
help
you
you
build
build
reliable
reliable
apps
apps
quickly.
quickly
In
in
production,
production
Dart
dart
compiles
compiles
to
to
native
native
machine
machine
code,
code
which
which
means
means
your
your
graphics
graphics
will
will
render
render
beautifully
beautifully
on
on
any
any
platform.
platform
Install
install
Flutter,
flutter
then
then
run
run
flutter
flutter
create
create
to
to
create
create
a
a
new
new
project.
project
Now
now
open
open
the
the
main
main
Dart
dart
file.
file
This
this
is
is
where
where
you
you
build
build
your
your
app.
app
The
the
UI
ui
is
is
laid
laid
out
out
as
as
a
a
tree
tree
of
of
widgets,
widgets
and
and
the
the
framework
framework
provides
provides
hundreds
hundreds
of
of
prebuilt
prebuilt
widgets
widgets
to
to
handle
handle
things
things
like
like
animation,
animation
scrolling,
scrolling
responsive
responsive
layout,
layout
and
and
more.
more
You
you
can
can
build
build
your
your
own
own
widget
widget
by
by
extending
extending
the
the
stateless
stateless
widget
widget
class.
class
You
you
then
then
define
define
your
your
UI
ui
by
by
overriding
overriding
its
its
build
build
method.
method
Now
now
it's
it's
important
important
to
to
understand
understand
that
that
everything
everything
in
in
Flutter
flutter
is
is
a
a
widget.
widget
This
this
method
method
returns
returns
a
a
widget,
widget
and
and
its
its
children
children
return
return
widgets,
widgets
and
and
their
their
children
children
return
return
widgets,
widgets
giving
giving
us
us
an
an
expressive
expressive
declarative
declarative
UI
ui
structure,
structure
which
which
you
you
can
can
easily
easily
traverse
traverse
using
using
Flutter's
flutter's
awesome
awesome
tooling.
tooling
Whenever
whenever
the
the
input
input
data
data
to
to
this
this
widget
widget
changes,
changes
Flutter
flutter
will
will
rebuild
rebuild
the
the
UI
ui
by
by
calling
calling
your
your
build
build
method.
method
Stateless
stateless
widgets
widgets
are
are
immutable
immutable
and
and
don't
don't
have
have
any
any
internal
internal
data.
data
When
when
you
you
have
have
an
an
interactive
interactive
widget
widget
Where
where
the
the
internal
internal
data
data
might
might
change
change
based
based
on
on
user
user
input,
input
you
you
can
can
extend
extend
a
a
stateful
stateful
widget.
widget
Properties
properties
defined
defined
on
on
this
this
class
class
can
can
be
be
reactive.
reactive
For
for
example,
example
we
we
might
might
have
have
a
a
counter
counter
that
that
starts
starts
at
at
strobe.
strobe
Then
then
in
in
our
our
build
build
method,
method
we
we
have
have
one
one
of
of
Flutter's
flutter's
built
built
in
in
buttons
buttons
that
that
calls
calls
a
a
function
function
whenever
whenever
it's
it's
pressed.
pressed
It
it
increments
increments
the
the
counter
counter
by
by
calling
calling
set
set
state,
state
which
which
tells
tells
the
the
framework
framework
that
that
the
the
widget's
widget's
data
data
has
has
changed,
changed
causing
causing
the
the
UI
ui
to
to
rerender
rerender
with
with
the
the
latest
latest
data.
data
You
you
can
can
now
now
play
play
with
with
this
this
app
app
on
on
a
a
real
real
device
device
using
using
the
the
Flutter
flutter
run
run
command.
command
That's
that's
cool
cool
and
and
all,
all
but
but
let's
let's
make
make
some
some
changes.
changes
We'll
we'll
go
go
back
back
to
to
our
our
source
source
code
code
and
and
center
center
the
the
button
button
on
on
the
the
middle
middle
of
of
the
the
screen.
screen
Instead
instead
of
of
writing
writing
code,
code
just
just
click
click
on
on
the
the
button
button
and
and
hit
hit
control
control
shift
shift
r,
r
then
then
wrap
wrap
your
your
button
button
with
with
a
a
center
center
widget.
widget
Next,
next
change
change
the
the
color
color
of
of
the
the
button
button
and
and
notice
notice
how
how
Flutter
flutter
previews
previews
that
that
color
color
directly
directly
in
in
your
your
IDE.
ide
Now
now
to
to
hot
hot
reload
reload
the
the
app,
app
simply
simply
type
type
r
r
into
into
the
the
command
command
line.
line
It
it
only
only
took
took
a
a
few
few
milliseconds
milliseconds
to
to
build
build
a
a
new
new
version
version
of
of
our
our
app.
app
And
and
notice
notice
how
how
the
the
state
state
of
of
the
the
counter
counter
was
was
unchanged.
unchanged
That's
that's
what
what
I
i
like
like
to
to
call
call
an
an
awesome
awesome
developer
developer
experience.
experience
This
this
has
has
been
been
Flutter
flutter
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
learn
learn
more,
more
check
check
out
out
my
my
newly
newly
updated
updated
Flutter
flutter
Firebase
firebase
course
course
on
on
Fireship
fireship
IO.
io
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 speaker explains the process of building apps on Flutter, a UI framework for building apps on various platforms. They outline the steps involved, including creating a new project, extending the stateless widget class, and hot reloading the app by calling a function. The speaker also provides a course on Flutter and a link to a new version of the app.
Flutter in 100 seconds
Flutter, a UI framework for building apps on iOS, Android, the web, and desktop. At its core, Flutter combines a high performance graphics engine with the Dart programming language. In development, Dart provides full type safety and stateful hot reload to help you build reliable apps quickly. In production, Dart compiles to native machine code, which means your graphics will render beautifully on any platform. Install Flutter, then run flutter create to create a new project. Now open the main Dart file. This is where you build your app. The UI is laid out as a tree of widgets, and the framework provides hundreds of prebuilt widgets to handle things like animation, scrolling, responsive layout, and more. You can build your own widget by extending the stateless widget class. You then define your UI by overriding its build method. Now it's important to understand that everything in Flutter is a widget. This method returns a widget, and its children return widgets, and their children return widgets, giving us an expressive declarative UI structure, which you can easily traverse using Flutter's awesome tooling. Whenever the input data to this widget changes, Flutter will rebuild the UI by calling your build method. Stateless widgets are immutable and don't have any internal data. When you have an interactive widget Where the internal data might change based on user input, you can extend a stateful widget. Properties defined on this class can be reactive. For example, we might have a counter that starts at strobe. Then in our build method, we have one of Flutter's built in buttons that calls a function whenever it's pressed. It increments the counter by calling set state, which tells the framework that the widget's data has changed, causing the UI to rerender with the latest data. You can now play with this app on a real device using the Flutter run command. That's cool and all, but let's make some changes. We'll go back to our source code and center the button on the middle of the screen. Instead of writing code, just click on the button and hit control shift r, then wrap your button with a center widget. Next, change the color of the button and notice how Flutter previews that color directly in your IDE. Now to hot reload the app, simply type r into the command line. It only took a few milliseconds to build a new version of our app. And notice how the state of the counter was unchanged. That's what I like to call an awesome developer experience. This has been Flutter in 100 seconds. If you wanna learn more, check out my newly updated Flutter Firebase course on Fireship IO. Thanks for watching, and I will see you in the next one.
The speaker explains the process of building apps on Flutter, a UI framework for building apps on various platforms. They outline the steps involved, including creating a new project, extending the stateless widget class, and hot reloading the app by calling a function. The speaker also provides a course on Flutter and a link to a new version of the app.