Skip to main content
Mapagam

Working with Plugins

1. Understanding Plugin Architecture

Flutter plugins provide a way to integrate native platform-specific code with Flutter applications. They allow developers to access device features, third-party libraries, or platform-specific APIs that aren't natively available in Flutter.

Plugin Type Description Use Case
Method Channel Used for asynchronous communication between Flutter and platform code. Calling native APIs like camera, GPS, or device info.
Event Channel Used for continuous streams of data from platform to Flutter. Listening to device sensor updates or real-time data feeds.
Basic Message Channel Used for simple, synchronous communication. Passing configuration or simple data exchange.

Example: Method Channel Usage

// Dart side
import 'package:flutter/services.dart';

static const MethodChannel _channel = MethodChannel('com.example.plugin');

Future<String> getDeviceName() async {
  final String? deviceName = await _channel.invokeMethod('getDeviceName');
  return deviceName ?? '';
}

// Native side (Android)
@Override
public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {
  if (call.method.equals("getDeviceName")) {
    String deviceName = Build.MODEL;
    result.success(deviceName);
  } else {
    result.notImplemented();
  }
}
Note: Plugin architecture in Flutter is designed to support both Android and iOS platforms, with each platform having its own implementation of the plugin logic.

2. Using Platform-Specific Plugin Code

Flutter plugins can include platform-specific code to access native functionality on iOS, Android, and other platforms. This is achieved through platform channels that allow communication between the Flutter app and the native code.

Platform Native Language Channel Type Description
Android Java/Kotlin MethodChannel Used to communicate with Android native code via method calls.
iOS Swift/Objective-C MethodChannel Used to communicate with iOS native code via method calls.
Web JavaScript MethodChannel Used to communicate with JavaScript code in the browser.

Example: Using Platform-Specific Code in Flutter

// Dart code in Flutter app
import 'package:flutter/services.dart';

static const MethodChannel _channel = MethodChannel('com.example.myplugin');

Future<String> getPlatformVersion() async {
  final String? version = await _channel.invokeMethod('getPlatformVersion');
  return version ?? 'Unknown platform version';
}

// Android code (Java)
// package com.example.myplugin;
//
// import io.flutter.plugin.common.MethodCall;
// import io.flutter.plugin.common.MethodChannel;
// import io.flutter.plugin.common.PluginRegistry;
//
// public class MyPlugin implements MethodChannel.MethodCallHandler {
//   @Override
//   public void onMethodCall(MethodCall call, MethodChannel.Result result) {
//     if (call.method.equals("getPlatformVersion")) {
//       result.success("Android " + android.os.Build.VERSION.RELEASE);
//     } else {
//       result.notImplemented();
//     }
//   }
// }

// iOS code (Swift)
// import Flutter
//
// extension String {
//   func toFlutter() -> FlutterResult {
//     return self
//   }
// }
//
// extension FlutterMethodCall {
//   func getPlatformVersion() -> String {
//     return "iOS " + UIDevice.current.systemVersion
//   }
// }
Note: Platform-specific code must be implemented in the respective native languages (Java/Kotlin for Android, Swift/Objective-C for iOS) and registered with the Flutter engine to handle method calls.

3. Finding Plugins on pub.dev

Plugin Description Version Platform Support
firebase_core Core Firebase plugin for Flutter apps 2.15.0 Android, iOS, Web, macOS, Windows
google_maps_flutter Google Maps integration for Flutter 2.5.0 Android, iOS
sqflite SQLite database plugin for Flutter 2.3.0 Android, iOS, Web
shared_preferences Plugin to store key-value data persistently 2.2.1 Android, iOS, Web, macOS, Windows
image_picker Plugin to pick images from gallery or capture with camera 1.0.4 Android, iOS

Example: Search for plugins on pub.dev

# Visit pub.dev and search for plugins
# Example search query:
flutter pub search firebase
Note: pub.dev is the official package repository for Flutter and Dart packages.

4. Adding Plugin Dependencies

Dependency Type Declaration Format Notes
pubspec.yaml dependencies: Standard location for plugin dependencies in Flutter projects
Plugin Name permission_handler: ^10.4.3 Example plugin with version constraint
Git Source flutter_plugin: <br>  git:<br>    url: https://github.com/example/flutter_plugin.git<br>    ref: main Use git reference for development or private plugins
Path Source local_plugin:<br>  path: ../local_plugin Local plugin from file system

Example: Adding a Plugin Dependency

name: my_flutter_app
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  permission_handler: ^10.4.3
  shared_preferences: ^2.2.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
Note: After adding a plugin to pubspec.yaml, run flutter pub get to fetch and install the plugin.
Warning: Ensure that plugins are compatible with your Flutter SDK version and target platforms (iOS, Android, web).

5. Implementing Plugin Initialization

Plugin initialization in Flutter involves setting up the plugin's native code and ensuring proper communication between the Dart side and the platform-specific implementations.

Step Description Code Example
1. Register Plugin Register the plugin with the platform channel to enable communication. 
import 'package:flutter/services.dart';

static const MethodChannel _channel = MethodChannel('my_plugin');
2. Initialize Platform Initialize the plugin on both Android and iOS platforms. 
static Future<void> initialize() async {
  await _channel.invokeMethod('initialize');
}
3. Handle Platform-Specific Setup Implement platform-specific logic in native code (Java/Kotlin for Android, Swift/Objective-C for iOS). 
// Android
public static void registerWith(Registrar registrar) {
  MethodChannel channel = new MethodChannel(registrar.messenger(), "my_plugin");
  channel.setMethodCallHandler(new MyPlugin());
}
Note: Ensure that the plugin is initialized before any method calls are made to avoid runtime errors.
Plugin Description Installation Usage Example
firebase_core Core Firebase SDK for Flutter flutter pub add firebase_core 
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
}
cloud_firestore Realtime database for Firebase flutter pub add cloud_firestore 
import 'package:cloud_firestore/cloud_firestore.dart';

final docRef = FirebaseFirestore.instance.collection('users').doc('user1');
await docRef.set({'name': 'John Doe'});
shared_preferences Local key-value storage flutter pub add shared_preferences 
import 'package:shared_preferences/shared_preferences.dart';

SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('username', 'john_doe');
http HTTP client for making requests flutter pub add http 
import 'package:http/http.dart' as http;

final response = await http.get(Uri.parse('https://api.example.com/data'));
image_picker Image selection from gallery or camera flutter pub add image_picker 
import 'package:image_picker/image_picker.dart';

final picker = ImagePicker();
final pickedFile = await picker.pickImage(source: ImageSource.gallery);
provider State management solution flutter pub add provider 
import 'package:provider/provider.dart';

final counter = Provider.of<Counter>(context, listen: false);
counter.increment();

Example: Using Firebase Authentication

import 'package:firebase_auth/firebase_auth.dart';

final FirebaseAuth auth = FirebaseAuth.instance;

Future<User> signInWithEmail(String email, String password) async {
  final UserCredential credential = await auth.signInWithEmailAndPassword(
    email: email,
    password: password,
  );
  return credential.user!;
}

Example: Using Image Picker

import 'package:image_picker/image_picker.dart';

Future<void> pickImage() async {
  final XFile? image = await ImagePicker().pickImage(source: ImageSource.gallery);
  if (image != null) {
    // Process image
  }
}

7. Creating Custom Plugins

Example: Basic Plugin Structure

// lib/my_plugin.dart
import 'package:flutter/foundation.dart';

class MyPlugin {
  static const MethodChannel _channel = MethodChannel('my_plugin');

  static Future<String> get platformVersion async {
    try {
      final String version = await _channel.invokeMethod('getPlatformVersion');
      return version;
    } catch (e) {
      return 'Failed to get platform version.';
    }
  }
}
Component Description Notes
MethodChannel MethodChannel('my_plugin') Used to communicate with native code
invokeMethod _channel.invokeMethod('method') Call native methods from Dart
registerWith registerWith(registrar) Register plugin with Flutter engine
Note: The plugin must be registered in main.dart or via pubspec.yaml.

Example: Android Integration

// android/app/src/main/java/com/example/my_plugin/MyPlugin.java
package com.example.my_plugin;

import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.PluginRegistry;

public class MyPlugin implements MethodChannel.MethodCallHandler {
  private final PluginRegistry.Registrar registrar;

  public static void registerWith(PluginRegistry.Registrar registrar) {
    final MethodChannel channel = new MethodChannel(registrar.messenger(), "my_plugin");
    channel.setMethodCallHandler(new MyPlugin(registrar));
  }

  @Override
  public void onMethodCall(MethodCall call, MethodChannel.Result result) {
    if (call.method.equals("getPlatformVersion")) {
      result.success("Android " + android.os.Build.VERSION.RELEASE);
    } else {
      result.notImplemented();
    }
  }
}

Example: iOS Integration

// ios/Runner/MyPlugin.swift
import Flutter
import UIKit

public class MyPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "my_plugin", binaryMessenger: registrar.messenger())
    let instance = MyPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    if call.method == "getPlatformVersion" {
      result("iOS " + UIDevice.current.systemVersion)
    } else {
      result(FlutterMethodNotImplemented)
    }
  }
}

8. Using Federated Plugins

Federated plugins in Flutter allow you to write platform-specific code for different platforms (Android, iOS, web, etc.) while maintaining a consistent Dart API. This approach enables better code organization and reusability across platforms.

Feature Description Platform Support
federated_plugin Enables platform-specific implementations for each supported platform. Android, iOS, Web
platform_channel Used to communicate between Dart and platform-specific code. Android, iOS

Example: Federated Plugin Structure

// lib/federated_plugin.dart
import 'package:flutter/foundation.dart';

abstract class FederatedPlugin {
  static final instance = Platform.isAndroid ? AndroidFederatedPlugin() : iOSFederatedPlugin();

  Future<String> fetchData();
}

class AndroidFederatedPlugin implements FederatedPlugin {
  @override
  Future<String> fetchData() async {
    // Android-specific implementation
    return "Data from Android";
  }
}

class iOSFederatedPlugin implements FederatedPlugin {
  @override
  Future<String> fetchData() async {
    // iOS-specific implementation
    return "Data from iOS";
  }
}
Note: Federated plugins require platform-specific implementations for each supported platform. The federated_plugin abstract class defines a common interface, while each platform implements its own logic.

Key Concepts

  • Platform Abstraction: The plugin abstracts platform-specific code.
  • Common API: Dart code can interact with the plugin using a consistent interface.
  • Platform-Specific Logic: Each platform (Android, iOS) has its own implementation.

9. Publishing Plugins to pub.dev

Example: Plugin structure

# pubspec.yaml
name: my_plugin
description: A new Flutter plugin project.
version: 0.1.0
homepage: https://github.com/example/my_plugin

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  plugin:
    platforms:
      android:
        package: com.example.my_plugin
        pluginClass: MyPlugin
      ios:
        pluginClass: MyPlugin
      web:
        pluginClass: MyPlugin
Field Description Required
name Plugin name, must be unique on pub.dev Yes
description Short description of the plugin Yes
version Semantic version (e.g., 1.0.0) Yes
homepage URL to project homepage No
repository URL to source repository No
issue_tracker URL to issue tracker No
topics List of tags for categorization No

Workflow: Publish to pub.dev

  1. Ensure plugin is properly structured and tested
  2. Run flutter pub publish --dry-run to validate
  3. Run flutter pub publish to upload
  4. Verify on pub.dev
Note: Plugin must be compatible with Flutter 3.0+ and Dart 3.0+
Warning: Once published, versions cannot be overwritten or deleted

10. Managing Plugin Compatibility

Plugin Platform Support Version Compatibility Notes
flutter_web_plugins Web, Android, iOS ^0.1.0 Officially supported by Flutter team
path_provider Android, iOS, Web ^2.1.0 Provides access to device storage
shared_preferences Android, iOS, Web ^2.3.0 Stores key-value pairs persistently
firebase_core Android, iOS, Web ^2.15.0 Core Firebase SDK integration
sqflite Android, iOS ^2.3.0 SQLite database for local storage

Example: Checking Plugin Version Compatibility

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.1.0
  shared_preferences: ^2.3.0
  firebase_core: ^2.15.0
Note: Always check plugin documentation for the latest compatible versions and migration guides.
Warning: Using incompatible versions may lead to runtime errors or unexpected behavior.

Was this article helpful?

Related Cheat Sheets