Camera
High-performance camera integration with managed UI and lifecycle.
Camera
The Fluxy Camera plugin simplifies camera integration by providing pre-built modals and streamlined controller management. It is fully integrated with the FxImage engine.
[GUIDE] Industrial Step-by-Step
1. Installation (via CLI)
Add the camera module using the Fluxy CLI to maintain architectural integrity.
fluxy module add camera2. Managed Boot Sequence
Ensure your main.dart is configured with the mandatory three-step boot sequence.
import 'package:fluxy/fluxy.dart';
import 'core/registry/fluxy_registry.dart';
void main() async {
await Fluxy.init();
Fluxy.registerRegistry(() => registerFluxyPlugins());
Fluxy.autoRegister(); // Boots camera and permission handlers
runApp(MyApp());
}3. Usage (Unified API)
Access the module through the stable Fx.platform gateway.
// Open managed capture UI
final XFile? photo = await Fx.platform.camera.fullView(context: context);
if (photo != null) {
print("Captured: ${photo.path}");
}Core Functionality
1. Full View Modal
The most common use case is opening a full-screen camera view to capture photos or scan codes.
final XFile? photo = await Fx.platform.camera.fullView(
context: context,
enableAutoCapture: false,
);2. Inline Camera
For custom layouts, use the FxCamera widget:
FxCamera(
onCapture: (file) => print("Saved to ${file.path}"),
controller: myController,
).h(300).rounded(20);Features
- Quick UI: Open a professional camera interface with one call.
- Smart Constraints: Automatically handles aspect ratios and orientations.
- Permissions: Manages permissions gracefully—requested on first call.
The Wrong Way vs. The Right Way
| Feature | [WRONG] The Outdated Way | [RIGHT] The Fluxy Standard |
|---|---|---|
| Plugin Access | FluxyPluginEngine.find<FluxyCameraPlugin>() | Fx.platform.camera |
| Capture UI | Building custom CameraPreview stacks | await Fx.platform.camera.fullView() |
| Lifecycle | Manually disposing CameraController | Managed by framework on view close |
| Permissions | Checking permission_handler manually | Automatic checking inside fullView |
Pitfalls & Troubleshooting
1. "Black screen on camera open"
- The Cause: Running on an emulator without a virtual camera set up.
- The Fix: Ensure your emulator has a "Back" camera enabled in settings.
2. "Camera doesn't initialize on first tap"
- The Cause: Missing cold boot initialization or
main()sequence error. - The Fix: Ensure you are calling
await Fluxy.init()andFluxy.autoRegister()in yourmain().
3. "Memory spike after taking 20+ photos"
- The Cause: Storing high-resolution files without clearing cache.
- The Fix: Use
Fx.platform.camera.disposeCache()and clean up temporary files if not needed.
Best Practices
- Contextual Permissions: Only trigger
fullView()when the user explicitly clicks a "Scan" or "Capture" button. - Dispose Assets: Use
Fx.storageto track and clean up old photos periodically. - Handle No-Hardware: Always check
Fx.platform.camera.cameras.isEmptyto show a fallback message.
The Master Camera Implementation
In a professional application, the camera is orchestrated within FluxController to handle permissions, capture, and subsequent processing (like uploading or AI scanning). Here is a complex "Profile Photo" implementation.
class ProfilePhotoController extends FluxController {
final photo = flux<XFile?>(null);
final isUploading = flux(false);
Future<void> updateAvatar() async {
// 1. Open the managed camera UI
final XFile? captured = await Fx.platform.camera.fullView(
context: Fx.context,
enableAutoCapture: false, // Wait for user trigger
);
if (captured != null) {
photo.value = captured;
await _uploadToCloud(captured);
}
}
Future<void> _uploadToCloud(XFile file) async {
isUploading.value = true;
try {
// 2. Perform the upload via Fluxy Networking
await Fx.http.postFile('/api/user/avatar', file: file);
Fx.toast.success("Avatar Updated Successfully");
} catch (e) {
Fx.log.fatal("Upload Interrupted", error: e);
} finally {
isUploading.value = false;
}
}
}
// UI Layer
class AvatarWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final controller = Fluxy.use<ProfilePhotoController>();
return Fx.stack([
// 3. Dynamic Preview with reactive state
Fx(() => Fx.avatar(
image: controller.photo.value?.path,
fallback: "User",
size: FxAvatarSize.xl,
).loading(controller.isUploading.value)),
// 4. Trigger Button
Fx.iconButton(Icons.camera_alt, onTap: controller.updateAvatar)
.bg(Fx.primary)
.white()
.rounded.full()
.positioned(bottom: 0, right: 0),
]);
}
}By centralizing all hardware knowledge under the Fx.platform.camera helper, you ensure that your diagnostics and analytics are consistent and easy to maintain across all target platforms.