Wczytuję…
Nie znaleziono wyników.

    Google Cloud Skills Boost

    Google Cloud Next 2022 Hands-On Labs navigate_next Getting started with Flutter Development
    Sprawdź swoją wiedzę i podziel się nią ze społecznością.
    done
    Zyskaj dostęp do ponad 700 praktycznych modułów oraz odznak umiejętności i szkoleń

    Getting started with Flutter Development

    Moduł 1 godz. universal_currency_alt 1 punkt show_chart Wprowadzające
    info Ten moduł może zawierać narzędzia AI, które ułatwią Ci naukę.
    Sprawdź swoją wiedzę i podziel się nią ze społecznością.
    done
    Zyskaj dostęp do ponad 700 praktycznych modułów oraz odznak umiejętności i szkoleń

    GSP885

    Google Cloud self-paced labs logo

    Overview

    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.

    A mobile, with the Welcome to Flutter app open and displaying the text 'Hello World'.

    What you'll learn

    • How to write a Flutter app that looks natural on iOS, Android, and the web
    • Basic structure of a Flutter app
    • Finding and using packages to extend functionality
    • Using hot reload for a quicker development cycle

    Prerequisites

    Based on the content, it is recommended to have some familiarity with:

    • Flutter
    • Dart

    Setup

    Before you click the Start Lab button

    Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources are made available to you.

    This hands-on lab lets you do the lab activities in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials you use to sign in and access Google Cloud for the duration of the lab.

    To complete this lab, you need:

    • Access to a standard internet browser (Chrome browser recommended).
    Note: Use an Incognito (recommended) or private browser window to run this lab. This prevents conflicts between your personal account and the student account, which may cause extra charges incurred to your personal account.
    • Time to complete the lab—remember, once you start, you cannot pause a lab.
    Note: Use only the student account for this lab. If you use a different Google Cloud account, you may incur charges to that account.

    Task 1. Open the Code Server editor

    In this lab, we will use a custom editor that includes the Flutter and Dart extensions. From the initial Qwiklabs panel:

    The Qwiklabs panel, wherein the IDE and Live Server links are listed, along with the Copy icons.

    1. Copy the IDE value displayed.
    2. Paste the IDE value into the a new browser window.

    Note:

    Code Server Editor:
    • Based on VS Code
    • Supports Extensions

    Task 2. Flutter extensions

    Flutter extensions have been installed within the editor.

    • In the editor select the extensions icon:

      The Extensions panel, which includes a warning message and a list of installed extensions.

    Note:

    • Flutter extension provides support for developing with the Flutter Framework
    • Dart language extension will automatically be installed as part of the Flutter extension

    Task 3. Create a Flutter template

    Note: The Flutter Framework enables the creation of multi-platform applications e.g. Android, iOS, Windows and Web.

    In this section create a Flutter Web application called startup_namer.

    1. Click the navigation menu button (i.e. left hand side, three horizontal lines).
    2. Open a Terminal within the browser by selecting New Terminal:

    The navigation path to the option New Terminal.

    1. In the terminal enter the following command:
    flutter create startup_namer Note:

    Flutter Create:
    • Generates a sample application based on a template.
    • Provides support for different platforms (e.g. Android, iOS and Web)
    • Hierarchy includes all the files required for a basic Flutter application
    1. Move to the startup namer directory:
    cd startup_namer
    1. Close the terminal window:
    exit

    The startup_namer directory and template code have now been created.

    Task 4. Exploring the Flutter code

    In this section edit the Flutter Web application. Use the editor to open the startup_namer directory created in the previous step.

    Note: The editor will make helpful suggestions in relation to the extensions selected. These suggestions should be accepted.

    1. From the main panel select the Explorer Icon: The Explorer panel, which includes the Open Folder and Clone Repository buttons.

    2. Select the Open Folder option.

    3. Open the startup_namer folder:

    /home/ide-dev/startup_namer/
    1. The editor view will change to the Folder view.

    The Explorer panel, which now displays the STARTUP_NAMER folder and lists its contents.

    1. Explore the template code, especially the lib/main.dart and pubspec.yaml files.

    At this point it is worth pointing out some information about the editor:

    Note:

    Code Server:
    • Generates a sample application based on a template.
    • Provides support for different platforms (e.g. Android, iOS and Web)
    • Hierarchy includes all the files required for a basic Flutter application
    • The lab focuses on building a Web application

    Task 5. Running the Flutter Web application

    In this section run the Flutter Web application from the command line.

    1. In the editor, open a terminal.
    2. Ensure the directory is set to startup_namer.
    Note:

    Flutter Web:
    • Uses a web server
    • Application will be run in the browser
    • Application will bind to the machine IP/PORT
    1. Run the Flutter web server:
    fwr
    1. The running web server should look similar to below:

    The running web server, which includes its status and requirements for debugging.

    1. Copy the Live Server from the Qwiklabs panel.

    2. Paste the address into a new browser tab.

    3. The browser will render the web application:

    A mobile with the Flutter Demo Home Page displayed.

    Feel free to interact with the running application.

    Task 6. Flutter Hot reload

    Flutter supports Hot reload which means changes can be made to the application dynamically.

    Note:

    Hot Reload:

    In this section we use the Hot reload function to change the Title.

    1. In the editor, amend the file lib/main.dart.
    2. Look for class MyApp and find the Title field Flutter Demo Home Page.

    The lib/main.dart code, which includes the homepage title in the class MyApp.

    1. Amend the HomePage title value on line 34 to the following:
    Flutter is awesome!

    1. Save the editor changes made i.e. CTRL+S.

    2. The lib/main.dart code should now look similar to below:

    The updated lib/main.dart code, which includes 'Flutter is awesome' as the title.

    1. Click in the open Terminal window, and press r:

    The hot restart confirmation message.

    1. Switch to the Live Server browser tab.

    2. Press CTRL+R to reload the page.

    Awesome work getting started with Flutter.

    Click Check my progress to verify the objective. Assess my progress

    Congratulations!

    You have successfully completed the lab and demonstrated your knowledge of Flutter. Over the course of this lab, you have performed the following tasks:

    • Installed the Flutter + Dart extensions
    • Developed a simple Flutter web application
    • Learned to use hot reload feature
    • Tested code updates in the web device

    Next steps / Learn more

    Google Cloud training and certification

    ...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

    Manual last updated October 30, 2024

    Lab last tested October 30, 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.

    Before you begin

    1. Labs create a Google Cloud project and resources for a fixed time
    2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
    3. On the top left of your screen, click Start lab to begin

    Use private browsing

    1. Copy the provided Username and Password for the lab
    2. Click Open console in private mode

    Sign in to the Console

    1. Sign in using your lab credentials. Using other credentials might cause errors or incur charges.
    2. Accept the terms, and skip the recovery resource page
    3. Don't click End lab unless you've finished the lab or want to restart it, as it will clear your work and remove the project

    Ta treść jest obecnie niedostępna

    Kiedy dostępność się zmieni, wyślemy Ci e-maila z powiadomieniem

    Świetnie

    Kiedy dostępność się zmieni, skontaktujemy się z Tobą e-mailem

    One lab at a time

    Confirm to end all existing labs and start this one

    Use private browsing to run the lab

    Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.