• Stars
    star
    309
  • Rank 132,188 (Top 3 %)
  • Language
    Dart
  • License
    BSD 3-Clause "New...
  • Created over 2 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Flutter add-to-app demo you can try with your own apps

Put Flutter to Work 🏠

Hello!

This project is a demo intended to help people test drive Flutter by integrating it into their existing applications.

Included in this repo is a Flutter add-to-app module, which contains the UI and logic for displaying a popup to capture user feedback (a "net promoter score"). Alongside the module are three newsfeed applications for iOS, Android, and web, built with SwiftUI, Kotlin, and Angular, respectively.

The applications demonstrate how to import a Flutter module and display it using native platform code. If you're looking to learn, for example, how to wire up a UI element in Swift to navigate to content displayed with Flutter, the iOS newsfeed app can show you.

If you'd like to try Flutter in your own applications, you can download a prebuilt copy of the Flutter module for Android, iOS, or web from this repo, and follow the instructions below to integrate it into your own apps. Note that you don't need the Flutter SDK installed on your development machine for these to work!

Downloading and using the pre-compiled Flutter module

iOS

Full instructions for adding a module to an existing iOS app are available in the add-to-app documentation at flutter.dev, but you can find the short version for both Swift and Objective-C below.

Link the Flutter module into your application

  • Download a recent framework build of the Flutter module from this repo.

  • Unzip the archive into the root of your project directory. It will create a directory there called flutter-framework containing the compiled Flutter module.

  • Open the flutter-framework/Release directory and drag App.xcframework and Flutter.xcframework to the General > Frameworks, Libraries, and Embedded Content section of your app target in Xcode.

Update your app's code to show Flutter

Once the Flutter module is linked into your application, you're ready to fire up an instance of the Flutter engine and present the Flutter view controller.

Swift

In AppDelegate.swift, add the following three lines marked as "NEW":

import UIKit
import Flutter // NEW!

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
  lazy var flutterEngine = FlutterEngine(name: "my flutter engine")  // NEW!

  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    flutterEngine.run();  // NEW!
    return super.application(application, didFinishLaunchingWithOptions: launchOptions);
  }
}

Then, in a ViewController class somewhere in your app, call these three lines of code to present the Flutter module's UI:

let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterViewController =
    FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
present(flutterViewController, animated: true, completion: nil)

For a demo, it's usually best to call these in response to a UI event like a button press. Once they're executed, the net promoter score UI will appear in your app!

Objective-C

In AppDelegate.h, add this import:

@import Flutter;

and this property to the AppDelegate interface:

@property (nonatomic,strong) FlutterEngine *flutterEngine;

Next, in AppDelegate.m, add these two lines to didFinishLaunchingWithOptions:

  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
  [self.flutterEngine run];

Then, somewhere in a UIViewController class in your app, @import Flutter and call these lines of code:

FlutterEngine *flutterEngine =
    ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
FlutterViewController *flutterViewController =
    [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:YES completion:nil];

For a demo, it's usually best to call these in response to a UI event like a button press. Once they're executed, the net promoter score UI will appear in your app!

Android

Full instructions for adding a module to an existing Android app are available in the add-to-app documentation at flutter.dev, but you can find the short version for both Kotlin and Java below.

Import the Flutter module into your app's codebase

First, download a recent aar build of the Flutter module from this repo. Then, create a directory in the root of your project called flutter and unzip the archive into that directory.

Next, add the following entries to the repositories and dependencies sections to your app/build.gradle file:

repositories {
  // Add these two maven entries.
  maven {
    url '../flutter'
  }
  maven {
    url 'https://storage.googleapis.com/download.flutter.io'
  }
}

dependencies {
  // Add these three entries.
  debugImplementation 'com.example.flutter_module:flutter_debug:1.0'
  profileImplementation 'com.example.flutter_module:flutter_profile:1.0'
  releaseImplementation 'com.example.flutter_module:flutter_release:1.0'
}

Update your app's code to show Flutter

Once the Flutter module is linked into your application, fire up an instance of the Flutter engine and present the Flutter Activity.

Kotlin

In your app's Application class, add a property for a Flutter engine:

lateinit var flutterEngine : FlutterEngine

In onCreate, instantiate and cache a running Flutter engine with this code:

// Instantiate a FlutterEngine.
flutterEngine = FlutterEngine(this)

// Start executing Dart code to pre-warm the FlutterEngine.
flutterEngine.dartExecutor.executeDartEntrypoint(
  DartExecutor.DartEntrypoint.createDefault()
)

// Cache the FlutterEngine to be used by FlutterActivity.
FlutterEngineCache
  .getInstance()
  .put("my_engine_id", flutterEngine)

Then, in an Activity class somewhere in your app, call these four lines of code to launch the Flutter module's UI:

startActivity(
  FlutterActivity
    .withCachedEngine("my_engine_id")
    .build(this)
)

For a demo, it's usually best to call these in response to a UI event like a button press. Once they're executed, the net promoter score UI will appear in your app!

Java

In your app's Application class, add a property for a Flutter engine:

public FlutterEngine flutterEngine;

In onCreate, instantiate and cache a running Flutter engine with this code:

// Instantiate a FlutterEngine.
flutterEngine = new FlutterEngine(this);

// Start executing Dart code to pre-warm the FlutterEngine.
flutterEngine.getDartExecutor().executeDartEntrypoint(
  DartEntrypoint.createDefault()
);

// Cache the FlutterEngine to be used by FlutterActivity.
FlutterEngineCache
    .getInstance()
    .put("my_engine_id", flutterEngine);

Then, in an Activity class somewhere in your app, call these four lines of code to launch the Flutter module's UI:

startActivity(
  FlutterActivity
    .withCachedEngine("my_engine_id")
    .build(currentActivity)
  );

For a demo, it's usually best to call these in response to a UI event like a button press. Once they're executed, the net promoter score UI will appear in your app!

Web

There are nearly as many ways to build a website as there are published websites, so to a certain extent the "right" way to integrate the Flutter module into your site will depend on the particular client-side technologies you're using (Angular, React, Vue, etc.) and the server you're using to host your content (Firebase Hosting, nginx, etc.).

It's not possible to cover all of the possibilities here, but the basic approach is roughly the same for any of them:

  • Download a recent web build of the Flutter module from this repo.

  • Unzip the archive into a folder somewhere within your project's source tree where it will be picked up and served by the server technology you're using (in the "public" folder of a Firebase Hosting project, for example).

  • Add an iframe to one of the pages in your site, and set its src URL to point to the index.html file inside the web-project-flutter folder created when unzipping the archive in the previous step.

  • Add client-side code to the same page to display the iframe in response to a convenient UI event, such as a button press.

Angular

The sample web application in this repo is built with Angular, and can serve as a model for web integrations. If you're also running Angular, follow the steps below to integrate the model into your project.

First, download a recent web build of the Flutter module and unzip it into the src directory of your project.

Next, change <base href="/"> to <base href="./"> in src/web-project-flutter/index.html.

Then update angular.json to include the new files:

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/web-project-flutter"
],

Add an iframe

<iframe src="./web-project-flutter/index.html"> </iframe>

Move to your Angular project directory and run:

npm install or npm install --legacy-peed-deps depending on your npm dependencies.

Finally, run ng serve to start the application.

More Repositories

1

flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
Dart
157,868
star
2

plugins

Plugins for Flutter maintained by the Flutter team
Dart
17,165
star
3

samples

A collection of Flutter examples and demos
Dart
15,939
star
4

engine

The Flutter engine
C++
6,852
star
5

gallery

Flutter Gallery is a resource to help developers evaluate and use Flutter
Dart
5,866
star
6

packages

A collection of useful packages maintained by the Flutter team
Dart
3,600
star
7

website

Flutter documentation web site
Dart
2,573
star
8

pinball

Google I/O 2022 Pinball game built with Flutter and Firebase
Dart
2,097
star
9

flutter-intellij

Flutter Plugin for IntelliJ
Java
1,906
star
10

codelabs

Flutter codelab examples
C
1,568
star
11

devtools

Performance tools for Flutter
Dart
1,466
star
12

news_toolkit

A news template application built in Flutter, by Google and Very Good Ventures. Learn more at: https://flutter.github.io/news_toolkit
Dart
1,016
star
13

photobooth

Google I/O 2021 Photo Booth built with Flutter and Firebase
Dart
894
star
14

io_flip

Google I/O 2023 FLIP AI-designed card game built with Flutter & Firebase
Dart
597
star
15

flutter_clock

Dart
542
star
16

holobooth

Jump into a new reality to bring Dash and Sparky to life!
Dart
230
star
17

tests

Contributed tests for Flutter
Dart
219
star
18

uxr

UXR work for Flutter
Dart
214
star
19

cocoon

Flutter's build coordinator and aggregator
Dart
182
star
20

impeller

Affects Flow
155
star
21

buildroot

Build environment for the Flutter engine
Python
120
star
22

assets-for-api-docs

Static assets for embedding into docs.flutter.io
Dart
113
star
23

tools_metadata

Metadata files about the flutter framework
Dart
66
star
24

web_installers

Web install scripts for CI for Flutter Web
Dart
42
star
25

goldens

Shell
41
star
26

platform_tests

Tools & tests to verify Flutter's fidelity on specific platforms
Dart
37
star
27

games

Home of the Flutter Casual Games Toolkit and other Flutter gaming templates
Dart
27
star
28

.github

Default community health files for Flutter
26
star
29

flutter-github-scripts.dart

Scripts to facilitate generating reports on the health of the Flutter repositories.
Dart
19
star
30

flutter.github.io

Root of flutter.github.io
HTML
13
star