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.

GitHub

View Github