Build an AI-Powered Flutter App with Qoder, Supabase, and Qwen Image Edit

1. Introduction

In the era of AI‑native app development, traditional backend architecture is being redefined. This article demonstrates using Qoder, Alibaba Cloud ADB Supabase, and the Qwen Image Edit model to quickly build a complete AI figurine generation Flutter mobile app without a traditional backend.

2. Overall Approach

Frontend generated by Qoder automatically creates Flutter code for UI and interaction.

Data and object storage provided by ADB Supabase, offering BaaS capabilities.

AI capabilities accessed via ADB Supabase Edge Function integrating the Qwen Image Edit model for image editing.

The lightweight architecture enables fast iteration from prototype to production.

3. Environment and Preparation

1. Create an Alibaba Cloud ADB Supabase instance (free tier 1C2G) and configure VPC for DashScope API access, or use a public NAT gateway if needed.

2. Obtain DashScope API Key for calling the Qwen Image Edit model.

3. Install Qoder and the Flutter plugin, then set up the Flutter environment (Android/iOS SDK) using VS Code.

4. AI‑Driven Development – Qoder Auto‑Generates Flutter Code

Qoder, an AI‑driven IDE agent, generates high‑quality Flutter code based on described functionality. After creating an empty Flutter project, describe the core features, iterate with debugging, and obtain a runnable mobile app.

Reference source code is available for further customization.

5. Backend‑as‑a‑Service – ADB Supabase Configuration

5.1 API Configuration

Copy API_URL and SERVICE_KEY from the Supabase dashboard and add them to a .env file in the project root.

SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net
SUPABASE_SERVICE_KEY=xxxxxxxx

5.2 Database Table Design

Create a table to store image edit history.

CREATE TABLE public.edited_images (
    id TEXT PRIMARY KEY,
    prompt TEXT NOT NULL,
    original_image_url TEXT NOT NULL,
    edited_image_url TEXT NOT NULL,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

5.3 Object Storage Bucket

Create an "images" bucket in Supabase Storage to persist uploaded user images.

6. AI Service Integration – Edge Function Deployment

6.1 Edge Function Core Logic

Deploy a new Edge Function named wan with the following Deno code, which receives an image URL and prompt, calls the Qwen Image Edit model via DashScope, and returns the edited image URL.

const DASHSCOPE_API_KEY = Deno.env.get('BAILIAN_API_KEY');
const BASE_URL = 'https://vpc-cn-beijing.dashscope.aliyuncs.com/api/v1';
async function callImageEditAPI(image_url, prompt) {
  const messages = [{ role: "user", content: [{ image: image_url }, { text: prompt }] }];
  const payload = { model: "qwen-image-edit", input: { messages }, parameters: { negative_prompt: "", watermark: false } };
  try {
    const response = await fetch(`${BASE_URL}/services/aigc/multimodal-generation/generation`, {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${DASHSCOPE_API_KEY}`, 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (!response.ok) { console.error(`Request failed: ${response.status}${response.statusText}`); return null; }
    const data = await response.json();
    return data.output?.choices?.[0]?.message?.content ?? null;
  } catch (error) { console.error("Request error:", error.message); return null; }
}
Deno.serve(async (req) => {
  try {
    const { image_url, prompt } = await req.json();
    if (!image_url || !prompt) {
      return new Response(JSON.stringify({ error: "Missing image_url or prompt" }), { status: 400, headers: { 'Content-Type': 'application/json' } });
    }
    const result = await callImageEditAPI(image_url, prompt);
    return new Response(JSON.stringify({ message: result }), { headers: { 'Content-Type': 'application/json', 'Connection': 'keep-alive' } });
  } catch (error) {
    console.error("Server error:", error);
    return new Response(JSON.stringify({ error: "Internal server error" }), { status: 500, headers: { 'Content-Type': 'application/json' } });
  }
});

6.2 Secure Secret Management

Configure the DashScope API token as a secret (e.g., BAILIAN_API_KEY) in the Edge Function Secrets page and retrieve it in code via Deno.env.get('BAILIAN_API_KEY'), avoiding hard‑coding or client exposure.

7. Overall Workflow and Principles

Original Image Upload: User selects image → Frontend uploads to Supabase Storage "images" bucket → Signed URL generated.

Invoke Editing: Frontend sends signed URL and prompt to Edge Function → Edge Function calls Qwen Image Edit model → Returns edited image URL.

Write History: Frontend stores original_image_url, edited_image_url, and prompt in edited_images table.

8. Testing and Validation

Prompt example: "Render a 1/7 scale commercial figurine of the character in realistic style, placed on a computer desk, with the screen showing the C4D modeling process, surrounded by BANDAI‑style packaging, brushes, paints, and tools."

9. Conclusion

By combining Qoder, ADB Supabase, and the Qwen Image Edit model, you can create a functional AI‑enabled Flutter app without a traditional backend, achieving a lightweight, agile full‑stack solution suitable for rapid prototyping and production deployment.

References omitted for brevity.