Building a Flutter Color Picker Tool for UI Debugging

In mobile UI development, designers and developers often disagree on color accuracy; a quick visual tool can resolve these disputes. The article describes building a Flutter color‑picker that captures the screen, reads pixel data, and shows a magnified overlay with the exact color value.

1. Capture the screen

Wrap the UI in a RepaintBoundary widget and assign a GlobalKey. When needed, retrieve the RenderRepaintBoundary via the key, obtain the device pixel ratio, and convert the boundary to an image.

Widget build(BuildContext context) {<br/>  return RepaintBoundary(<br/>    key: _key,<br/>    child: Scaffold(...),<br/>  );<br/>}

// Get the boundary and capture image<br/>RenderRepaintBoundary boundary = _key.currentContext.findRenderObject();<br/>double pix = window.devicePixelRatio;<br/>var image = await boundary.toImage(pixelRatio: pix);

2. Extract pixel color

Convert the captured ui.Image to PNG bytes, then to a Uint8List. Display the image with Image.memory() and use the image package’s getPixelSafe() to read the ARGB value at the touched coordinates, converting from AABBGGRR to Flutter’s AARRGGBB format.

Color getColorFromDragUpdateDetails(Offset globalPosition) {<br/>  int x = globalPosition.dx.toInt();<br/>  int y = globalPosition.dy.toInt();<br/>  double pix = window.devicePixelRatio;<br/>  int pixel32 = this.temp.getPixelSafe((x * pix).toInt(), (y * pix).toInt());<br/>  int argb = _abgrToArgb(pixel32);<br/>  return Color(argb);<br/>}

int _abgrToArgb(int oldValue) {<br/>  int newValue = oldValue;<br/>  newValue = newValue & 0xFF00FF00;<br/>  newValue = ((oldValue & 0xFF) << 16) | newValue;<br/>  newValue = ((oldValue & 0x00FF0000) >> 16) | newValue;<br/>  return newValue;<br/>}

3. Magnify the selected area

Use ImageFilter.matrix() to apply a translation‑scale‑translation transformation that zooms the region around the touch point. Combine Stack, Positioned, BackdropFilter, and ClipRRect to render a floating magnifier that follows the finger.

onPanUpdate: (detail) {<br/>  setState(() {<br/>    Color pixelColor = getColorFromDragUpdateDetails(detail.globalPosition);<br/>    _magnifierPosition = detail.globalPosition - _size.center(Offset.zero);<br/>    final Matrix4 newMatrix = Matrix4.identity()<br/>      ..translate(detail.globalPosition.dx, detail.globalPosition.dy)<br/>      ..scale(scale, scale)<br/>      ..translate(-detail.globalPosition.dx, -detail.globalPosition.dy);<br/>    matrix = newMatrix;<br/>  });<br/>};

Visibility(<br/>  visible: _visible,<br/>  child: Positioned(<br/>    left: _magnifierPosition.dx,<br/>    top: _magnifierPosition.dy,<br/>    child: ClipRRect(<br/>      borderRadius: BorderRadius.circular(_size.longestSide),<br/>      child: BackdropFilter(<br/>        filter: ImageFilter.matrix(matrix.storage),<br/>        child: CustomPaint(painter: painter, size: _size),<br/>      ),<br/>    ),<br/>  ),<br/>);

4. Common issues

The article also discusses color‑format conversion, handling different pixel ratios on devices (e.g., iPhone 11 with a ratio of 2.0), and estimating image memory usage based on resolution and bytes‑per‑pixel.

5. Conclusion

Although the techniques are straightforward, combining them yields a useful tool that speeds up UI verification, and the approach can be extended to other measurements such as component size, position, and hierarchy.