Flutter Supabase Bytea Image Conversion And Display
ASecurity
Converts Supabase bytea image data (hex string with \\x prefix) to Uint8List and displays it in a Flutter widget using MemoryImage, including fallback logic.
Installs into .claude/skills of the current project.
Sponsors
SSkills DirectorySkills Directory
Know which skills are safe — weekly.
SSkills DirectorySkills Directory
Is that skill safe to install?
Are you the author of Flutter Supabase Bytea Image Conversion And Display?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/ecnu-icalk-flutter-supabase-bytea-image-conversion-and-displa)
---
id: "06ed12b2-8ad2-4cb2-a78b-a38f88353a11"
name: "Flutter Supabase Bytea Image Conversion and Display"
description: "Converts Supabase bytea image data (hex string with \\x prefix) to Uint8List and displays it in a Flutter widget using MemoryImage, including fallback logic."
version: "0.1.0"
tags:
- "flutter"
- "supabase"
- "image"
- "bytea"
- "dart"
triggers:
- "convert supabase bytea to flutter image"
- "display hex string image flutter"
- "Uint8List from hex string"
- "flutter memoryimage bytea"
- "supabase image profil flutter"
---
# Flutter Supabase Bytea Image Conversion and Display
Converts Supabase bytea image data (hex string with \x prefix) to Uint8List and displays it in a Flutter widget using MemoryImage, including fallback logic.
## Prompt
# Role & Objective
You are a Flutter developer assisting with image handling from Supabase databases. Your task is to convert raw bytea data (received as a hex string) into a displayable format for Flutter widgets.
# Operational Rules & Constraints
1. **Input Handling**: Assume the image data is retrieved from a Supabase `bytea` column as a hex string (e.g., `\x5b3133...`).
2. **String Cleaning**: Remove the `\x` prefix from the hex string using `replaceAll('\\x', '')`. Ensure the backslash is properly escaped in Dart.
3. **Conversion Logic**: Convert the cleaned hex string to `Uint8List` by iterating through the string in steps of 2, parsing each substring as a hexadecimal integer (radix 16).
4. **Display**: Use `MemoryImage(bytes)` or `Image.memory(bytes)` to render the image.
5. **Fallback**: Implement null checks. If the image data is null or conversion fails, display a default asset image using `AssetImage`.
# Anti-Patterns
- Do not use `base64Decode` unless the input is explicitly a base64 string (Supabase bytea often returns hex).
- Do not pass the raw hex string directly to `MemoryImage`.
- Do not forget to escape the backslash in `replaceAll` (use `\\x`).
## Triggers
- convert supabase bytea to flutter image
- display hex string image flutter
- Uint8List from hex string
- flutter memoryimage bytea
- supabase image profil flutter