How to Build a Custom Image Editor in FlutterFlow

1// Custom Widget: ImageEditorWidget
2// Pubspec: image_painter: ^0.7.0
3
4import 'dart:typed_data';
5import 'package:flutter/material.dart';
6import 'package:image_painter/image_painter.dart';
7import 'package:firebase_storage/firebase_storage.dart';
8
9class ImageEditorWidget extends StatefulWidget {
10  final double width;
11  final double height;
12  final Uint8List imageBytes;
13  final Future Function(String downloadUrl)? onSave;
14
15  const ImageEditorWidget({
16    Key? key,
17    required this.width,
18    required this.height,
19    required this.imageBytes,
20    this.onSave,
21  }) : super(key: key);
22
23  @override
24  State<ImageEditorWidget> createState() => _ImageEditorWidgetState();
25}
26
27class _ImageEditorWidgetState extends State<ImageEditorWidget> {
28  final _controller = ImagePainterController(
29    color: Colors.red,
30    strokeWidth: 4.0,
31    mode: PaintMode.freeStyle,
32  );
33  double _strokeWidth = 4.0;
34  PaintMode _activeMode = PaintMode.freeStyle;
35
36  final _colors = [
37    Colors.red, Colors.blue, Colors.green, Colors.black,
38    Colors.white, Colors.yellow, Colors.orange, Colors.purple,
39  ];
40
41  @override
42  Widget build(BuildContext context) {
43    return SizedBox(
44      width: widget.width,
45      height: widget.height,
46      child: Column(children: [
47        Expanded(
48          child: ImagePainter.memory(
49            widget.imageBytes,
50            controller: _controller,
51            scalable: true,
52          ),
53        ),
54        // Toolbar row
55        Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
56          _toolBtn(Icons.edit, PaintMode.freeStyle),
57          _toolBtn(Icons.text_fields, PaintMode.text),
58          _toolBtn(Icons.crop_square, PaintMode.rect),
59          _toolBtn(Icons.circle_outlined, PaintMode.circle),
60          _toolBtn(Icons.show_chart, PaintMode.line),
61          // Color picker
62          IconButton(
63            icon: Icon(Icons.palette,
64                color: _controller.color),
65            onPressed: _showColorPicker,
66          ),
67          IconButton(icon: const Icon(Icons.undo), onPressed: _controller.undo),
68          IconButton(icon: const Icon(Icons.delete_outline), onPressed: _controller.clearAll),
69          IconButton(icon: const Icon(Icons.save), onPressed: _exportAndUpload),
70        ]),
71        // Stroke width slider
72        Slider(
73          value: _strokeWidth,
74          min: 1, max: 20, divisions: 19,
75          onChanged: (v) {
76            setState(() => _strokeWidth = v);
77            _controller.setStrokeWidth(v);
78          },
79        ),
80      ]),
81    );
82  }
83
84  Widget _toolBtn(IconData icon, PaintMode mode) {
85    return IconButton(
86      icon: Icon(icon,
87          color: _activeMode == mode
88              ? Theme.of(context).primaryColor
89              : Colors.grey),
90      onPressed: () {
91        setState(() => _activeMode = mode);
92        _controller.setMode(mode);
93      },
94    );
95  }
96
97  void _showColorPicker() {
98    showDialog(
99      context: context,
100      builder: (_) => AlertDialog(
101        content: Wrap(
102          spacing: 8,
103          children: _colors.map((c) => GestureDetector(
104            onTap: () {
105              _controller.setColor(c);
106              Navigator.pop(context);
107            },
108            child: CircleAvatar(backgroundColor: c, radius: 18),
109          )).toList(),
110        ),
111      ),
112    );
113  }
114
115  Future<void> _exportAndUpload() async {
116    final bytes = await _controller.exportImage();
117    if (bytes == null) return;
118    final ref = FirebaseStorage.instance
119        .ref('annotations/${DateTime.now().millisecondsSinceEpoch}.png');
120    await ref.putData(bytes);
121    final url = await ref.getDownloadURL();
122    widget.onSave?.call(url);
123  }
124}