{"id":13684339,"url":"https://github.com/flutter/put-flutter-to-work","last_synced_at":"2025-09-30T01:32:16.640Z","repository":{"id":38745849,"uuid":"456970215","full_name":"flutter/put-flutter-to-work","owner":"flutter","description":"A Flutter add-to-app demo you can try with your own apps","archived":true,"fork":false,"pushed_at":"2023-12-19T16:31:17.000Z","size":2865,"stargazers_count":320,"open_issues_count":4,"forks_count":38,"subscribers_count":51,"default_branch":"main","last_synced_at":"2024-09-13T17:19:31.142Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flutter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-02-08T14:37:07.000Z","updated_at":"2024-09-05T02:08:03.000Z","dependencies_parsed_at":"2023-10-11T17:37:38.305Z","dependency_job_id":"8899ed1e-3669-445f-985f-733ce78d311e","html_url":"https://github.com/flutter/put-flutter-to-work","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter%2Fput-flutter-to-work","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter%2Fput-flutter-to-work/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter%2Fput-flutter-to-work/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutter%2Fput-flutter-to-work/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flutter","download_url":"https://codeload.github.com/flutter/put-flutter-to-work/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219563296,"owners_count":16507800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T14:00:32.365Z","updated_at":"2025-09-30T01:32:16.213Z","avatar_url":"https://github.com/flutter.png","language":"Dart","readme":"# Put Flutter to Work 🏠\n\nHello!\n\nThis project is a demo intended to help people test drive Flutter by integrating\nit into their existing applications. \n\nIncluded in this repo is a Flutter add-to-app module, which contains the UI and\nlogic for displaying a popup to capture user feedback (a \"net promoter score\").\nAlongside the module are three newsfeed applications for iOS, Android, and web,\nbuilt with SwiftUI, Kotlin, and Angular, respectively.\n\n![](https://user-images.githubusercontent.com/969662/167052785-6e98e894-719a-48e7-8a3c-34098cc7b0b8.gif)\n\nThe applications demonstrate how to import a Flutter module and display it using\nnative platform code. If you're looking to learn, for example, how to wire up a\nUI element in Swift to navigate to content displayed with Flutter, the iOS\nnewsfeed app can show you.\n\nIf you'd like to try Flutter in your own applications, you can download a\nprebuilt copy of the Flutter module for Android, iOS, or web from this repo, and\nfollow the instructions below to integrate it into your own apps. Note that _you\ndon't need the Flutter SDK installed on your development machine_ for these to\nwork!\n\n## Downloading and using the pre-compiled Flutter module\n\n### iOS\n\nFull instructions for adding a module to an existing iOS app are available in\nthe add-to-app documentation at\n[flutter.dev](https://docs.flutter.dev/development/add-to-app), but you can find\nthe short version for both Swift and Objective-C below.\n\n#### Link the Flutter module into your application\n\n* Download a [recent framework build][latest-ios-url] of the Flutter\n  module from this repo.\n\n* Unzip the archive into the root of your project directory. It will\n  create a directory there called `flutter-framework` containing the compiled\n  Flutter module.\n\n* Open the `flutter-framework/Release` directory and drag `App.xcframework` and\n  `Flutter.xcframework` to the **General \u003e Frameworks, Libraries, and Embedded\n  Content** section of your app target in Xcode.\n\n#### Update your app's code to show Flutter\n\nOnce the Flutter module is linked into your application, you're ready to fire up\nan instance of the Flutter engine and present the Flutter view controller.\n\n##### Swift\n\nIn `AppDelegate.swift`, add the following three lines marked as \"NEW\":\n\n```swift\nimport UIKit\nimport Flutter // NEW!\n\n@UIApplicationMain\nclass AppDelegate: FlutterAppDelegate {\n  lazy var flutterEngine = FlutterEngine(name: \"my flutter engine\")  // NEW!\n\n  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -\u003e Bool {\n    flutterEngine.run();  // NEW!\n    return super.application(application, didFinishLaunchingWithOptions: launchOptions);\n  }\n}\n```\n\nThen, in a ViewController class somewhere in your app, call these three lines of\ncode to present the Flutter module's UI:\n\n```swift\nlet flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine\nlet flutterViewController =\n    FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)\npresent(flutterViewController, animated: true, completion: nil)\n```\n\nFor a demo, it's usually best to call these in response to a UI event like a\nbutton press. Once they're executed, the net promoter score UI will appear in\nyour app!\n\n##### Objective-C\n\nIn `AppDelegate.h`, add this import:\n\n```objectivec\n@import Flutter;\n```\n\nand this property to the AppDelegate interface:\n\n```objectivec\n@property (nonatomic,strong) FlutterEngine *flutterEngine;\n```\n\nNext, in `AppDelegate.m`, add these two lines to\n`didFinishLaunchingWithOptions`:\n\n```objectivec\n  self.flutterEngine = [[FlutterEngine alloc] initWithName:@\"my flutter engine\"];\n  [self.flutterEngine run];\n```\n\nThen, somewhere in a UIViewController class in your app, `@import Flutter` and\ncall these lines of code:\n\n```objectivec\nFlutterEngine *flutterEngine =\n    ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;\nFlutterViewController *flutterViewController =\n    [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];\n[self presentViewController:flutterViewController animated:YES completion:nil];\n```\n\nFor a demo, it's usually best to call these in response to a UI event like a\nbutton press. Once they're executed, the net promoter score UI will appear in\nyour app!\n\n### Android\n\nFull instructions for adding a module to an existing Android app are available\nin the add-to-app documentation at\n[flutter.dev](https://docs.flutter.dev/development/add-to-app), but you can find\nthe short version for both Kotlin and Java below.\n\n#### Import the Flutter module into your app's codebase\n\nFirst, download a [recent `aar` build][latest-android-url] of the Flutter module\nfrom this repo. Then, create a directory in the root of your project called\n`flutter` and unzip the archive into that directory.\n\nNext, add the following entries to the repositories and dependencies sections\nto your `app/build.gradle` file:\n\n```groovy\nrepositories {\n  // Add these two maven entries.\n  maven {\n    url '../flutter'\n  }\n  maven {\n    url 'https://storage.googleapis.com/download.flutter.io'\n  }\n}\n\ndependencies {\n  // Add these three entries.\n  debugImplementation 'com.example.flutter_module:flutter_debug:1.0'\n  profileImplementation 'com.example.flutter_module:flutter_profile:1.0'\n  releaseImplementation 'com.example.flutter_module:flutter_release:1.0'\n}\n```\n\n#### Update your app's code to show Flutter\n\nOnce the Flutter module is linked into your application, fire up an instance of\nthe Flutter engine and present the Flutter Activity.\n\n##### Kotlin\n\nIn your app's `Application` class, add a property for a Flutter engine:\n\n```kotlin\nlateinit var flutterEngine : FlutterEngine\n```\n\nIn `onCreate`, instantiate and cache a running Flutter engine with this\ncode:\n\n```kotlin\n// Instantiate a FlutterEngine.\nflutterEngine = FlutterEngine(this)\n\n// Start executing Dart code to pre-warm the FlutterEngine.\nflutterEngine.dartExecutor.executeDartEntrypoint(\n  DartExecutor.DartEntrypoint.createDefault()\n)\n\n// Cache the FlutterEngine to be used by FlutterActivity.\nFlutterEngineCache\n  .getInstance()\n  .put(\"my_engine_id\", flutterEngine)\n```\n\nThen, in an Activity class somewhere in your app, call these four lines of\ncode to launch the Flutter module's UI:\n\n```kotlin\nstartActivity(\n  FlutterActivity\n    .withCachedEngine(\"my_engine_id\")\n    .build(this)\n)\n```\n\nFor a demo, it's usually best to call these in response to a UI event like a\nbutton press. Once they're executed, the net promoter score UI will appear in\nyour app!\n\n##### Java\n\nIn your app's `Application` class, add a property for a Flutter engine:\n\n```java\npublic FlutterEngine flutterEngine;\n```\n\nIn `onCreate`, instantiate and cache a running Flutter engine with this\ncode:\n\n```java\n// Instantiate a FlutterEngine.\nflutterEngine = new FlutterEngine(this);\n\n// Start executing Dart code to pre-warm the FlutterEngine.\nflutterEngine.getDartExecutor().executeDartEntrypoint(\n  DartEntrypoint.createDefault()\n);\n\n// Cache the FlutterEngine to be used by FlutterActivity.\nFlutterEngineCache\n    .getInstance()\n    .put(\"my_engine_id\", flutterEngine);\n```\n\nThen, in an Activity class somewhere in your app, call these four lines of\ncode to launch the Flutter module's UI:\n\n```java\nstartActivity(\n  FlutterActivity\n    .withCachedEngine(\"my_engine_id\")\n    .build(currentActivity)\n  );\n```\n\nFor a demo, it's usually best to call these in response to a UI event like a\nbutton press. Once they're executed, the net promoter score UI will appear in\nyour app!\n\n### Web\n\nThere are nearly as many ways to build a website as there are published\nwebsites, so to a certain extent the \"right\" way to integrate the Flutter\nmodule into your site will depend on the particular client-side technologies\nyou're using (Angular, React, Vue, etc.) and the server you're using to host\nyour content (Firebase Hosting, nginx, etc.).\n\nIt's not possible to cover all of the possibilities here, but the basic approach\nis roughly the same for any of them:\n\n* Download a [recent web build][latest-web-url] of the Flutter module from this\n  repo.\n\n* Unzip the archive into a folder somewhere within your project's source tree\n  where it will be picked up and served by the server technology you're using\n  (in the \"public\" folder of a Firebase Hosting project, for example).\n\n* Add an iframe to one of the pages in your site, and set its src URL to point\n  to the `index.html` file inside the `web-project-flutter` folder created when\n  unzipping the archive in the previous step.\n\n* Add client-side code to the same page to display the iframe in response to a\n  convenient UI event, such as a button press.\n\n#### Angular\n\nThe sample web application in this repo is built with Angular, and can serve as\na model for web integrations. If you're also running Angular, follow the steps\nbelow to integrate the model into your project.\n\nFirst, download a [recent web build](latest-web-url) of the Flutter module and\nunzip it into the `src` directory of your project.\n\nNext, change `\u003cbase href=\"/\"\u003e` to `\u003cbase href=\"./\"\u003e` in \n`src/web-project-flutter/index.html`.\n\nThen update `angular.json` to include the new files:\n\n```json\n\"assets\": [\n    \"src/favicon.ico\",\n    \"src/assets\",\n    \"src/web-project-flutter\"\n],\n```\n\nAdd an iframe\n\n```html\n\u003ciframe src=\"./web-project-flutter/index.html\"\u003e \u003c/iframe\u003e\n```\n\nMove to your Angular project directory and run:\n\n`npm install` or `npm install --legacy-peed-deps` depending on your npm\ndependencies.\n\nFinally, run `ng serve` to start the application.\n\n[latest-android-url]: https://github.com/flutter/put-flutter-to-work/suites/6454885105/artifacts/236701340\n[latest-ios-url]: https://github.com/flutter/put-flutter-to-work/suites/6454885105/artifacts/236701341\n[latest-web-url]: https://github.com/flutter/put-flutter-to-work/suites/6454885105/artifacts/236701342\n","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter%2Fput-flutter-to-work","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflutter%2Fput-flutter-to-work","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutter%2Fput-flutter-to-work/lists"}