When to use Zego Effects Plugin For Uikit
The Zego Effects Plugin for UI Kit is a Flutter wrapper around the Zego Effects SDK, enabling developers to enrich live video streams with a variety of real‑time visual filters, stickers, and AR effects. By integrating this plugin, you can transform ordinary video calls or live broadcasts into engaging experiences that keep users entertained and coming back for more. The plugin works seamlessly with Zego’s existing audio‑video solutions, allowing you to layer effects on top of any Zego video view without rewriting your rendering pipeline.
When building a social video chat, a live‑shopping platform, or an interactive streaming app, visual effects often become the differentiator that turns a functional product into a memorable one. This plugin fits naturally into a typical Flutter architecture: place a `ZegoEffectsView` inside your widget tree wherever a `ZegoVideoView` lives, and control the effect lifecycle through a simple controller. Because the plugin follows the same asynchronous patterns as other Zego packages, you can keep your state management (Provider, Bloc, Riverpod, etc.) unchanged while adding a new layer of interactivity.
Setting up the plugin is straightforward. After adding the dependency with `flutter pub add zego_effects_plugin_for_uikit`, you must configure the native side: add the required permissions for camera and microphone, include the Zego SDK binaries for iOS and Android, and initialize the Zego engine with your App ID and App Sign. Once the engine is running, instantiate a `ZegoEffectsController`, bind it to your video stream, and call methods like `applyFilter`, `addSticker`, or `removeAllEffects`. The plugin also exposes event callbacks for effect loading status, errors, and user interaction, giving you full control over the UI flow.
While the plugin is production‑ready, there are a few cautions to keep in mind. Effects processing consumes GPU resources, so on low‑end devices you may need to limit the number of concurrent effects or provide a fallback UI. Network latency can affect the synchronization of AR stickers in multi‑user rooms, so testing under realistic bandwidth conditions is recommended. Additionally, be aware of platform‑specific limitations: iOS requires a minimum deployment target of 11.0, and Android devices must support OpenGL ES 3.0 or higher for the full effect suite.
For beginners, the plugin offers a quick‑start path: after initializing Zego, call `controller.applyFilter('beauty')` to enable a built‑in beauty filter, or load a custom sticker pack with `controller.addSticker('sticker_01')`. The provided example app demonstrates how to toggle effects with simple buttons, making it easy to prototype a feature‑rich video chat within an hour. As you grow more comfortable, you can explore advanced capabilities such as dynamic effect loading, real‑time face tracking, and multi‑effect chaining, all while keeping your Flutter code clean and declarative.
Pros
- tight integration with Zego video SDK
- wide variety of built‑in filters and stickers
- simple controller API
- cross‑platform (iOS & Android)
- supports custom effect bundles
Watch outs
- GPU intensive – may affect low‑end devices
- requires native Zego SDK setup
- limited to Zego‑based video streams
Setup notes
1. Add the dependency: `flutter pub add zego_effects_plugin_for_uikit` 2. Run `flutter pub get`. 3. Follow the native setup guide: - iOS: add camera & microphone permissions to `Info.plist`, set minimum deployment target to 11.0, and embed the Zego SDK frameworks. - Android: add camera, microphone, and storage permissions to `AndroidManifest.xml`, ensure `minSdkVersion` is 21, and include the Zego AAR libraries. 4. Initialize Zego Engine with your App ID and App Sign before using the effects controller. 5. Import the package and create a `ZegoEffectsController` to start applying effects.
Requires Flutter 3.0 or newer. Supports iOS 11.0+ and Android API 21+. Compatible with Zego Video SDK version 2.2.x and later. Works with both portrait and landscape orientations. GPU‑intensive effects may be limited on devices lacking OpenGL ES 3.0 support.
```dart
import 'package:flutter/material.dart';
import 'package:zego_effects_plugin_for_uikit/zego_effects_plugin_for_uikit.dart';
class VideoChatPage extends StatefulWidget {
@override
_VideoChatPageState createState() => _VideoChatPageState();
}
class _VideoChatPageState extends State<VideoChatPage> {
late ZegoEffectsController _effectsCtrl;
@override
void initState() {
super.initState();
_effectsCtrl = ZegoEffectsController();
// Assume Zego engine is already initialized elsewhere
_effectsCtrl.bindVideoView(viewId: 'local_view');
}
@override
void dispose() {
_effectsCtrl.unbindVideoView();
super.dispose();
}
void _applyBeauty() => _effectsCtrl.applyFilter('beauty');
void _addSticker() => _effectsCtrl.addSticker('sticker_01');
void _clearAll() => _effectsCtrl.removeAllEffects();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Zego Effects Demo')),
body: Stack(
children: [
ZegoVideoView(viewId: 'local_view'), // regular video view
ZegoEffectsView(controller: _effectsCtrl), // overlay for effects
Positioned(
bottom: 20,
left: 20,
child: Row(
children: [
ElevatedButton(onPressed: _applyBeauty, child: Text('Beauty')),
SizedBox(width: 10),
ElevatedButton(onPressed: _addSticker, child: Text('Sticker')),
SizedBox(width: 10),
ElevatedButton(onPressed: _clearAll, child: Text('Clear')),
],
),
),
],
),
);
}
}
```