Flutter Codelabs

repository·main·Indexed 24 days ago

https://github.com/flutter/codelabs

A collection of source code implementations for various Flutter Codelabs. It provides hands-on examples for learning Flutter, Dart, and integrations such as Firebase, Google Maps, TensorFlow, and In-App Purchases.

Tokens
53.2K
Snippets
153
Records
216
Agent score
79%

What's inside flutter-codelabs

  1. Explore Flutter Codelabs

    main

    This repository contains the source code for various Flutter Codelabs. Each codelab is organized into its own directory. You can find the corresponding interactive guides on the Google Codelabs website.

    Available codelabs include:

    • Firebase & Authentication:
      • firebase-auth-flutterfire-ui: Add a user authentication flow using FirebaseUI.
      • firebase-get-to-know-flutter: Get to know Firebase for Flutter.
    • Google Services & Integration:
      • google-maps-in-flutter: Adding Google Maps to a Flutter app.
      • webview_flutter: Adding WebView to your Flutter app.
      • in_app_purchases: Adding in-app purchases.
    • Machine Learning & AI:
      • tfagents-flutter: Building a board game with TensorFlow Agents.
      • tfrs-flutter: Building a full-stack movie recommendation system.
      • haiku_generator: Creating haikus with the PaLM API.
      • tfserving-flutter: Text classification in Flutter apps.
    • UI, Animation & Layout:
      • animations: Advanced animations in Flutter.
      • animated-responsive-layout: Animated responsive app layout with Material 3.
      • brick_breaker: Introduction to Flame (game engine) with Flutter.
    • Language & Fundamentals:
      • namer: Your first Flutter app.
      • dart-patterns-and-records: Dive into Dart's patterns and records.
      • homescreen_codelab: Adding a Home Screen widget.
      • generate_crossword: Build a word puzzle.

    To run these projects, ensure you have Flutter installed by following the instructions at docs.flutter.dev/get-started.

  2. Project Structure of the Firebase Flutter Starter App

    main

    The starter app's functionality is organized into the following files:

    • lib/main.dart: The main entry point and the root app widget.
    • lib/home_page.dart: Contains the HomePage widget.
    • lib/src/widgets.dart: Contains helper widgets (Header, Paragraph, and IconAndDetail) used to standardize the app's style and reduce code duplication.
    • lib/src/authentication.dart: Contains a partial implementation of Firebase Authentication with widgets for email-based login (not yet used in the starter app).
  3. Codelab Maintenance and Deprecation Policy

    main

    Codelabs in this repository are maintained to stay compatible with the current Flutter stable release.

    Deprecation Criteria: Codelabs that fall more than two stable releases behind the current Flutter stable version are candidates for deprecation and removal from the repository.

  4. System Prompt for the Colorist Assistant

    main

    The Colorist system prompt defines the persona and operational constraints for an AI color expert assistant integrated into the Colorist desktop application. The assistant's primary goal is to interpret natural language color descriptions and translate them into specific RGB values.

    Core Responsibilities

    1. Analyze natural language descriptions to understand the intended color.
    2. Determine appropriate RGB values where each component (red, green, blue) is a float between 0.0 and 1.0.
    3. Respond with a conversational explanation and the explicit RGB values.

    Response Format

    To ensure the output is easily parsable by the application, the assistant must always include the RGB values using the following exact format: RGB: (red=X.X, green=X.X, blue=X.X)

    Handling Ambiguity

    If a user's color description is ambiguous or unclear, the assistant should ask clarifying questions one at a time to refine the interpretation.

    RGB: (red=1.0, green=0.5, blue=0.25)
  5. Use Firebase Security Rules for data validation and access control

    main

    Firebase Security Rules use a flexible syntax to match operations against documents.

    Access Control via Authentication

    • request.auth.uid: The unique identifier of the currently authenticated user.
    • request.resource.data: The data being sent in the write request.

    Common Rule Patterns

    Restrict read to authenticated users:

    allow read: if request.auth.uid != null;

    Restrict write to the document owner: (Assumes the document contains a userId field matching the user's UID)

    allow write: if request.auth.uid == request.resource.data.userId;

    Enforce schema validation: Ensure required fields exist in the document during a write:

    allow write: if request.auth.uid == request.resource.data.userId
        && "name" in request.resource.data
        && "text" in request.resource.data
        && "timestamp" in request.resource.data;
  6. Configure Firebase apps using FlutterFire CLI

    main

    The flutterfire configure command extracts information from your Firebase project and generates the necessary configuration files for your selected platforms (Android, iOS, macOS, web).

    Running this command performs the following:

    1. Prompts you to select a Firebase project (from .firebaserc or the Firebase Console).
    2. Asks you to determine which platforms to configure.
    3. Identifies the Firebase apps to extract configuration from.
    4. Generates a firebase_options.dart file in your project root.

    Note: If you switch between different Flutter projects, you must re-run flutterfire configure in each project.

    $ flutterfire configure
  7. Customize iOS launch screen assets via Xcode

    main

    For a more integrated workflow, you can manage launch assets using Xcode:

    1. Open your Flutter project's iOS workspace by running:
      open ios/Runner.xcworkspace
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images into the asset catalog to replace the existing launch images.
    open ios/Runner.xcworkspace
  8. Enable Email/Password authentication in Firebase

    main

    To allow users to sign in via email, enable the Email/Password provider in the Firebase console:

    1. In the Firebase console, expand the Build menu in the Project overview pane.
    2. Select Authentication.
    3. Click Get Started.
    4. Navigate to the Sign-in method tab.
    5. Select Email/Password.
    6. Set it to Enable and click Save.
  9. Get the Firebase for Flutter sample code

    main

    The codelab code is hosted in the flutter/codelabs repository. Each step of the codelab is stored in a specific directory within the firebase-get-to-know-flutter folder.

    1. Clone the repository:
    git clone https://github.com/flutter/codelabs.git flutter-codelabs
    1. Navigate to the specific step you are working on (e.g., step 2):
    cd flutter-codelabs/firebase-get-to-know-flutter/step_02
    1. Open the directory for that step in your IDE to use it as the starter code.
    git clone https://github.com/flutter/codelabs.git flutter-codelabs
    cd flutter-codelabs/firebase-get-to-know-flutter/step_02
  10. Access code steps for the Google Maps in Flutter codelab

    main

    The google_maps_in_flutter repository contains incremental code snapshots corresponding to specific stages of the Google Maps in Flutter codelab.

    Use the following directories to find the code state at different milestones:

    • step_3: Code as it exists at the end of the Getting Started section.
    • step_4: Code as it exists at the end of the Adding Google Maps to the app section.
    • step_5: Code as it exists at the end of the Put Google on the Map section.