
Before you begin
- Labs create a Google Cloud project and resources for a fixed time
- Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
- On the top left of your screen, click Start lab to begin
Lab Completion
/ 10
Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
In this lab, you will create a Flutter app using generated template code. The basic Flutter interface provides a simple example to get started programming in Flutter.
Based on the content, it is recommended to have some familiarity with:
In this lab, you will use a custom editor that includes the Flutter and Dart extensions. From the initial lab panel:
In this section, create a Flutter Web application called first_app.
Click the hamburger button in the top left () and then click Terminal > New Terminal.
In the terminal, enter the following command:
The first_app
directory and template code have now been created.
In this section, explore the Flutter Web application called first_app.
first_app
.At this point, you will have the Flutter application open in the current workspace.
In this section, run the Flutter Web application from the command line.
first_app
.Copy the Flutter Live Server address from the lab Panel.
Paste the address into a new browser tab.
The browser will render the web application e.g.
Feel free to interact with the running application.
In this section, use widgets to build a basic two screen application.
From the above sketch, we note that our application uses the following types of widgets.
Widget | Description |
---|---|
AppBar | Header bar |
Scaffold | Screen layout |
Text | Text entry fields |
ListView | Item list |
In this section to build a basic item list, the Flutter page will look similar to the image below:
In the image, there is a list of months presented. A ListView widget is capable of listing items.
To learn more, refer to Lists in the Flutter documentation. In the exercise below, create a basic short list.
main.dart
with the code below:Save the updated code.
Click in the open Terminal window, and press ‘r'.
Switch to the Flutter Device
browser tab.
Press CTRL+R
to reload the page.
The code in the above example creates a basic list. Similar to our application sketch, this presents data as outlined in our design.
In this section, add user interaction to respond when a list item is selected.
Previously, we have looked at using a small amount of data being added to a ListView. Working with larger volumes of data can be challenging. To help with this situation, consider the ListView.builder.
In this exercise below, create a long list using a ListView.builder.
MyApp
class with the code below:Click in the open Terminal window, and press ‘r'.
Switch to the Flutter Device
browser tab.
Press CTRL+R
to reload the page.
The code in this example creates a long list using the ListView.builder. The page rendered is exactly the same as before. However, this is a better approach to handling larger data sources.
In this section, add user interaction to respond when a list item is selected. Add interactivity in Flutter typically requires a Gesture Detector. The type of gesture to capture is called a Tap.
Additionally, add a SnackBar to the code so there is a visual notification when a user taps on a list item.
In this exercise, the MyApp
class with the following code:
MyApp
with the following code:The implementation of the SnackBar is temporary to provide feedback that our onTap is working correctly.
Click in the open Terminal window, and press ‘r'.
Switch to the Flutter Device
browser tab.
Press CTRL+R
to reload the page.
In this section, create a second Flutter page and display some more information.
As the second page is very similar to the first page, this can help us construct the code.
main.dart
file:At this point, the Details Page
is not connected to the first page.
You'll correct that in the next section.
In this section, enable navigation between the first page and the second:
Previously, we enabled a SnackBar to indicate that an onTap event had occurred. To achieve navigation will require the following activities:
MyDetails
classMyApp
:Click in the open Terminal window, and press ‘r'.
Switch to the Flutter Device
browser tab.
Press CTRL+R
to reload the page.
Now, the application will be able to move between the Main page and the Details page. However, the details page always says January. You'll fix that in the next section.
In this section, learn how to pass information between pages.
In the code below, use MaterialPageRoute to communicate with your new page. To pass information to the Details page, we use the list item string as a parameter.
MyApp
to call MyDetails
with a parameter:Now that MyApp
expects to pass data to the MyDetails
class.
Make the following updates to accept a parameter using a Constructor.
To make the changes, follow the steps below:
MyDetails
to accept a parameter:Click in the open Terminal window, and press ‘r'.
Switch to the Flutter Device
browser tab.
Press CTRL+R
to reload the page:
month
and display it to the user.
Click Check my progress to verify the objective.
You have successfully completed the lab and demonstrated your knowledge of Flutter. Over the course of this lab, you have performed the following tasks:
Manual Last Updated November 15, 2024
Lab Last Tested November 15, 2024
Copyright 2025 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.
This content is not currently available
We will notify you via email when it becomes available
Great!
We will contact you via email if it becomes available
One lab at a time
Confirm to end all existing labs and start this one