DOCSEARCHbyAlgolia
Submit Docs

Flutter Samples

repository·main·Indexed 12 days ago

https://github.com/flutter/samples

A collection of open-source Flutter samples illustrating best practices, feature implementations, and platform integration patterns, with a focus on 'Add-to-App' workflows for Android and iOS.

Tokens
43.4K
Snippets
135
Records
212
Agent score
97%

What's inside Flutter Samples

  1. Overview of the iOS App Clip sample

    main
    This sample project demonstrates how to integrate iOS App Clips with Flutter. The App Clip target is rendered using the Flutter engine and utilizes a plugin to handle App Clip-specific functionality. It is intended as a canonical example for developers following the official Flutter guide for App Clip integration.

  2. Overview of the Flutter Dynamic Theme Sample

    main
    The Flutter Dynamic Theme Sample is a developer demonstration project that shows how to bridge natural language processing with local device settings. It demonstrates how to use the Gemini API to interpret user intent via a chat session and subsequently trigger specific on-device Flutter API calls to modify theme properties like font scale and colors dynamically while the app is running.

  4. Overview of Photo Search app dependencies

    main

    The Photo Search app is a desktop application (Windows, macOS, Linux) that uses several specific plugins and libraries:

    Desktop Plugins

    • fluent_ui: Provides the Fluent UI widget set.
    • file_chooser: Enables users to select local destinations to save photos.
    • menubar: Exposes Image Search functionality through the system menu bar.
    • url_launcher: Used to open external links.

    API Implementation

    The Unsplash API client is implemented via the Unsplash class (located in lib/src/unsplash/unsplash.dart) and relies on the following for JSON REST API access:

    • http
    • built_value
    • built_collection

  5. Explore Material 3 features in the Material 3 Demo app

    main

    The Material 3 Demo app is a sample project designed to showcase the implementation of Material 3 features within the Flutter Material library. It demonstrates updated components, typography, the color system, and elevation support.

    Key capabilities demonstrated include:

    • Theme Switching: Toggling between light and dark themes.
    • Material Version Switching: Switching between Material 2 and Material 3 component styles.
    • Dynamic Color Generation: Using a single 'color seed' to generate entire light and dark color schemes.
    • Adaptive Layouts: Automatically switching between a NavigationBar (for narrow screens like mobile) and a NavigationRail (for wide screens like desktop or web).
    • New Components: Implementation of IconButtons, Chips, TextFields, Switches, Checkboxes, Radio buttons, and ProgressIndicators using M3 specifications.

  6. Embed Flutter with plugins into existing Android or iOS apps

    main
    The plugin sample demonstrates how to embed a full-screen Flutter instance that utilizes native plugins into an existing native Android or iOS application. Unlike standard Flutter samples, these projects include the specific native code (Kotlin for Android, Swift for iOS) required to initialize plugins during the Flutter engine creation process. This is useful for developers learning the additional steps required to support a Flutter module that relies on platform-specific plugins.

  7. Embed Flutter in web apps without iframes

    main

    The web_embedding directory provides examples of embedding Flutter into existing web applications using techniques that do not rely on iframes. This allows Flutter to be launched within a specific host element of a web page.

    Available examples include:

    • element_embedding_demo: The most basic implementation. It demonstrates modifying the index.html of a Flutter app so that it launches within a custom hostElement.
    • ng-flutter: An implementation using the Angular framework. It provides an Angular component that replicates the element embedding pattern.

    For specific instructions on how to run these examples and detailed implementation notes, refer to the README.md file located within each specific example directory.

  8. Use the flutter_module_using_plugin sample

    main

    The flutter_module_using_plugin is a specialized Flutter module designed for 'Add-to-App' scenarios. It demonstrates how a Flutter module can interact with native platform code via a plugin. This sample is intended to be integrated into existing native Android or iOS applications rather than being run as a standalone Flutter app.

    To understand how to integrate this module into a native host application, refer to the parent directory's README or the official Flutter documentation.

  9. Browse the Flutter samples index

    main

    The repository is organized into several categories of samples:

    Quickstarts

    Focus on specific features like:

    • asset_transformation: Image color scales and formats.
    • background_isolate_channels: Long-lived isolates.
    • navigation_and_routing: Using the go_router API.
    • simple_shader: Using the FragmentShader API with Signed Distance Functions.
    • web_embedding: Embedding Flutter in web apps (e.g., element_embedding_demo, ng-flutter).

    Native Platform Samples

    Focus on integrating Flutter with existing native code:

    • add-to-app: Embedding Flutter views into iOS or Android (e.g., fullscreen, prebuilt_module, books using Pigeon).
    • platform_channels: Using MethodChannel, EventChannel, BasicMessageChannel, and MessageCodec.
    • platform_view_swift: Combining native iOS UIViewController with Flutter.

    Demo Galleries & Apps

    • Galleries: Visual showcases like animations and material_3_demo.
    • Apps: Full applications like compass_app (implementing MVVM architecture).

  10. Combine native iOS UIViewController with Flutter views

    main

    The platform_view_swift sample demonstrates how to integrate a native iOS UIViewController with a full-screen Flutter view. This is achieved by using a platform channel to communicate between the Flutter layer and the native Swift layer.

    Implementation Details

    • Flutter Layer (lib/main.dart): Contains the Flutter application logic and interacts with the native side via platform channels.
    • Native iOS Layer (ios/Runner/PlatformViewController.swift and AppDelegate.swift): Contains the Swift code responsible for:
      1. Setting up a platform channel.
      2. Launching a native UIViewController.
      3. Returning control back to the Flutter application once the native view interaction is finished.

  11. Use the android_fullscreen sample in Flutter add-to-app

    main

    The android_fullscreen sample is an Android application designed to demonstrate how to integrate Flutter modules into an existing native Android application. This specific sample focuses on implementing a fullscreen experience within the native Android host.

    To understand the general patterns for integrating Flutter into native applications, refer to the main add_to_app directory in this repository or follow the official Flutter documentation.