Introduction

App Clips on iOS and Instant Apps on Android let users access a lightweight slice of your application without full installation. Flutter’s modular architecture allows you to embed a minimal Flutter module into native App Clip targets and Android Dynamic Feature modules. In this tutorial, you will learn how to set up your Flutter project, configure native hosts, integrate Flutter modules, and test and deploy App Clips & Instant Apps.

Setting Up Your Flutter Project for App Clips & Instant Apps

First, factor out the feature you want to expose as an App Clip or Instant App into a standalone Flutter module. From your main project directory, run:

flutter create --template module my_feature_module

This generates a pubspec.yaml and lib/ directory. Add dependencies for just the widgets and plugins you need to minimize bundle size. In your host project’s settings.gradle (Android), include the module:

include ':app', ':my_feature_module'
setProjectDir(':my_feature_module', file('../my_feature_module'))

On iOS, embed the module as a subproject by dragging my_feature_module/ into Xcode’s Project navigator.

Configuring Native Platforms

On iOS, create a new App Clip target in Xcode: select your main target, click +, choose App Clip. Configure its Info.plist with an invocation URL under Associated Domains (appclips:your.app.id). In Build Settings, add the Flutter.framework and App.framework from your module’s build output.

On Android, enable Dynamic Feature Delivery. In settings.gradle, include:

include ':app', ':my_feature_module', ':instant_feature'

In your app-level build.gradle:

dynamicFeatures = [':instant_feature']

The instant_feature module’s manifest should specify dist:instant="true" and include an intent filter for your Instant App URL:

<dist:module dist:instant="true" xmlns:dist="http://schemas.android.com/apk/distribution">
  <dist:delivery>
    <dist:install-time />
  </dist:delivery>
</dist:module>

Integrating Flutter Modules into App Clips & Instant Apps

In your native entrypoint, initialize a Flutter engine and attach the feature module’s entrypoint. On iOS App Clip’s SceneDelegate.swift:

import Flutter
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
  var flutterEngine: FlutterEngine!
  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options _: UIScene.ConnectionOptions) {
    flutterEngine = FlutterEngine(name: "app_clip_engine")
    flutterEngine.run(withEntrypoint: nil, initialRoute: "/clip")
    GeneratedPluginRegistrant.register(with: flutterEngine)
    let controller = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
    window?.rootViewController = controller
    window?.makeKeyAndVisible()
  }
}

On Android, in your Instant Feature’s Activity:

import io.flutter.embedding.android.FlutterActivity;
public class InstantFeatureActivity extends FlutterActivity {
  @Override
  protected String getInitialRoute() {
    return "/instant";
  }
}

Within your Dart module (lib/main.dart), use a MethodChannel to fetch dynamic parameters:

import 'package:flutter/services.dart';
final channel = MethodChannel('app_feature');
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  channel.invokeMethod('fetchParams').then((params) {
    runApp(MyApp(params: params));
  });
}

Keep your UI minimal in the clip/instant entrypoint to meet size limits.

Testing and Deployment

For iOS, use Xcode’s App Clip debugger or TestFlight’s App Clip routing. In a simulator, install the App Clip via a universal link tap in Safari. Measure size: must stay under 10 MB.

For Android, install the Instant App by typing the Instant App URL in Chrome. Use the bundletool CLI to validate your AAB:

bundletool build-apks --bundle=app.aab --output=app.apks --instant
bundletool install-apks --apks

Integrate these steps into CI: build the Flutter module, assemble host apps, and validate dynamic delivery. Automate size reports and lint rules to ensure the clip/instant feature stays lean.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By isolating a Flutter module and configuring native hosts, you can deliver App Clips on iOS and Instant Apps on Android from a single codebase. Follow platform guidelines for entrypoints, Associated Domains or intent filters, and size budgets. With testing automation and CI integration, you’ll offer a frictionless, install-free experience to end users while maintaining maintainable Flutter code.