Flutter

Easily integrate the PichaFlow Engine into your Flutter applications. The pichaflow_flutter package provides reactive UI widgets like PichaFlowUploadWidget for picking and uploading assets directly to the edge, including client-side optimization and secure handshake flows.

Installation

Add both pichaflow_flutter and the core pichaflow_dart SDK to your dependencies:

dependencies:
  flutter:
    sdk: flutter
  pichaflow_flutter: ^0.1.0
  pichaflow_dart: ^0.1.0

Quick Start

Create a client instance and pass it to the widget. The widget provides a default upload button or accepts a custom child widget.

import 'package:flutter/material.dart';
import 'package:pichaflow_flutter/pichaflow_flutter.dart';

class ProfileAvatarUpload extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize PichaFlow client
    final client = PichaFlowClient(
      PichaFlowConfig(
        signatureUrl: 'https://your-supabase-project.supabase.co/functions/v1/pichaflow-upload',
      ),
    );

    return Scaffold(
      appBar: AppBar(title: const Text('Upload Avatar')),
      body: Center(
        child: PichaFlowUploadWidget(
          client: client,
          useSecure: true, // Recommended for client-side uploads
          tags: const ['avatar', 'user-profile'],
          onSuccess: (response) {
            print('Uploaded asset URL: ${response.url}');
          },
          onError: (error) {
            print('Upload error: $error');
          },
          onProgress: (progress) {
            print('Upload progress: ${progress.toStringAsFixed(1)}%');
          },
        ),
      ),
    );
  }
}

!CAUTIONAuthentication Check Required: You must secure your backend signatureUrl endpoint with appropriate session or token authentication middleware. If this route is left public and unauthenticated, any user or bot can request valid signatures to upload files directly to your account, risking billing spikes or bucket abuse.

!NOTESignature Response Contract: Your signatureUrl endpoint must return a JSON body with the following fields. The component uses all of them to construct the five X-Picha-* headers sent to the Edge Engine:

{
  "signature":    "<hmac-sha256-hex>",
  "timestamp":    1234567890000,
  "tenantId":     "pf_prj_...",
  "directory":    "products/summer/",
  "maxSize":      "5242880",
  "allowedTypes": "image/webp,image/jpeg"
}

See HTTP API → Client-Side Upload Signatures for the full HMAC construction guide.

Widget Parameters Reference

Callbacks

• onSuccess: Function(UploadResponse) - Triggered when the upload successfully completes.
• onError: Function(String) - Triggered on upload errors or cancellation.
• onProgress: Function(double) - Reports current upload progress percentage.