GL Utter

21/09/2021 16:49 Flutter | Write your first Flutter app on the web
Flutter 2.5 is released to stable! For details, see What's new in Flutter 2.5.
keyboard_arrow_down
Write your first Flutter app on the web
Get started Docs chevron_right Get started chevron_right Write your first web app
1. Install
2. Set up an editor
3. Test drive Contents

4. Write your first app Step 0: Get the starter web app
5. Learn more Step 1: Show the Welcome screen
Step 2: Enable sign in progress tracking
Step 2.5: Launch Dart DevTools
arrow_drop_downFrom another platform? Step 3: Add animation for sign in progress
Flutter for Android devs
Flutter for iOS devs Complete sample

What next?
Flutter for React Native devs
Flutter for web devs
Flutter for Xamarin.Forms devs Tip:

This codelab walks you through writing your first Flutter
app on the web. You might prefer to try
writing your first Flutter
app on mobile.
Note that if you have downloaded and configured
Android and iOS tooling,
the completed app just works on
Introduction to declarative UI
all of these devices!
Dart language overview
Building a web app

This is a guide to creating your first Flutter web app.
If you are familiar with
Samples & tutorials keyboard_arrow_down object-oriented programming,
and concepts such as variables, loops, and
keyboard_arrow_down conditionals,
you can complete this tutorial.
You don’t need previous experience
Development with Dart,
mobile, or web programming.
arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down
User interface
Data & backend
Accessibility & internationalization
Platform integration
Packages & plugins
Add Flutter to existing app
Tools & features
Migration notes
Testing & debugging keyboard_arrow_down What you’ll build

Performance & optimization keyboard_arrow_down You’ll implement a simple web app that displays a sign in screen.
The screen contains three text fields: first name,
last name, and
username. As the user fills out the fields,
a progress bar animates along the top of the sign in area.
When all three fields are filled
Deployment keyboard_arrow_down the progress bar displays
in green along the full width of the sign in area,
and the Sign up button becomes enabled.
Clicking the S
up button causes a welcome screen
to animate in from the bottom of the screen.
Resources keyboard_arrow_down
keyboard_arrow_down The animated GIF shows how the app works at the completion of this lab.
Reference
Who is Dash?
Widget index
What you’ll learn
How to write a Flutter app that looks natural on the web.
API reference
Basic structure of a Flutter app.
flutter CLI reference
How to implement a Tween animation.
Package site How to implement a stateful widget.
How to use the debugger to set breakpoints.
What you'll use

You need three pieces of software to complete this lab:
Flutter SDK
Chrome browser
Text editor or IDE
For a web-only codelab,

we recommend either IntelliJ IDEA or VS Code.
Android Studio and Xcode aren’t required.
You can
also use a text editor, if you prefer.
While developing, run your web app in Chrome

so you can debug with Dart DevTools.
Step 0: Get the starter web app

https://flutter.dev/docs/get-started/codelab-web 1/9
You’ll start with a simple web app that we provide for you.
1. Enable web development.
At the command line, perform the following commands to

make sure that you have the latest web support and that
it’s enab
You only need to run flutter config once
to enable Flutter support for web.
If you see “flutter: command not found”,
then
make sure that you have installed the
Flutter SDK and that it’s in your path.
keyboard_arrow_down $ flutter channel beta

Get started
$ flutter upgrade
1. Install $ flutter config --enable-web
2. Set up an editor
If you have problems enabling web development,
see Building a web application with Flutter.
3. Test drive
4. Write your first app 2. Run flutter doctor.
5. Learn more The flutter doctor command reports the status of the installation.
You should see something like the following:
$ flutter doctor
arrow_drop_downFrom another platform?
[✓] Flutter: is fully installed. (Channel dev, v1.9.5, on Mac OS X 10.14.6 18G87, locale en-US)
Flutter for iOS devs [✗] Android toolchain - develop for Android devices: is not installed.
Flutter for React Native devs [✗] Xcode - develop for iOS and macOS: is not installed.
[✓] Chrome - develop for the web: is fully installed.
[!] Android Studio: is not available. (not installed)
Flutter for Xamarin.Forms devs [✓] Connected device: is fully installed. (1 available)
Dart language overview It’s okay if the Android toolchain, Android Studio,
and the Xcode tools are not installed,
since the app is intended for the web
only.
If you later want this app to work on mobile,
you will need to do additional installation and setup.
Building a web app
3. List the devices.
Samples & tutorials keyboard_arrow_down To ensure that web is installed,

list the devices available.
You should see something like the following:
keyboard_arrow_down
Development
$ flutter devices
User interface 2 connected devices:

Data & backend
Chrome • chrome • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools
Packages & plugins The Chrome device automatically starts Chrome.

The Web Server starts a server that hosts the app
so that you can load it f
Add Flutter to existing app any browser.
Use the Chrome device during development so that you can use DevTools,
and the web server when you want
Tools & features test on other browsers.
Migration notes 4. The starting app is displayed in the following DartPad.
Testing & debugging keyboard_arrow_down

Performance & optimization keyboard_arrow_down
Deployment keyboard_arrow_down
keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference
Package site
Important:
This page uses an embedded version of DartPad
to display examples and exercises.
If you see empty
boxes instead of DartPads,
go to the DartPad troubleshooting page.
5. Run the example.
Click the Run button to run the example.

Note that you can type into the text fields,
but the Sign up button is disabled.
6. Copy the code.
Click the clipboard icon in the upper right of the

code pane to copy the Dart code to your clipboard.
7. Create a new Flutter project.
From your IDE, editor, or at the command line,

create a new Flutter project and name it signin_example.
8. Replace the contents of lib/main.dart

with the contents of the clipboard.
Observations
keyboard_arrow_down
Get started The entire code for this example lives in the
lib/main.dart file.
If you know Java, the Dart language should feel very familiar.
1. Install
All of the app’s UI is created in Dart code.
For more information, see Introduction to declarative UI.
2. Set up an editor The app’s UI adheres Material Design,
a visual design language that runs on any device or platform.
You can customize the
3. Test drive Material Design widgets,
but if you prefer something else,
Flutter also offers the Cupertino widget library,
which implements
4. Write your first app current iOS design language.
Or you can create your own custom widget library.
In Flutter, almost everything is a Widget.
Even the app itself is a widget.
The app’s UI can be described as a widget tree.
5. Learn more

Flutter for Android devs Step 1: Show the Welcome screen
Flutter for iOS devs

The SignUpForm class is a stateful widget.
This simply means that the widget stores information
that can change, such as user in
Flutter for web devs or data from a feed.
Since widgets themselves are immutable
(can’t be modified once created),
Flutter stores state information in
Flutter for Xamarin.Forms devs companion class,
called the State class. In this lab,
all of your edits will be made to the private
_SignUpFormState class.

Fun fact
Building a web app
The Dart compiler enforces privacy for any identifier
prefixed with an underscore. For more information,
see the Effective Dart
Style Guide.
Samples & tutorials keyboard_arrow_down
keyboard_arrow_down
Development
First, in your lib/main.dart file,
add the following class definition for the
WelcomeScreen widget after the SignUpScreen class:
User interface
Data & backend class WelcomeScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
Platform integration return Scaffold(
Packages & plugins body: Center(
child: Text('Welcome!', style: Theme.of(context).textTheme.headline2),
),
Tools & features );
Migration notes }
}
Next, you will enable the button to display the screen
and create a method to display it.
1. Locate the build() method for the
_SignUpFormState class. This is the part of the code
that builds the SignUp button.
Not
how the button is defined:
It’s a TextButton with a blue background,
white text that says Sign up and, when pressed,
does
nothing.
Resources keyboard_arrow_down 2. Update the onPressed property.
keyboard_arrow_down Change the onPressed property to call the (non-existent)

method that will display the welcome screen.
Reference
Change onPressed: null to the following:
Who is Dash?
Widget index
onPressed: _showWelcomeScreen,
API reference

3. Add the _showWelcomeScreen method.
Package site Fix the error reported by the analyzer that _showWelcomeScreen
is not defined. Directly above the build() method,
add the
following function:
void _showWelcomeScreen() {
Navigator.of(context).pushNamed('/welcome');
}
4. Add the /welcome route.
Create the connection to show the new screen.

In the build() method for SignUpApp,
add the following route below '/':
'/welcome': (context) => WelcomeScreen(),
5. Run the app.
The Sign up button should now be enabled.

Click it to bring up the welcome screen.
Note how it animates in from the bottom
You get that behavior for free.
Observations
The _showWelcomeScreen() function is used in the build()
method as a callback function. Callback functions are often
us
in Dart code and, in this case, this means
“call this method when the button is pressed”.
Flutter has only one Navigator object.

This widget manages Flutter’s screens
(also called routes or pages) inside a stack.
T
screen at the top of the stack is the view that
is currently displayed. Pushing a new screen to this
stack switches the display
that new screen.
This is why the _showWelcomeScreen function pushes
the WelcomeScreen onto the Navigator’s stack.
The u
clicks the button and, voila,
the welcome screen appears. Likewise,
calling pop() on the Navigator returns to the
previous
screen. Because Flutter’s navigation is
integrated into the browser’s navigation,
this happens implicitly when clicking the
browser’s
back arrow button.
keyboard_arrow_down
Get started
1. Install Step 2: Enable sign in progress tracking

2. Set up an editor
3. Test drive This sign in screen has three fields.

Next, you will enable the ability to track the
user’s progress on filling in the form fields,
and up
4. Write your first app the app’s UI when the form is complete.
5. Learn more
Note:
This example does not validate the accuracy of the user input.
That is something you can add later using form
arrow_drop_downFrom another platform? validation, if you like.

1. Add a method to update _formProgress.
In the _SignUpFormState class, add a new method called
_updateFormProgress(

...
Flutter for Xamarin.Forms devs void _updateFormProgress() {
Introduction to declarative UI var progress = 0.0;
final controllers = [
_firstNameTextController,
Building a web app _lastNameTextController,
_usernameTextController
Samples & tutorials keyboard_arrow_down ];
keyboard_arrow_down
Development for (final controller in controllers) {
if (controller.value.text.isNotEmpty) {
User interface progress += 1 / controllers.length;

Data & backend
}
}
Platform integration setState(() {

_formProgress = progress;
Packages & plugins
});
Add Flutter to existing app }
Tools & features ...
Migration notes
This method updates the _formProgress field based on the
the number of non-empty text fields.
Testing & debugging keyboard_arrow_down 2. Call _updateFormProgress when the form
changes.
In the build() method of the _SignUpFormState class,

add a callback to the Form widget’s onChanged argument.
Add the co
Performance & optimization keyboard_arrow_down below marked as NEW:
...
return Form(
Resources keyboard_arrow_down onChanged: _updateFormProgress, // NEW
keyboard_arrow_down child: Column(
Reference
...
Who is Dash?
Widget index 3. Update the onPressed property (again).
In step 1, you modified the onPressed property for the

Sign up button to display the welcome screen.
Now, update that butt
API reference
to display the welcome
screen only when the form is completely filled in:
Package site
...
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
return states.contains(MaterialState.disabled) ? null : Colors.white;
}),
backgroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
return states.contains(MaterialState.disabled) ? null : Colors.blue;
}),
),
onPressed: _formProgress == 1 ? _showWelcomeScreen : null, // UPDATED
child: Text('Sign up'),
),
...
4. Run the app.
The Sign up button is initially disabled,

but becomes enabled when all three text fields contain
(any) text.
Observations
Calling a widget’s setState() method tells Flutter that the

widget needs to be updated on screen.
The framework then
disposes of the previous immutable widget
(and its children), creates a new one
(with its accompanying child widget tree),
a
renders it to screen. For this to work seamlessly,
Flutter needs to be fast.
The new widget tree must be created and rendered
screen
in less than 1/60th of a second to create a smooth visual
transition—especially for an animation.
Luckily Flutter is fa
The progress field is defined as a floating value,
and is updated in the _updateFormProgress method.
When all three fields
filled in, _formProgress is set to 1.0.
When _formProgress is set to 1.0, the onPressed callback is set to the
_showWelcomeScreen method. Now that its onPressed argument is non-null, the button is enabled.
Like most Material Desig
keyboard_arrow_down buttons in Flutter,
TextButtons are disabled by default if their onPressed and onLongPress callbacks are null.
Get started
Notice that the _updateFormProgress passes a function to setState().
This is called an anonymous
function and has the
1. Install following syntax:
2. Set up an editor
methodName(() {...});
3. Test drive
4. Write your first app Where methodName is a named function that takes an anonymous
callback function as an argument.
5. Learn more
The Dart syntax in the last step that displays the
welcome screen is:
arrow_drop_downFrom another platform? onPressed: _formProgress == 1 ? _showWelcomeScreen : null,

Flutter for iOS devs This is a Dart conditional assignment and has the syntax:
condition ? expression1 : expression2.
If the expression
Flutter for React Native devs _formProgress == 1 is true, the entire expression results
in the value on the left hand side of the :, which is the
_showWelcomeScreen method in this case.
Flutter for Xamarin.Forms devs
Step 2.5: Launch Dart DevTools

Building a web app

How do you debug a Flutter web app?
It’s not too different from debugging any Flutter app.
You want to use Dart DevTools!
(Not t
Samples & tutorials keyboard_arrow_down confused with Chrome DevTools.)
keyboard_arrow_down
Development Our app currently has no bugs, but let’s check it out anyway.
The following instructions for launching DevTools applies to any
workflow,
but there is a short cut if you’re using IntelliJ.
See the tip at the end of this section for more information.
User interface
Data & backend 1. Run the app.
Accessibility & internationalization If your app isn’t currently running, launch it.
Select the Chrome device from the pull down
and launch it from your IDE or,
from
the command line, use flutter run -d chrome,
Packages & plugins 2. Get the web socket info for DevTools.
Add Flutter to existing app At the command line, or in the IDE,

you should see a message stating something like the following:
Tools & features

Launching lib/main.dart on Chrome in debug mode...
Migration notes
Building application for the web... 11.7s
Attempting to connect to browser instance..
Testing & debugging keyboard_arrow_down Debug service listening on **ws://127.0.0.1:54998/pJqWWxNv92s=**
Copy the address of the debug service, shown in bold.
You will need that to launch DevTools.
Deployment keyboard_arrow_down 3. Ensure that DevTools is installed.
Do you have DevTools installed?

If you are using an IDE,
make sure you have the Flutter and Dart plugins set up,
as describe
Resources keyboard_arrow_down the VS Code and
Android Studio and IntelliJ pages.
If you are working at the command line,
launch the DevTools server as
keyboard_arrow_down explained in the
DevTools command line page.
Reference
4. Connect to DevTools.
Who is Dash?
When DevTools launches, you should see something
like the following:
Widget index
API reference
Serving DevTools at http://127.0.0.1:9100
Package site Go to this URL in a Chrome browser. You should see the DevTools
launch screen. It should look like the following:
keyboard_arrow_down
Get started
1. Install
2. Set up an editor
3. Test drive
4. Write your first app
5. Learn more

Building a web app

keyboard_arrow_down
Development 5. Connect to running app.
Under Connect to a running site,

paste the ws location that you copied in step 2,
and click Connect. You should now see Da
User interface
DevTools
running successfully in your Chrome browser:
Data & backend
Packages & plugins
Tools & features
Migration notes

keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference
Package site
Congratulations, you are now running Dart DevTools!
Note:
This is not the only way to launch DevTools.
If you are using IntelliJ,
you can open DevTools by going to
Flutter
Inspector -> More Actions -> Open DevTools:
keyboard_arrow_down
Get started
1. Install
2. Set up an editor
3. Test drive
5. Learn more


1. Set a breakpoint.

Now that you have DevTools running,
select the Debugger tab in the blue bar along the top.
The debugger pane appears and
Flutter for web devs the lower left,
see a list of libraries used in the example.
Select signin/main.dart to display your Dart code
in the center pa
Building a web app

keyboard_arrow_down
Development
User interface
Data & backend
Packages & plugins
Tools & features
Migration notes

keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference
Package site 2. Set a breakpoint.
In the Dart code,

scroll down to where progress is updated:
for (final controller in controllers) {

if (controller.value.text.isNotEmpty) {
progress += 1 / controllers.length;
}
}
Place a breakpoint on the line with the for loop by clicking to the
left of the line number. The breakpoint now appears
in the
Breakpoints section to the left of the window.
3. Trigger the breakpoint.
In the running app, click one of the text fields to gain focus.
The app hits the breakpoint and pauses.
In the DevTools screen
can see on the left
the value of progress, which is 0. This is to be expected,
since none of the fields are filled in.
Step throug
the for loop to see
the program execution.
4. Resume the app.
Resume the app by clicking the green Resume

button in the DevTools window.
5. Delete the breakpoint.
Delete the breakpoint by clicking it again, and resume the app.
This gives you a tiny glimpse of what is possible using DevTools,

but there is lots more! For more information,
see the DevTools
documentation.
Step 3: Add animation for sign in progress

keyboard_arrow_down
Get started It’s time to add animation! In this final step,
you’ll create the animation for the
LinearProgressIndicator at the top of the sign in
area. The animation has the following behavior:
1. Install
2. Set up an editor When the app starts,

a tiny red bar appears across the top of the sign in area.
3. Test drive
When one text field contains text,
the red bar turns orange and animates 0.15
of the way across the sign in area.
When two text fields contain text,
the orange bar turns yellow and animates half
of the way across the sign in area.
When all three text fields contain text,
the orange bar turns green and animates all the
way across the sign in area.
Also, the
5. Learn more Sign up button becomes enabled.
1. Add an AnimatedProgressIndicator.

Flutter for Android devs At the bottom of the file, add this widget:

class AnimatedProgressIndicator extends StatefulWidget {
final double value;
Flutter for Xamarin.Forms devs AnimatedProgressIndicator({

required this.value,
});
Building a web app

@override
State<StatefulWidget> createState() {
return _AnimatedProgressIndicatorState();
Samples & tutorials keyboard_arrow_down }
keyboard_arrow_down }
Development
class _AnimatedProgressIndicatorState extends State<AnimatedProgressIndicator>
User interface
with SingleTickerProviderStateMixin {
Data & backend late AnimationController _controller;
Accessibility & internationalization late Animation<Color?> _colorAnimation;
late Animation<double> _curveAnimation;
Packages & plugins void initState() {

Add Flutter to existing app super.initState();
_controller = AnimationController(
Tools & features
duration: Duration(milliseconds: 1200), vsync: this);
Migration notes
final colorTween = TweenSequence([
Testing & debugging keyboard_arrow_down TweenSequenceItem(
tween: ColorTween(begin: Colors.red, end: Colors.orange),
weight: 1,
Performance & optimization keyboard_arrow_down ),
TweenSequenceItem(
Deployment keyboard_arrow_down tween: ColorTween(begin: Colors.orange, end: Colors.yellow),
weight: 1,
Resources keyboard_arrow_down ),
keyboard_arrow_down TweenSequenceItem(
Reference tween: ColorTween(begin: Colors.yellow, end: Colors.green),
weight: 1,
Who is Dash? ),
Widget index ]);
API reference
_colorAnimation = _controller.drive(colorTween);
flutter CLI reference _curveAnimation = _controller.drive(CurveTween(curve: Curves.easeIn));
Package site }
@override
void didUpdateWidget(oldWidget) {
super.didUpdateWidget(oldWidget);
_controller.animateTo(widget.value);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) => LinearProgressIndicator(
value: _curveAnimation.value,
valueColor: _colorAnimation,
backgroundColor: _colorAnimation.value?.withOpacity(0.4),
),
);
}
}
The didUpdateWidget function updates

the AnimatedProgressIndicatorState whenever
AnimatedProgressIndicator
changes.
2. Use the new AnimatedProgressIndicator.
Then, replace the LinearProgressIndicator in the Form

with this new AnimatedProgressIndicator:
...
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
keyboard_arrow_down AnimatedProgressIndicator(value: _formProgress), // NEW
Get started Text('Sign up', style: Theme.of(context).textTheme.headline4),
Padding(
1. Install
...
2. Set up an editor
3. Test drive This widget uses an AnimatedBuilder to animate the

progress indicator to the latest value.
3. Run the app.
5. Learn more
Type anything into the three fields to verify that
the animation works, and that clicking the
Sign up button brings up the
Welcome screen.
Flutter for iOS devs Complete sample

Flutter for web devs Dart Tests Install SDK Hint Format Reset Run
Flutter for Xamarin.Forms devs UI Output
Building a web app

keyboard_arrow_down
Development
User interface
Data & backend
Packages & plugins
Tools & features
Migration notes

Resources keyboard_arrow_down Observations
keyboard_arrow_down
Reference You can use an AnimationController to run any animation.
AnimatedBuilder rebuilds the widget tree when the value
of an Animation changes.
Who is Dash?
Using a Tween, you can interpolate between almost any value,
in this case, Color.
Widget index
API reference
Package site
What next?
Congratulations!
You have created your first web app using Flutter!
If you’d like to continue playing with this example,

perhaps you could add form validation.
For advice on how to do this,
see the
Building a form with validation
recipe in the Flutter cookbook.
For more information on Flutter web apps,

Dart DevTools, or Flutter animations, see the following:
Animation docs
Dart DevTools
Implicit animations codelab
Web samples
flutter-dev@ •
terms •
brand usage •
security •
privacy •
español •
社区中文资源 • 한국어 •
We stand in solidarity with the Black community. Black Lives Matter.
Except as otherwise noted,
this work is licensed under a
Creative
Commons Attribution 4.0 International License,
and code samples are licensed under the BSD License.

GL Utter

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GL Utter

Uploaded by

Copyright:

Available Formats

21/09/2021 16:49 Flutter | Write your first Flutter app on the web

3. Test drive Contents

Flutter for iOS devs Complete sample

Flutter for web devs

Flutter for Xamarin.Forms devs Tip:

Building a web app

Data & backend

Accessibility & internationalization

Packages & plugins

Add Flutter to existing app

Tools & features

Testing & debugging keyboard_arrow_down What you’ll build

What you'll use

For a web-only codelab,

While developing, run your web app in Chrome

Step 0: Get the starter web app

1. Enable web development.

At the command line, perform the following commands to

keyboard_arrow_down $ flutter channel beta

4. Write your first app 2. Run flutter doctor.

3. List the devices.

Samples & tutorials keyboard_arrow_down To ensure that web is installed,

User interface 2 connected devices:

Packages & plugins The Chrome device automatically starts Chrome.

Migration notes 4. The starting app is displayed in the following DartPad.

Testing & debugging keyboard_arrow_down

flutter CLI reference

5. Run the example.

Click the Run button to run the example.

6. Copy the code.

Click the clipboard icon in the upper right of the

7. Create a new Flutter project.

From your IDE, editor, or at the command line,

8. Replace the contents of lib/main.dart

arrow_drop_downFrom another platform?

Flutter for React Native devs

Dart language overview

Data & backend class WelcomeScreen extends StatelessWidget {

keyboard_arrow_down Change the onPressed property to call the (non-existent)

flutter CLI reference

4. Add the /welcome route.

Create the connection to show the new screen.

'/welcome': (context) => WelcomeScreen(),

5. Run the app.

The Sign up button should now be enabled.

Flutter has only one Navigator object.

1. Install Step 2: Enable sign in progress tracking

3. Test drive This sign in screen has three fields.

Flutter for iOS devs

Flutter for web devs

User interface progress += 1 / controllers.length;

Platform integration setState(() {

In the build() method of the _SignUpFormState class,

Widget index 3. Update the onPressed property (again).

In step 1, you modified the onPressed property for the

4. Run the app.

The Sign up button is initially disabled,

Calling a widget’s setState() method tells Flutter that the

arrow_drop_downFrom another platform? onPressed: _formProgress == 1 ? _showWelcomeScreen : null,

Flutter for Xamarin.Forms devs

Step 2.5: Launch Dart DevTools

Dart language overview