How to create a custom camera for your FlutterFlow app

1import 'package:camera/camera.dart';
2
3class CustomCamera extends StatefulWidget {
4  const CustomCamera({
5    super.key, this.width, this.height, this.onPhotoCaptured,
6  });
7  final double? width;
8  final double? height;
9  final Future Function(String filePath)? onPhotoCaptured;
10
11  @override
12  State<CustomCamera> createState() => _CustomCameraState();
13}
14
15class _CustomCameraState extends State<CustomCamera>
16    with WidgetsBindingObserver {
17  CameraController? _controller;
18  List<CameraDescription> _cameras = [];
19  int _cameraIdx = 0;
20  bool _flash = false;
21
22  @override
23  void initState() {
24    super.initState();
25    WidgetsBinding.instance.addObserver(this);
26    _init();
27  }
28
29  Future<void> _init() async {
30    _cameras = await availableCameras();
31    if (_cameras.isEmpty) return;
32    _startCamera(_cameras[_cameraIdx]);
33  }
34
35  Future<void> _startCamera(CameraDescription cam) async {
36    _controller = CameraController(cam, ResolutionPreset.high);
37    await _controller!.initialize();
38    if (mounted) setState(() {});
39  }
40
41  @override
42  void didChangeAppLifecycleState(AppLifecycleState state) {
43    if (state == AppLifecycleState.inactive) _controller?.dispose();
44    if (state == AppLifecycleState.resumed) _init();
45  }
46
47  Future<void> _capture() async {
48    final xFile = await _controller!.takePicture();
49    widget.onPhotoCaptured?.call(xFile.path);
50  }
51
52  Future<void> _switch() async {
53    _cameraIdx = (_cameraIdx + 1) % _cameras.length;
54    await _controller?.dispose();
55    _startCamera(_cameras[_cameraIdx]);
56  }
57
58  Future<void> _toggleFlash() async {
59    _flash = !_flash;
60    await _controller?.setFlashMode(
61      _flash ? FlashMode.torch : FlashMode.off,
62    );
63    setState(() {});
64  }
65
66  @override
67  void dispose() {
68    WidgetsBinding.instance.removeObserver(this);
69    _controller?.dispose();
70    super.dispose();
71  }
72
73  @override
74  Widget build(BuildContext context) {
75    if (_controller == null || !_controller!.value.isInitialized) {
76      return const Center(child: CircularProgressIndicator());
77    }
78    return SizedBox(
79      width: widget.width ?? double.infinity,
80      height: widget.height ?? 500,
81      child: Stack(
82        children: [
83          Positioned.fill(child: CameraPreview(_controller!)),
84          Positioned(
85            top: 16, right: 16,
86            child: IconButton(
87              icon: Icon(_flash ? Icons.flash_on : Icons.flash_off,
88                  color: Colors.white, size: 28),
89              onPressed: _toggleFlash,
90            ),
91          ),
92          Positioned(
93            top: 16, left: 16,
94            child: IconButton(
95              icon: const Icon(Icons.cameraswitch,
96                  color: Colors.white, size: 28),
97              onPressed: _switch,
98            ),
99          ),
100          Positioned(
101            bottom: 32,
102            left: 0, right: 0,
103            child: Center(
104              child: GestureDetector(
105                onTap: _capture,
106                child: Container(
107                  width: 72, height: 72,
108                  decoration: BoxDecoration(
109                    shape: BoxShape.circle,
110                    border: Border.all(
111                      color: Colors.white, width: 4),
112                    color: Colors.white24,
113                  ),
114                ),
115              ),
116            ),
117          ),
118        ],
119      ),
120    );
121  }
122}