DEV Community: kanta13jp1

Dart Generics Deep Dive — Bounds, Variance, and Production Patterns

kanta13jp1 — Thu, 30 Apr 2026 15:54:16 +0000

Dart Generics Deep Dive — Bounds, Variance, and Production Patterns

Dart generics go far beyond "a class that takes a type parameter." Type bounds, covariance, reified generics, and multi-parameter types unlock compile-time correctness that runtime checks can't match. This post walks through patterns from real production code.

Basics: Type Parameters and Inference

class Box<T> {
  final T value;
  const Box(this.value);

  Box<R> map<R>(R Function(T) transform) => Box(transform(value));
}

// Inference works as expected
final intBox = Box(42);            // Box<int>
final strBox = Box('hello');       // Box<String>
final doubled = intBox.map((v) => v * 2);  // Box<int>
final asStr  = intBox.map((v) => '$v');    // Box<String>

Type Bounds (`extends`)

// Accept only numeric types
class Calculable<T extends num> {
  final List<T> values;
  const Calculable(this.values);

  T get sum => values.reduce((a, b) => (a + b) as T);
  double get average => values.isEmpty ? 0 : sum / values.length;
  T get max => values.reduce((a, b) => a > b ? a : b);
}

// Accept only Comparable types
class SortedList<T extends Comparable<T>> {
  final List<T> _items;

  SortedList(List<T> items) : _items = List.from(items)..sort();

  T get min => _items.first;
  T get max => _items.last;

  List<T> range(T from, T to) =>
      _items.where((e) => e.compareTo(from) >= 0 && e.compareTo(to) <= 0).toList();
}

final nums = SortedList([5, 2, 8, 1, 9]);
print(nums.min);         // 1
print(nums.range(2, 7)); // [2, 5]

final strs = SortedList(['banana', 'apple', 'cherry']);
print(strs.min); // apple

Multiple Type Parameters

// Either / Result type
sealed class Either<L, R> {
  const Either();

  bool get isLeft  => this is Left<L, R>;
  bool get isRight => this is Right<L, R>;

  T fold<T>(T Function(L) onLeft, T Function(R) onRight) {
    return switch (this) {
      Left(:final value)  => onLeft(value),
      Right(:final value) => onRight(value),
    };
  }

  Either<L, R2> mapRight<R2>(R2 Function(R) transform) {
    return switch (this) {
      Left()              => this as Either<L, R2>,
      Right(:final value) => Right(transform(value)),
    };
  }
}

class Left<L, R>  extends Either<L, R> { final L value; const Left(this.value);  }
class Right<L, R> extends Either<L, R> { final R value; const Right(this.value); }

// API call result
Future<Either<String, User>> fetchUser(String id) async {
  try {
    final data = await supabase.from('users').select().eq('id', id).single();
    return Right(User.fromJson(data));
  } catch (e) {
    return Left(e.toString());
  }
}

final result = await fetchUser('123');
final message = result.fold(
  (error) => 'Error: $error',
  (user)  => 'Welcome, ${user.name}!',
);

The `covariant` Keyword

// Narrowing parameter types in subclasses
abstract class Repository<T> {
  Future<T?> findById(String id);
  Future<void> save(covariant T entity); // concrete subclasses accept only T, not its supertypes
  Future<List<T>> findAll();
}

class TaskRepository extends Repository<Task> {
  @override
  Future<Task?> findById(String id) async {
    final data = await supabase.from('tasks').select().eq('id', id).maybeSingle();
    return data == null ? null : Task.fromJson(data);
  }

  @override
  Future<void> save(Task entity) async {
    await supabase.from('tasks').upsert(entity.toJson());
  }

  @override
  Future<List<Task>> findAll() async {
    final data = await supabase.from('tasks').select();
    return data.map(Task.fromJson).toList();
  }
}

Type Erasure? No — Dart Has Reified Generics

Unlike Java, Dart retains type information at runtime:

void checkType<T>() {
  print(T == int);    // true or false — works at runtime
  print(T == String);
}

// Practical: generic JSON deserialisation
class ApiClient {
  Future<T> get<T>(String path, T Function(Map<String, dynamic>) fromJson) async {
    final response = await http.get(Uri.parse('$baseUrl$path'));
    return fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  }

  Future<List<T>> getList<T>(
    String path,
    T Function(Map<String, dynamic>) fromJson,
  ) async {
    final response = await http.get(Uri.parse('$baseUrl$path'));
    return (jsonDecode(response.body) as List)
        .cast<Map<String, dynamic>>()
        .map(fromJson)
        .toList();
  }
}

final client = ApiClient(baseUrl: 'https://api.example.com');
final user  = await client.get('/users/123', User.fromJson);
final tasks = await client.getList('/tasks', Task.fromJson);

Type-Safe Service Locator

class ServiceLocator {
  final Map<Type, Object> _services = {};

  void register<T extends Object>(T service) => _services[T] = service;

  T get<T extends Object>() {
    final service = _services[T];
    if (service == null) throw StateError('$T not registered');
    return service as T;
  }
}

final locator = ServiceLocator()
  ..register<TaskRepository>(TaskRepository(supabase))
  ..register<UserRepository>(UserRepository(supabase));

final taskRepo = locator.get<TaskRepository>(); // fully type-safe

Generic Widgets in Flutter

class TypedListView<T> extends StatelessWidget {
  const TypedListView({
    super.key,
    required this.items,
    required this.itemBuilder,
    this.emptyWidget = const SizedBox.shrink(),
  });

  final List<T> items;
  final Widget Function(BuildContext, T, int) itemBuilder;
  final Widget emptyWidget;

  @override
  Widget build(BuildContext context) {
    if (items.isEmpty) return emptyWidget;
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (ctx, i) => itemBuilder(ctx, items[i], i),
    );
  }
}

// Usage
TypedListView<Task>(
  items: tasks,
  itemBuilder: (ctx, task, i) => TaskTile(task: task),
  emptyWidget: const Center(child: Text('No tasks')),
)

When to Use What

Feature	Use When
`<T>`	Collections, repositories, widgets
`<T extends X>`	Numeric ops, Comparable, interface contracts
`<L, R>` (multi-param)	Either/Result types, transformation pipelines
`covariant`	Narrowing param types in subclasses
Reified generics	Runtime type dispatch, factory patterns

Master Dart generics and you eliminate the "same logic repeated for every type" problem while letting the type system catch whole categories of bugs at compile time.

Building a type-safe life-management app with Dart + Flutter. Follow the journey → @kanta13jp1

Indie Dev Scaling — Serving 100k Users as a Solo Engineer

kanta13jp1 — Thu, 30 Apr 2026 15:53:30 +0000

Indie Dev Scaling — Serving 100k Users as a Solo Engineer

"I built it — but what if it actually grows?" is the fear every indie developer carries. Serving 100k users as a single engineer is achievable, but only if you bake in just enough scalability from the start — not too early, not too late.

Phase-Based Scaling Strategy

Phase 1: 0–1,000 Users (Validation)

Don't optimise yet — just ship:

// ❌ Premature: CQRS + Event Sourcing on day one
class TaskCommandHandler {
  final TaskCommandBus _bus;
  Future<void> handle(CreateTaskCommand cmd) async { ... }
}

// ✅ Start simple
class TaskRepository {
  Future<void> createTask(String title) async {
    await supabase.from('tasks').insert({'title': title});
  }
}

Checklist:

Supabase free tier covers you (500 MB DB / 2 GB bandwidth)
Firebase Hosting free tier covers you
Monitoring: Supabase Dashboard + Firebase Console only

Phase 2: 1,000–10,000 Users (PMF Confirmed)

Bottlenecks start showing. Address them:

-- ❌ N+1: SELECT tasks, then loop SELECT project for each
-- ✅ JOIN everything in one query
SELECT
  t.*,
  p.name  AS project_name,
  p.color AS project_color
FROM tasks t
LEFT JOIN projects p ON t.project_id = p.id
WHERE t.user_id = $1
ORDER BY t.created_at DESC;

CREATE INDEX idx_tasks_user_created ON tasks(user_id, created_at DESC);
CREATE INDEX idx_tasks_project ON tasks(project_id) WHERE project_id IS NOT NULL;

Phase 3: 10,000–100,000 Users (Scaling)

Time to revisit infrastructure:

// supabase/functions/process-heavy-task/index.ts
Deno.serve(async (req) => {
  const { taskId } = await req.json();

  // Kick off async processing, return immediately
  await supabase.rpc('process_task_async', { task_id: taskId });

  return new Response(
    JSON.stringify({ status: 'processing', taskId }),
    { status: 202 }
  );
});

Database Optimisation

Connection Pooling

Supabase bundles pgBouncer — configure it correctly for serverless:

// .env
SUPABASE_DB_URL=postgresql://...?pgbouncer=true&connection_limit=1
// connection_limit=1 prevents connection exhaustion under concurrent Edge Function invocations

Read Replicas

// Direct read-heavy analytics queries to the replica (Supabase Pro+)
const readOnlyClient = createClient(
  Deno.env.get('SUPABASE_URL')!,
  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
  { global: { headers: { 'x-read-replica': 'true' } } }
);

Table Partitioning

-- Partition high-volume event logs by month
CREATE TABLE activity_logs (
  id         UUID DEFAULT gen_random_uuid(),
  user_id    UUID NOT NULL,
  action     TEXT NOT NULL,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
) PARTITION BY RANGE (created_at);

CREATE TABLE activity_logs_2026_01
PARTITION OF activity_logs
FOR VALUES FROM ('2026-01-01') TO ('2026-02-01');

-- Automate with pg_partman for older partition pruning

AI-Powered Monitoring

# .github/workflows/infra-health-check.yml
name: Infra Health Check
on:
  schedule:
    - cron: '0 * * * *'
  workflow_dispatch:

jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - name: Check Supabase health
        run: |
          STATUS=$(curl -s "$SUPABASE_URL/health" | jq -r '.status')
          if [ "$STATUS" != "ok" ]; then
            echo "::error::Supabase health check failed: $STATUS"
          fi

Caching Strategy

Client-Side Cache in Flutter

class CachedTaskRepository {
  final Map<String, List<Task>> _cache = {};
  final Map<String, DateTime> _cacheTime = {};
  static const _ttl = Duration(minutes: 5);

  Future<List<Task>> getTasks(String userId) async {
    final key = 'tasks_$userId';
    final cached = _cache[key];
    final cacheAt = _cacheTime[key];

    if (cached != null &&
        cacheAt != null &&
        DateTime.now().difference(cacheAt) < _ttl) {
      return cached;
    }

    final data = await supabase
        .from('tasks')
        .select()
        .order('created_at', ascending: false);

    _cache[key] = data.map(Task.fromJson).toList();
    _cacheTime[key] = DateTime.now();
    return _cache[key]!;
  }

  void invalidate(String userId) {
    _cache.remove('tasks_$userId');
    _cacheTime.remove('tasks_$userId');
  }
}

Server-Side Materialised Views

-- Cache expensive aggregations
CREATE MATERIALIZED VIEW user_stats AS
SELECT
  user_id,
  COUNT(*)                                                AS task_count,
  COUNT(*) FILTER (WHERE completed_at IS NOT NULL)       AS completed_count,
  MAX(created_at)                                         AS last_activity
FROM tasks
GROUP BY user_id;

CREATE UNIQUE INDEX idx_user_stats_user_id ON user_stats(user_id);

-- Refresh hourly from a GHA cron
REFRESH MATERIALIZED VIEW CONCURRENTLY user_stats;

Cost Management

Staged Plan Upgrades

Phase 1 (0–1k users):  Supabase Free + Firebase Free    → $0/month
Phase 2 (1k–10k):      Supabase Pro ($25) + Firebase    → ~$30/month
Phase 3 (10k–100k):    Supabase Pro + Add-ons + Blaze   → $100–300/month
Phase 4 (100k+):       Supabase Team ($599+) + Infra    → $600+/month

Budget Alerts

# Firebase Budget Alert (GCP Console)
# Monthly budget: $100
# Alert at: 50%, 90%, 100%

# Supabase Usage Alert (Dashboard → Settings → Billing)
# DB size: alert at 80%
# API requests: alert at 80%

The Solo Scaling Rulebook

✅ Keep it simple until you have evidence of a bottleneck
✅ Prevent N+1 queries from day one (JOINs + indexes)
✅ Cache on both client and server
✅ Delegate monitoring to AI (GHA + Claude) so you can focus on product
✅ Grow costs in stages — never over-provision
✅ Don't scale infrastructure before monetisation confirms the need

100k users as a solo developer is not a fantasy — it is an engineering discipline.

Solo-building an AI life-management app that replaces 21 SaaS tools, scaling with Flutter + Supabase + GHA. Follow along → @kanta13jp1

Supabase RLS Deep Dive — Multi-Tenant Design, Dynamic Policies, and Performance

kanta13jp1 — Thu, 30 Apr 2026 15:52:14 +0000

Supabase RLS Deep Dive — Multi-Tenant Design, Dynamic Policies, and Performance

Row Level Security (RLS) is the foundation of safe multi-user Supabase apps. This post goes beyond "just enable it" — covering multi-tenant architecture, dynamic policies, JWT claims, and performance tuning from a production codebase.

RLS Basics

-- Enable RLS on the table
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- SELECT: users see only their own rows
CREATE POLICY "users_own_tasks_select"
ON tasks FOR SELECT
USING (auth.uid() = user_id);

-- INSERT: enforce correct user_id
CREATE POLICY "users_own_tasks_insert"
ON tasks FOR INSERT
WITH CHECK (auth.uid() = user_id);

-- UPDATE
CREATE POLICY "users_own_tasks_update"
ON tasks FOR UPDATE
USING (auth.uid() = user_id)
WITH CHECK (auth.uid() = user_id);

-- DELETE
CREATE POLICY "users_own_tasks_delete"
ON tasks FOR DELETE
USING (auth.uid() = user_id);

Multi-Tenant Architecture

Team-Based Access Control

CREATE TABLE team_members (
  team_id  UUID REFERENCES teams(id),
  user_id  UUID REFERENCES auth.users(id),
  role     TEXT CHECK (role IN ('owner', 'admin', 'member', 'viewer')),
  PRIMARY KEY (team_id, user_id)
);

-- Team members can read the team's projects
CREATE POLICY "team_members_can_access_projects"
ON projects FOR SELECT
USING (
  EXISTS (
    SELECT 1
    FROM team_members tm
    WHERE tm.team_id = projects.team_id
      AND tm.user_id = auth.uid()
  )
);

-- Only admins and owners can delete
CREATE POLICY "team_admins_can_delete_projects"
ON projects FOR DELETE
USING (
  EXISTS (
    SELECT 1
    FROM team_members tm
    WHERE tm.team_id = projects.team_id
      AND tm.user_id = auth.uid()
      AND tm.role IN ('owner', 'admin')
  )
);

JWT Custom Claims for Roles

Embed roles in the JWT so policies can read them without a DB round-trip:

CREATE POLICY "admin_full_access"
ON admin_logs FOR ALL
USING (
  (auth.jwt() ->> 'user_role') = 'admin'
);

Inject the claim via a Supabase Auth Hook:

CREATE OR REPLACE FUNCTION public.custom_access_token_hook(event JSONB)
RETURNS JSONB
LANGUAGE plpgsql
AS $$
DECLARE
  claims    JSONB;
  user_role TEXT;
BEGIN
  SELECT role INTO user_role
  FROM user_profiles
  WHERE id = (event->>'user_id')::UUID;

  claims := event->'claims';
  claims := jsonb_set(claims, '{user_role}', to_jsonb(COALESCE(user_role, 'member')));

  RETURN jsonb_set(event, '{claims}', claims);
END;
$$;

Dynamic Policies

Time-Based Access

-- Posts become public after published_at; authors always see their own
CREATE POLICY "published_posts_are_public"
ON blog_posts FOR SELECT
USING (
  published_at <= NOW()
  OR auth.uid() = author_id
);

Hierarchical Resource Ownership

-- Comments inherit visibility from their parent post
CREATE POLICY "comments_visible_with_post"
ON comments FOR SELECT
USING (
  EXISTS (
    SELECT 1
    FROM blog_posts bp
    WHERE bp.id = comments.post_id
      AND (bp.published_at <= NOW() OR bp.author_id = auth.uid())
  )
);

Subscription-Gated Content

CREATE POLICY "premium_content_access"
ON premium_courses FOR SELECT
USING (
  NOT is_premium
  OR EXISTS (
    SELECT 1
    FROM user_subscriptions us
    WHERE us.user_id = auth.uid()
      AND us.status = 'active'
      AND us.expires_at > NOW()
  )
);

Performance Optimisation

Index Strategy

Always index the columns referenced in RLS policies:

CREATE INDEX idx_tasks_user_id ON tasks(user_id);
CREATE INDEX idx_projects_team_id ON projects(team_id);

-- Covering index for team membership lookups
CREATE INDEX idx_team_members_user_team
ON team_members(user_id, team_id, role);

-- Partial index: only active subscriptions
CREATE INDEX idx_active_subscriptions
ON user_subscriptions(user_id)
WHERE status = 'active' AND expires_at > NOW();

Extract Policies into `SECURITY DEFINER` Functions

Complex EXISTS subqueries can be pulled into stable functions that the planner can cache:

CREATE OR REPLACE FUNCTION is_team_member(p_team_id UUID, p_role TEXT DEFAULT NULL)
RETURNS BOOLEAN
LANGUAGE sql
STABLE
SECURITY DEFINER
AS $$
  SELECT EXISTS (
    SELECT 1
    FROM team_members
    WHERE team_id = p_team_id
      AND user_id = auth.uid()
      AND (p_role IS NULL OR role = p_role)
  );
$$;

CREATE POLICY "team_member_access"
ON projects FOR SELECT
USING (is_team_member(team_id));

CREATE POLICY "team_admin_delete"
ON projects FOR DELETE
USING (is_team_member(team_id, 'admin') OR is_team_member(team_id, 'owner'));

Debugging RLS

Test as a Specific User

SET LOCAL role TO authenticated;
SET LOCAL request.jwt.claims TO '{"sub": "user-uuid-here"}';
SELECT * FROM tasks;  -- RLS applied, you see only that user's rows

EXPLAIN ANALYZE SELECT * FROM projects;  -- check policy cost

Inspect Policies

SELECT
  tablename,
  policyname,
  cmd,
  qual,
  with_check
FROM pg_policies
WHERE schemaname = 'public'
ORDER BY tablename, policyname;

Flutter Client

RLS is transparent from the client — write queries normally:

class TaskRepository {
  final SupabaseClient _client;
  TaskRepository(this._client);

  // RLS returns only the authenticated user's tasks
  Future<List<Task>> getTasks() async {
    final data = await _client
        .from('tasks')
        .select()
        .order('created_at', ascending: false);
    return data.map(Task.fromJson).toList();
  }

  Future<void> createTask(String title) async {
    await _client.from('tasks').insert({
      'title': title,
      'user_id': _client.auth.currentUser!.id,
    });
  }
}

Summary

Topic	Best Practice
Policy granularity	Separate SELECT / INSERT / UPDATE / DELETE policies
Multi-tenant	`team_members` table + `EXISTS` subqueries
Performance	Index RLS columns; extract to `SECURITY DEFINER` functions
Debugging	`SET LOCAL` to impersonate a user in psql
JWT claims	`custom_access_token` hook for role embedding

Correctly designed RLS means access control gaps in the application layer can't reach your data — the database enforces it.

Running a multi-user life-management app on Supabase RLS in production. Follow the build → @kanta13jp1

Flutter Web in Production — SEO, Core Web Vitals, and PWA at Scale

kanta13jp1 — Thu, 30 Apr 2026 15:51:10 +0000

Flutter Web in Production — SEO, Core Web Vitals, and PWA at Scale

Flutter Web has evolved well beyond "Flutter running in a browser." It now meets serious web requirements: SEO, Core Web Vitals, and full PWA support. This post covers production-grade techniques from a real live app.

Choosing a Rendering Mode

Flutter Web ships with multiple rendering backends.

# flutter build web --web-renderer canvaskit  (default)
# flutter build web --web-renderer html         (legacy)
# flutter build web --wasm                      (WebAssembly / Dart 3.4+)

Mode	Render Quality	Initial Load	SEO	Best For
CanvasKit	★★★	Heavy (~2 MB)	❌	Graphics-heavy apps
HTML	★★	Light	△	Content-first sites
Wasm	★★★★	Medium	❌	High-performance apps

SEO: Meta Tags and Structured Data

Manage dynamic meta tags in web/index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- OGP / Twitter Card -->
  <meta property="og:title" content="Jibun K.K. — Life Management">
  <meta property="og:description" content="Replace 21 SaaS tools with one app">
  <meta property="og:image" content="https://example.com/og-image.png">
  <meta name="twitter:card" content="summary_large_image">

  <!-- Structured Data (JSON-LD) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "Jibun K.K.",
    "description": "AI life-management app",
    "applicationCategory": "ProductivityApplication"
  }
  </script>
</head>

Updating from Dart at runtime:

import 'dart:js_interop';

@JS('document.title')
external set documentTitle(String value);

void updatePageTitle(String title) {
  documentTitle = title;
  document.querySelector('meta[property="og:title"]')
      ?.setAttribute('content', title);
}

Core Web Vitals Optimization

LCP — Largest Contentful Paint

class LazyImage extends StatefulWidget {
  const LazyImage({super.key, required this.src, required this.alt});
  final String src;
  final String alt;

  @override
  State<LazyImage> createState() => _LazyImageState();
}

class _LazyImageState extends State<LazyImage> {
  bool _visible = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() => _visible = true);
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
      opacity: _visible ? 1.0 : 0.0,
      duration: const Duration(milliseconds: 300),
      child: Image.network(
        widget.src,
        semanticLabel: widget.alt,
        cacheWidth: 800,
      ),
    );
  }
}

CLS — Cumulative Layout Shift Prevention

class AspectRatioImage extends StatelessWidget {
  const AspectRatioImage({
    super.key,
    required this.src,
    this.aspectRatio = 16 / 9,
  });

  final String src;
  final double aspectRatio;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: aspectRatio,
      child: Image.network(src, fit: BoxFit.cover),
    );
  }
}

INP — Offloading to Isolates

import 'package:flutter/foundation.dart';

Future<List<SearchResult>> searchInBackground(String query) async {
  return compute(_heavySearch, query);
}

List<SearchResult> _heavySearch(String query) {
  return largeDataset
      .where((item) => item.matches(query))
      .toList();
}

PWA Configuration

Optimised manifest.json

{
  "name": "Jibun K.K.",
  "short_name": "Jibun",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1a1a2e",
  "theme_color": "#f97316",
  "icons": [
    {
      "src": "icons/Icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/Icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}

Service Worker — Offline Support

Extend web/flutter_service_worker.js with a Stale-While-Revalidate strategy for images:

self.addEventListener('fetch', (event) => {
  if (event.request.destination === 'image') {
    event.respondWith(
      caches.open('images-v1').then(async (cache) => {
        const cached = await cache.match(event.request);
        const networkFetch = fetch(event.request).then((response) => {
          cache.put(event.request, response.clone());
          return response;
        });
        return cached || networkFetch;
      })
    );
  }
});

URL Strategy and Deep Links

final _router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (_, __) => const HomePage()),
    GoRoute(
      path: '/tasks/:taskId',
      builder: (context, state) {
        final taskId = state.pathParameters['taskId']!;
        return TaskDetailPage(taskId: taskId);
      },
    ),
    GoRoute(
      path: '/ai-university/:providerId',
      builder: (context, state) {
        return AiProviderPage(
          providerId: state.pathParameters['providerId']!,
        );
      },
    ),
  ],
);

void main() {
  usePathUrlStrategy(); // removes the # from URLs
  runApp(const MyApp());
}

Firebase Hosting Configuration

{
  "hosting": {
    "public": "build/web",
    "rewrites": [{ "source": "**", "destination": "/index.html" }],
    "headers": [
      {
        "source": "**/*.@(js|css|wasm)",
        "headers": [
          { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
        ]
      },
      {
        "source": "index.html",
        "headers": [
          { "key": "Cache-Control", "value": "no-cache" }
        ]
      }
    ]
  }
}

Lighthouse Score Checklist

✅ Performance
  - usePathUrlStrategy()
  - --release build
  - Tree-shake unused packages
  - Convert images to WebP
  - Deferred loading for heavy routes

✅ Accessibility
  - Semantics widgets for ARIA labels
  - FocusTraversalGroup for keyboard navigation
  - Colour contrast ratio ≥ 4.5:1

✅ Best Practices
  - HTTPS enforced
  - CSP headers configured

✅ SEO
  - meta description on every route
  - robots.txt + sitemap.xml

Summary

Running Flutter Web in production requires understanding both the framework and web-platform-specific requirements: SEO, Core Web Vitals, and PWA. Combine the techniques here and you'll routinely hit Lighthouse 90+ on a real production app.

Building a life-management app that replaces 21 SaaS tools with Flutter Web + Firebase Hosting. Follow the journey → @kanta13jp1

Dart Extension Types — Zero-Cost Wrappers and Type-Safe Domain Modeling

kanta13jp1 — Wed, 29 Apr 2026 13:57:51 +0000

Dart Extension Types — Zero-Cost Wrappers and Type-Safe Domain Modeling

Introduced in Dart 3.3, Extension Types let you wrap an existing type with zero runtime overhead while gaining domain-specific type safety. More powerful than typedef, cheaper than class.

What Are Extension Types?

An Extension Type is identical to its wrapped type at runtime, but treated as a distinct type by the static type checker.

// ❌ Type-unsafe: wrong argument order compiles fine
void transferMoney(int from, int to, int amount) { ... }
transferMoney(userId, accountId, 1000); // silently wrong

// ✅ Extension Types prevent this at compile time
extension type UserId(int value) {}
extension type AccountId(int value) {}
extension type Money(int cents) {}

void transferMoney(UserId from, AccountId to, Money amount) { ... }
transferMoney(UserId(123), AccountId(456), Money(1000)); // only correct order compiles

Zero runtime overhead — UserId(123) has the same memory representation as the int 123.

Basic Syntax

extension type Celsius(double value) {
  Fahrenheit toFahrenheit() => Fahrenheit(value * 9/5 + 32);

  Celsius operator +(Celsius other) => Celsius(value + other.value);

  bool get isFreezing => value <= 0;
}

extension type Fahrenheit(double value) {
  Celsius toCelsius() => Celsius((value - 32) * 5/9);
}

void main() {
  const temp = Celsius(100.0);
  print(temp.toFahrenheit().value); // 212.0
  print(temp.isFreezing); // false

  // ❌ Compile error: Celsius and Fahrenheit are incompatible types
  // Celsius c = Fahrenheit(32.0);
}

`implements` to Expose the Underlying Type's API

By default, Extension Types don't expose the wrapped type's methods.

extension type SafeString(String value) implements String {
  // implements String → all String methods are accessible

  bool get isValidEmail => RegExp(r'^[\w-\.]+@[\w-]+\.[a-z]{2,}$')
      .hasMatch(value);
}

void main() {
  const email = SafeString('user@example.com');
  print(email.length);        // ✅ String.length available
  print(email.toUpperCase()); // ✅ String.toUpperCase() available
  print(email.isValidEmail);  // ✅ custom method
}

Domain Modeling in Practice

Separating ID Types

extension type UserId(String value) {
  factory UserId.generate() => UserId(DateTime.now().millisecondsSinceEpoch.toString());

  @override
  String toString() => 'User:$value';
}

extension type PostId(String value) {
  @override
  String toString() => 'Post:$value';
}

// Type-safe Supabase queries
class UserRepository {
  Future<Map<String, dynamic>?> findById(UserId id) async {
    // Passing a PostId is caught at compile time
    final response = await supabase
        .from('users')
        .select()
        .eq('id', id.value)
        .maybeSingle();
    return response;
  }
}

Type-Safe Money Representation

extension type Cents(int value) {
  Cents withTax([double rate = 0.10]) => Cents((value * (1 + rate)).round());

  String get formatted {
    final dollars = value ~/ 100;
    final cents = value % 100;
    return '\$${dollars.toString().replaceAllMapped(
      RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
      (m) => '${m[1]},',
    )}.${cents.toString().padLeft(2, '0')}';
  }

  Cents operator +(Cents other) => Cents(value + other.value);
  Cents operator *(int factor) => Cents(value * factor);
  bool operator <(Cents other) => value < other.value;
  bool operator >(Cents other) => value > other.value;
}

void main() {
  const price = Cents(1000); // $10.00
  print(price.withTax().formatted); // $11.00

  const cart = [Cents(300), Cents(500), Cents(200)];
  final total = cart.reduce((a, b) => a + b);
  print(total.formatted); // $10.00
}

Validated String Types

extension type ValidEmail(String value) {
  static ValidEmail? tryParse(String input) {
    final regex = RegExp(r'^[\w-\.]+@[\w-]+\.[a-z]{2,}$');
    return regex.hasMatch(input) ? ValidEmail(input) : null;
  }

  String get domain => value.split('@').last;
  String get localPart => value.split('@').first;
}

extension type Slug(String value) {
  static Slug fromTitle(String title) {
    final slug = title
        .toLowerCase()
        .replaceAll(RegExp(r'[^\w\s-]'), '')
        .replaceAll(RegExp(r'\s+'), '-')
        .replaceAll(RegExp(r'-+'), '-');
    return Slug(slug);
  }
}

Application in Flutter Widgets

extension type AppColor(Color value) {
  static const primary = AppColor(Color(0xFF6200EE));
  static const secondary = AppColor(Color(0xFF03DAC5));
  static const error = AppColor(Color(0xFFB00020));

  AppColor withOpacity(double opacity) =>
      AppColor(value.withOpacity(opacity));
}

class PrimaryButton extends StatelessWidget {
  const PrimaryButton({
    super.key,
    required this.label,
    required this.onPressed,
    this.backgroundColor = AppColor.primary,
  });

  final String label;
  final VoidCallback onPressed;
  final AppColor backgroundColor;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: backgroundColor.value,
      ),
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

Combining with Sealed Classes

sealed class ApiResponse<T> {
  const ApiResponse();
}

extension type ApiData<T>(T data) implements ApiResponse<T> {}
extension type ApiError(String message) implements ApiResponse<Never> {}
extension type ApiLoading(double? progress) implements ApiResponse<Never> {}

Widget buildFromResponse<T>(ApiResponse<T> response, Widget Function(T) builder) {
  return switch (response) {
    ApiData(:final data) => builder(data),
    ApiError(:final message) => ErrorWidget(message),
    ApiLoading(:final progress) => LinearProgressIndicator(value: progress),
  };
}

Extension Types vs typedef

// typedef: just an alias — treated as the same type
typedef UserId = String;
typedef PostId = String;

void example(UserId id) {}
PostId postId = 'post-123';
example(postId); // ✅ compiles (both are String)

// Extension Type: genuinely distinct types
extension type ExtUserId(String value) {}
extension type ExtPostId(String value) {}

void goodExample(ExtUserId id) {}
ExtPostId extPostId = ExtPostId('post-123');
// goodExample(extPostId); // ❌ compile error

When to Use Extension Types

Use Case	Extension Type
Separating ID types	✅ `UserId`, `PostId`, `OrderId`
Unit-bearing numbers	✅ `Celsius`, `Cents`, `Meters`
Validated strings	✅ `ValidEmail`, `Slug`, `PhoneNumber`
Design tokens	✅ `AppColor`, `SpacingToken`
Zero runtime cost required	✅ no overhead

Extension Types are a surgical cure for the Primitive Obsession antipattern — using raw String and int for everything. Let the type system express your domain model.

Building a life-management app that replaces 21 competing SaaS tools with Flutter + Supabase. Follow the journey → @kanta13jp1

Indie Dev Product-Market Fit — User Interviews and Feedback Loops in Practice

kanta13jp1 — Wed, 29 Apr 2026 13:56:47 +0000

Indie Dev Product-Market Fit — User Interviews and Feedback Loops in Practice

"Built it but nobody uses it" is the most common trap for indie developers. Achieving Product-Market Fit (PMF) requires understanding users before writing code, and continuously collecting feedback after launch.

What Is PMF?

Sean Ellis defined PMF as "the state where 40%+ of users say they'd be very disappointed if they could no longer use your product."

For indie developers, a more actionable goal is: find 10 people who use it every day and would genuinely miss it.

PMF Early Signals:
✅ Users spontaneously refer others
✅ Requests shift from new features to stability
✅ Churned users return on their own
✅ Multiple users say "I can't do X without this"

Designing User Interviews

Good vs. Bad Questions

❌ Bad questions (leading, hypothetical):
"Do you think this dashboard feature is useful?"
"Would you use it if we added feature X?"

✅ Good questions (past behavior, specific):
"When did you last run into this kind of problem?"
"How did you solve it at the time?"
"What frustrates you most about the tools you currently use?"

Jobs-to-be-Done Framework

Users "hire" products to do a job:

Situation (When): When I'm preparing the weekly report
Motivation (I want): Without gathering data from multiple tools
Expected Outcome (So that): I can pull the numbers for my manager in 30 minutes

Design your questions around this frame:

Sample Interview Script:
1. "Walk me through your current workflow step by step."
2. "Which part of that process takes the most time?"
3. "In the past month, can you describe a specific situation where this problem caused you pain?"
4. "What tools or workarounds do you currently use?"
5. "What would your ideal solution look like? Are there existing tools that come close?"

Finding Interview Participants

# Where to find users for interviews
- Search Twitter/X for problem-related tweets → DM for participation
- Post a recruit thread in relevant Reddit communities
- Email your first 100 users (they're your most valuable signal)
- Comment sections on Product Hunt / Hacker News
- Discord / Slack communities related to your niche

Run 30–45 minute sessions, ask for recording permission. 5–10 interviews reveal clear patterns.

Automating the Feedback Loop

In-App Feedback Collection

// NPS survey implementation in Flutter
class NpsSurvey extends StatefulWidget {
  const NpsSurvey({super.key, required this.onSubmit});
  final void Function(int score, String? reason) onSubmit;

  @override
  State<NpsSurvey> createState() => _NpsSurveyState();
}

class _NpsSurveyState extends State<NpsSurvey> {
  int? _score;
  final _reasonController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'How likely are you to recommend this app to a friend?',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(11, (i) => _ScoreButton(
            score: i,
            isSelected: _score == i,
            onTap: () => setState(() => _score = i),
          )),
        ),
        if (_score != null) ...[
          const SizedBox(height: 12),
          TextField(
            controller: _reasonController,
            decoration: InputDecoration(
              hintText: _score! >= 9
                  ? 'What do you like most about it?'
                  : 'What could we improve?',
            ),
            maxLines: 3,
          ),
          const SizedBox(height: 8),
          ElevatedButton(
            onPressed: () => widget.onSubmit(_score!, _reasonController.text),
            child: const Text('Submit'),
          ),
        ],
      ],
    );
  }
}

Auto-Classifying Feedback

// supabase/functions/classify-feedback/index.ts
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

const CATEGORIES = {
  bug: ['bug', 'error', 'crash', 'broken', 'not working', 'fails'],
  feature: ['feature', 'wish', 'want', 'add', 'could you', 'would be great'],
  ux: ['confusing', 'complicated', 'hard to', 'unclear', 'difficult'],
  praise: ['love', 'great', 'perfect', 'amazing', 'helpful', 'awesome'],
};

function classify(text: string): string {
  const lower = text.toLowerCase();
  for (const [category, keywords] of Object.entries(CATEGORIES)) {
    if (keywords.some(kw => lower.includes(kw))) return category;
  }
  return 'other';
}

Deno.serve(async (req) => {
  const { feedbackId, text } = await req.json();
  const category = classify(text);

  const supabase = createClient(
    Deno.env.get('SUPABASE_URL')!,
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
  );

  await supabase
    .from('feedback')
    .update({ category })
    .eq('id', feedbackId);

  return Response.json({ category });
});

Feedback Dashboard in Supabase

-- Weekly feedback summary view
CREATE VIEW feedback_weekly_summary AS
SELECT
  date_trunc('week', created_at) AS week,
  category,
  count(*) AS count,
  avg(nps_score) FILTER (WHERE nps_score IS NOT NULL) AS avg_nps,
  count(*) FILTER (WHERE nps_score >= 9) AS promoters,
  count(*) FILTER (WHERE nps_score <= 6) AS detractors
FROM feedback
GROUP BY 1, 2
ORDER BY 1 DESC, 3 DESC;

Quantifying PMF Signals

Retention Curve Analysis

True PMF shows up as a retention curve that flattens horizontally.

% retained
100 |
 80 |  \
 60 |    \
 40 |      \_____________________  ← Has PMF (curve flattens)
 20 |
  0 |        \___________________  ← No PMF (converges to zero)
    +--+--+--+--+--+--+--+--+--→ weeks after signup

-- Cohort retention calculation in Supabase
WITH cohort AS (
  SELECT
    user_id,
    date_trunc('week', created_at) AS cohort_week
  FROM users
),
activity AS (
  SELECT
    user_id,
    date_trunc('week', created_at) AS activity_week
  FROM user_events
)
SELECT
  c.cohort_week,
  EXTRACT(EPOCH FROM (a.activity_week - c.cohort_week)) / 604800 AS weeks_since_signup,
  count(DISTINCT a.user_id)::float / count(DISTINCT c.user_id) AS retention_rate
FROM cohort c
LEFT JOIN activity a USING (user_id)
GROUP BY 1, 2
ORDER BY 1, 2;

Setting Your North Star Metric

Example North Star Metrics:
- Note app: Weekly active notes created
- Todo app: Weekly tasks completed
- SaaS: Monthly active users × core feature usage rate

The North Star measures evidence that users got value. Session count and pageviews are vanity metrics.

Behavior Changes Before vs. After PMF

Pre-PMF: Discovery Phase

Do:
✅ Run 2+ user interviews per week
✅ Remove features, don't add them
✅ Focus on one narrow user segment
✅ Support users manually (Concierge MVP)

Don't:
❌ Think about scaling
❌ Invest in paid marketing
❌ Try to serve multiple personas

Post-PMF: Optimization Phase

Do:
✅ Identify your growth engine (Paid/Viral/Sticky)
✅ Improve onboarding (increase activation rate)
✅ Run pricing experiments
✅ Automate and scale

Key Takeaways

PMF isn't "build it and they will come" — it's a continuous process of verifying that you're genuinely solving someone's problem.

Validate the problem with interviews → understand the problem before building the solution
Automate feedback loops → continuous signal collection without manual effort
Watch the retention curve → the most honest PMF signal
Set a North Star Metric → connect usage to business outcomes

Scaling before PMF means scaling failure. Find 10 people who love what you built first.

Building a life-management app that replaces 21 competing SaaS tools with Flutter + Supabase. Follow the journey → @kanta13jp1

Supabase Migrations Advanced — Zero-Downtime Schema Changes in Production

kanta13jp1 — Wed, 29 Apr 2026 13:55:36 +0000

Supabase Migrations Advanced — Zero-Downtime Schema Changes in Production

Schema changes on a live PostgreSQL database demand care. Lock contention, full-table scans, and irreversible operations can bring your service down. This article covers Supabase migration best practices from a zero-downtime perspective.

Supabase Migration Basics

Supabase executes SQL files in supabase/migrations/ sequentially by timestamp.

supabase/migrations/
  20260101000000_create_users.sql
  20260102000000_add_profile_fields.sql
  20260103000000_create_posts.sql

The timestamp determines execution order. Applied migrations are never re-run.

# Apply locally
supabase db push

# Apply to production
supabase db push --db-url postgresql://...

Safe Column Addition

❌ Dangerous: Adding NOT NULL + DEFAULT simultaneously

-- Acquires full table lock and rewrites all rows
ALTER TABLE posts ADD COLUMN view_count INTEGER NOT NULL DEFAULT 0;

On PostgreSQL < 12, adding NOT NULL DEFAULT rewrites every row in the table.

✅ Safe: Staged column addition

-- Step 1: Add column as nullable (instant)
ALTER TABLE posts ADD COLUMN view_count INTEGER;

-- Step 2: Backfill in batches (background)
UPDATE posts SET view_count = 0
WHERE view_count IS NULL AND id BETWEEN 1 AND 10000;
-- ... repeat for all batches

-- Step 3: Add NOT NULL constraint
ALTER TABLE posts ALTER COLUMN view_count SET NOT NULL;
ALTER TABLE posts ALTER COLUMN view_count SET DEFAULT 0;

PostgreSQL 11+ handles ADD COLUMN ... DEFAULT instantly, but NOT NULL enforcement still requires caution.

Zero-Downtime Index Creation

Standard CREATE INDEX acquires a shared lock on the table.

-- ❌ Blocks writes (minutes to hours on large tables)
CREATE INDEX idx_posts_user_id ON posts(user_id);

-- ✅ Zero-downtime (CONCURRENTLY)
CREATE INDEX CONCURRENTLY idx_posts_user_id ON posts(user_id);

CONCURRENTLY takes about 2× longer but never blocks writes. Always use it in Supabase migrations.

-- Inside a migration file
CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_posts_created_at
  ON posts(created_at DESC);

Safe Foreign Key Addition

-- ❌ Table lock + full scan to validate all existing rows
ALTER TABLE comments ADD CONSTRAINT fk_comments_posts
  FOREIGN KEY (post_id) REFERENCES posts(id);

-- ✅ Two-step safe addition
-- Step 1: Add constraint without validating existing rows
ALTER TABLE comments ADD CONSTRAINT fk_comments_posts
  FOREIGN KEY (post_id) REFERENCES posts(id)
  NOT VALID;

-- Step 2: Validate in background (only ShareUpdateExclusiveLock)
ALTER TABLE comments VALIDATE CONSTRAINT fk_comments_posts;

Column Type Changes

Direct type changes almost always lock the table. The safe pattern uses a parallel new column.

-- ❌ Direct type change acquires full lock
ALTER TABLE events ALTER COLUMN metadata TYPE jsonb USING metadata::jsonb;

-- ✅ Staged migration with dual-column approach
-- Step 1: Add new column
ALTER TABLE events ADD COLUMN metadata_jsonb jsonb;

-- Step 2: Keep in sync with a trigger
CREATE OR REPLACE FUNCTION sync_metadata()
RETURNS TRIGGER AS $$
BEGIN
  NEW.metadata_jsonb = NEW.metadata::jsonb;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER sync_metadata_trigger
  BEFORE INSERT OR UPDATE ON events
  FOR EACH ROW EXECUTE FUNCTION sync_metadata();

-- Step 3: Backfill existing rows
UPDATE events SET metadata_jsonb = metadata::jsonb WHERE metadata_jsonb IS NULL;

-- Step 4: After switching the app to the new column, drop old
ALTER TABLE events DROP COLUMN metadata;
ALTER TABLE events RENAME COLUMN metadata_jsonb TO metadata;

Rollback Strategy

Supabase migrations have no built-in rollback files. Production rollbacks are manual SQL.

-- down migration (managed separately)
-- 20260103000000_create_posts_down.sql
DROP TABLE IF EXISTS posts;

A safe production pattern uses Feature Flags:

-- Add a feature flag column
ALTER TABLE users ADD COLUMN IF NOT EXISTS new_dashboard_enabled BOOLEAN DEFAULT FALSE;

-- Emergency rollback
ALTER TABLE users DROP COLUMN IF EXISTS new_dashboard_enabled;

Automated Migration Safety Checks in CI/CD

# .github/workflows/migration-check.yml
name: Migration Safety Check
on: [pull_request]

jobs:
  migration-lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install squawk
        run: pip install squawk-cli
      - name: Lint migrations
        run: |
          for f in supabase/migrations/*.sql; do
            echo "Checking $f"
            squawk "$f"
          done

Squawk detects dangerous patterns including:

ADD COLUMN NOT NULL DEFAULT (older PG versions)
Missing CONCURRENTLY on index creation
Unguarded DROP TABLE / DROP COLUMN

Row Level Security Migration Order

-- RLS activation is instant, but enabling it before policies exist blocks all access
-- ✅ Correct order: define policies FIRST, then enable RLS
CREATE POLICY "Users can read own data"
  ON profiles FOR SELECT
  USING (auth.uid() = user_id);

CREATE POLICY "Users can update own data"
  ON profiles FOR UPDATE
  USING (auth.uid() = user_id);

-- Enable RLS only after policies are defined
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

Estimating Migration Impact

-- Estimate migration duration
EXPLAIN (ANALYZE, BUFFERS)
SELECT count(*) FROM posts WHERE view_count IS NULL;

-- Check table sizes
SELECT
  schemaname,
  tablename,
  pg_size_pretty(pg_total_relation_size(schemaname||'.'||tablename)) AS total_size,
  pg_size_pretty(pg_relation_size(schemaname||'.'||tablename)) AS table_size,
  pg_size_pretty(pg_indexes_size(schemaname||'.'||tablename)) AS indexes_size
FROM pg_tables
WHERE schemaname = 'public'
ORDER BY pg_total_relation_size(schemaname||'.'||tablename) DESC;

Summary Checklist

Operation	Safe Approach
Add column	Nullable first → backfill → add NOT NULL
Create index	Always use `CONCURRENTLY`
Add foreign key	`NOT VALID` → `VALIDATE CONSTRAINT`
Change column type	New parallel column → switch → drop old
Enable RLS	Define all policies → `ENABLE ROW LEVEL SECURITY`

Mastering zero-downtime migrations lets you evolve your schema continuously without service interruption.

Building a life-management app that replaces 21 competing SaaS tools with Flutter + Supabase. Follow the journey → @kanta13jp1

Flutter Platform Channels Advanced — Type-Safe Dart-Native Communication

kanta13jp1 — Wed, 29 Apr 2026 13:54:25 +0000

Flutter Platform Channels Advanced — Type-Safe Dart-Native Communication

Raw dynamic types in Flutter's MethodChannel are a hidden source of runtime errors. This article covers type-safe channel design, automatic code generation with Pigeon, and error-handling best practices.

Platform Channel Architecture

Flutter provides three channel types:

Dart (Flutter) ←→ Platform Channel ←→ Native (iOS/Android)
  MethodChannel    one-shot method calls
  EventChannel     continuous streams
  BasicMessageChannel  string/binary data

The core issue with raw MethodChannel is the absence of compile-time type safety.

// ❌ Unsafe legacy approach
static const _channel = MethodChannel('com.example.app/sensor');

Future<double> getBatteryLevel() async {
  final result = await _channel.invokeMethod('getBatteryLevel');
  return result as double; // runtime cast failure waiting to happen
}

Pigeon: Auto-Generated Type-Safe Channels

Pigeon generates native code from Dart interface definitions, eliminating manual casting entirely.

// pigeons/sensor_api.dart (definition file)
import 'package:pigeon/pigeon.dart';

@ConfigurePigeon(PigeonOptions(
  dartOut: 'lib/platform/sensor_api.g.dart',
  swiftOut: 'ios/Runner/SensorApi.g.swift',
  kotlinOut: 'android/app/src/main/kotlin/SensorApi.g.kt',
))
class BatteryInfo {
  BatteryInfo({required this.level, required this.isCharging});
  final double level;
  final bool isCharging;
}

@HostApi()
abstract class SensorHostApi {
  BatteryInfo getBatteryInfo();
  @async
  BatteryInfo refreshBatteryInfo();
}

@FlutterApi()
abstract class SensorFlutterApi {
  void onBatteryLevelChanged(double level);
}

Run the generator:

dart run pigeon --input pigeons/sensor_api.dart

Using Generated Code

// lib/platform/sensor_service.dart
import 'sensor_api.g.dart';

class SensorService {
  final SensorHostApi _api = SensorHostApi();

  Future<BatteryInfo> getBatteryInfo() async {
    try {
      return await _api.refreshBatteryInfo();
    } on PlatformException catch (e) {
      throw SensorException(e.code, e.message);
    }
  }
}

The generated code contains zero dynamic casts — type errors surface at compile time.

EventChannel for Real-Time Native Data

Use EventChannel for continuous native events:

class AccelerometerService {
  static const _channel = EventChannel('com.example.app/accelerometer');

  Stream<AccelerometerData> get stream => _channel
      .receiveBroadcastStream()
      .map((event) => AccelerometerData.fromMap(Map<String, dynamic>.from(event)));
}

class AccelerometerData {
  const AccelerometerData({
    required this.x,
    required this.y,
    required this.z,
    required this.timestamp,
  });

  final double x;
  final double y;
  final double z;
  final DateTime timestamp;

  factory AccelerometerData.fromMap(Map<String, dynamic> map) {
    return AccelerometerData(
      x: (map['x'] as num).toDouble(),
      y: (map['y'] as num).toDouble(),
      z: (map['z'] as num).toDouble(),
      timestamp: DateTime.fromMillisecondsSinceEpoch(map['timestamp'] as int),
    );
  }
}

iOS Implementation (Swift)

// AppDelegate.swift
import Flutter
import UIKit
import CoreMotion

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  private let motionManager = CMMotionManager()
  private var eventSink: FlutterEventSink?

  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let controller = window?.rootViewController as! FlutterViewController
    let channel = FlutterEventChannel(
      name: "com.example.app/accelerometer",
      binaryMessenger: controller.binaryMessenger
    )
    channel.setStreamHandler(self)
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

extension AppDelegate: FlutterStreamHandler {
  func onListen(
    withArguments arguments: Any?,
    eventSink events: @escaping FlutterEventSink
  ) -> FlutterError? {
    self.eventSink = events
    motionManager.accelerometerUpdateInterval = 0.1
    motionManager.startAccelerometerUpdates(to: .main) { [weak self] data, error in
      guard let data = data else { return }
      self?.eventSink?([
        "x": data.acceleration.x,
        "y": data.acceleration.y,
        "z": data.acceleration.z,
        "timestamp": Int(Date().timeIntervalSince1970 * 1000)
      ])
    }
    return nil
  }

  func onCancel(withArguments arguments: Any?) -> FlutterError? {
    motionManager.stopAccelerometerUpdates()
    eventSink = nil
    return nil
  }
}

Android Implementation (Kotlin)

// MainActivity.kt
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.EventChannel
import android.hardware.Sensor
import android.hardware.SensorEvent
import android.hardware.SensorEventListener
import android.hardware.SensorManager

class MainActivity: FlutterActivity() {
    private val sensorManager by lazy {
        getSystemService(SENSOR_SERVICE) as SensorManager
    }

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        EventChannel(
            flutterEngine.dartExecutor.binaryMessenger,
            "com.example.app/accelerometer"
        ).setStreamHandler(object : EventChannel.StreamHandler {
            private var listener: SensorEventListener? = null

            override fun onListen(args: Any?, sink: EventChannel.EventSink) {
                val sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER)
                listener = object : SensorEventListener {
                    override fun onSensorChanged(event: SensorEvent) {
                        sink.success(mapOf(
                            "x" to event.values[0].toDouble(),
                            "y" to event.values[1].toDouble(),
                            "z" to event.values[2].toDouble(),
                            "timestamp" to System.currentTimeMillis()
                        ))
                    }
                    override fun onAccuracyChanged(sensor: Sensor, accuracy: Int) {}
                }
                sensorManager.registerListener(
                    listener, sensor, SensorManager.SENSOR_DELAY_NORMAL
                )
            }

            override fun onCancel(args: Any?) {
                sensorManager.unregisterListener(listener)
                listener = null
            }
        })
    }
}

Type-Safe Error Handling

sealed class PlatformChannelException implements Exception {
  const PlatformChannelException(this.message);
  final String message;
}

class PermissionDeniedException extends PlatformChannelException {
  const PermissionDeniedException() : super('Sensor access permission denied');
}

class HardwareUnavailableException extends PlatformChannelException {
  const HardwareUnavailableException(String sensor)
      : super('$sensor sensor is not available on this device');
}

extension PlatformExceptionMapper on PlatformException {
  PlatformChannelException toTyped() => switch (code) {
    'PERMISSION_DENIED' => const PermissionDeniedException(),
    'HARDWARE_UNAVAILABLE' => HardwareUnavailableException(message ?? 'Unknown'),
    _ => PlatformChannelException('Unexpected error: $message'),
  };
}

Testing Strategy

// test/platform/sensor_service_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/services.dart';

void main() {
  TestWidgetsFlutterBinding.ensureInitialized();

  group('SensorService', () {
    setUp(() {
      TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
          .setMockMethodCallHandler(
        const MethodChannel('com.example.app/sensor'),
        (MethodCall call) async {
          if (call.method == 'getBatteryInfo') {
            return {'level': 85.0, 'isCharging': true};
          }
          throw PlatformException(code: 'NOT_IMPLEMENTED');
        },
      );
    });

    tearDown(() {
      TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
          .setMockMethodCallHandler(
              const MethodChannel('com.example.app/sensor'), null);
    });

    test('getBatteryInfo returns typed data', () async {
      final service = SensorService();
      final info = await service.getBatteryInfo();
      expect(info.level, 85.0);
      expect(info.isCharging, true);
    });
  });
}

Performance Optimization

Platform Channel calls are non-blocking on the main thread, but high-frequency message passing can degrade performance.

// ✅ Throttle to reduce call frequency
class ThrottledSensorService {
  Stream<AccelerometerData> get stream => AccelerometerService()
      .stream
      .throttleTime(const Duration(milliseconds: 100)); // limit to 10 Hz
}

Key Takeaways

Pigeon auto-generates type-safe bindings — eliminates dynamic casting
Sealed classes + switch provide exhaustive error coverage
EventChannel handles continuous native streams elegantly
Mock MethodCall handlers make unit tests straightforward
Throttling prevents performance degradation from high-frequency events

Type-safe native integration applies to plugins, sensors, file system access, and more. Adopting Pigeon alone prevents the majority of runtime channel errors.

Building a life-management app that replaces 21 competing SaaS tools with Flutter + Supabase. Follow the journey → @kanta13jp1

Dart Patterns Advanced — Sealed Classes, Guard Clauses, and Destructuring in Practice

kanta13jp1 — Wed, 29 Apr 2026 13:33:14 +0000

Dart Patterns Advanced — Sealed Classes, Guard Clauses, and Destructuring in Practice

Dart 3's pattern matching features — sealed classes, guard clauses, record destructuring, and object patterns — dramatically simplify state management, error handling, and data transformation in Flutter apps. This article covers advanced patterns you can apply in production code today.

Sealed Classes for Exhaustive Pattern Matching

sealed class lets the compiler track all subclasses, turning missing branches in switch expressions into compile-time errors rather than runtime bugs.

// Result type implemented as a sealed class
sealed class Result<T> {
  const Result();
}

final class Success<T> extends Result<T> {
  final T data;
  const Success(this.data);
}

final class Failure<T> extends Result<T> {
  final String message;
  final Object? error;
  const Failure(this.message, {this.error});
}

final class Loading<T> extends Result<T> {
  const Loading();
}

// Exhaustive pattern match — missing branches are compile errors
Widget buildWidget(Result<UserProfile> result) {
  return switch (result) {
    Success(data: final user) => UserCard(user: user),
    Failure(message: final msg) => ErrorBanner(message: msg),
    Loading() => const CircularProgressIndicator(),
  };
}

Unlike if (result is Success) checks, the switch exhaustiveness check means that adding a new subclass (e.g., Cancelled) will immediately surface every switch that needs updating — before the code ships.

switch expression vs switch statement

Dart 3's switch expression returns a value, making it ideal for variable assignment and inline widget construction.

// switch statement (traditional)
String getLabel(PaymentStatus status) {
  switch (status) {
    case PaymentStatus.pending:
      return 'Processing';
    case PaymentStatus.completed:
      return 'Completed';
    case PaymentStatus.failed:
      return 'Failed';
  }
}

// switch expression (Dart 3 idiomatic)
String getLabel(PaymentStatus status) => switch (status) {
  PaymentStatus.pending   => 'Processing',
  PaymentStatus.completed => 'Completed',
  PaymentStatus.failed    => 'Failed',
};

// Inline in widget tree
Text(
  switch (paymentStatus) {
    PaymentStatus.pending   => 'Processing payment...',
    PaymentStatus.completed => 'Payment complete',
    PaymentStatus.failed    => 'An error occurred',
  },
  style: TextStyle(
    color: switch (paymentStatus) {
      PaymentStatus.pending   => Colors.orange,
      PaymentStatus.completed => Colors.green,
      PaymentStatus.failed    => Colors.red,
    },
  ),
)

Guard Clauses (when) for Conditional Filtering

The when keyword adds extra conditions to a pattern branch without breaking exhaustiveness.

sealed class PriceAlert {}
final class AboveThreshold extends PriceAlert {
  final double price;
  final double threshold;
  const AboveThreshold(this.price, this.threshold);
}
final class BelowThreshold extends PriceAlert {
  final double price;
  final double threshold;
  const BelowThreshold(this.price, this.threshold);
}

// Guard clauses filter within a pattern match
String describeAlert(PriceAlert alert) => switch (alert) {
  AboveThreshold(price: final p, threshold: final t)
      when p > t * 1.5 => 'Sharp rise (+50%): \$${p.toStringAsFixed(2)}',
  AboveThreshold(price: final p) => 'Rising: \$${p.toStringAsFixed(2)}',
  BelowThreshold(price: final p, threshold: final t)
      when p < t * 0.5 => 'Sharp drop (-50%): \$${p.toStringAsFixed(2)}',
  BelowThreshold(price: final p) => 'Falling: \$${p.toStringAsFixed(2)}',
};

Record Destructuring for Tuple-Like Return Values

Dart 3's Record type enables type-safe multi-value returns without defining a dedicated class.

// Return multiple values as a Record
(String name, int age, bool isPremium) fetchUserSummary(String userId) {
  // ... implementation
  return ('Jane Smith', 28, true);
}

// Destructure at the call site
final (name, age, isPremium) = fetchUserSummary(userId);
print('$name ($age) - ${isPremium ? 'Premium' : 'Free'}');

// Combine with switch for conditional logic
final summary = fetchUserSummary(userId);
final badge = switch (summary) {
  (_, _, true)  => const PremiumBadge(),
  (_, var a, _) when a >= 60 => const SeniorBadge(),
  _ => const StandardBadge(),
};

Object Patterns for Deep Nested Destructuring

Object patterns let you match and extract nested fields in a single expression.

class Order {
  final String id;
  final User customer;
  final List<OrderItem> items;
  final PaymentStatus status;
  const Order({required this.id, required this.customer, required this.items, required this.status});
}

class User {
  final String name;
  final bool isPremium;
  const User({required this.name, required this.isPremium});
}

// Object pattern destructures deeply nested objects in one switch
String orderSummary(Order order) => switch (order) {
  Order(
    customer: User(name: final name, isPremium: true),
    status: PaymentStatus.completed,
  ) => '$name (Premium) — order complete',
  Order(
    customer: User(name: final name),
    status: PaymentStatus.failed,
  ) => 'Payment failed for $name',
  Order(status: PaymentStatus.pending) => 'Processing...',
  _ => 'Unknown state',
};

Flutter in Practice: Safe Supabase Response Handling

// Wrap Supabase response in a Result type
@riverpod
Future<Result<List<Product>>> products(ProductsRef ref) async {
  try {
    final data = await ref
        .watch(supabaseClientProvider)
        .from('products')
        .select()
        .order('created_at', ascending: false);
    return Success(data.map(Product.fromJson).toList());
  } on PostgrestException catch (e) {
    return Failure('Database error: ${e.message}', error: e);
  } catch (e) {
    return Failure('Unexpected error', error: e);
  }
}

// Widget — sealed class exhaustiveness keeps the UI in sync
class ProductListWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final result = ref.watch(productsProvider);
    return result.when(
      data: (r) => switch (r) {
        Success(data: final products) when products.isEmpty =>
            const EmptyState(message: 'No products found'),
        Success(data: final products) =>
            ProductGrid(products: products),
        Failure(message: final msg) => ErrorBanner(message: msg),
        Loading() => const CircularProgressIndicator(),
      },
      loading: () => const CircularProgressIndicator(),
      error: (e, _) => ErrorBanner(message: e.toString()),
    );
  }
}

Dart 3's pattern matching rewrites the way you handle state and errors in Flutter. The combination of sealed classes and switch expressions works naturally with Riverpod's AsyncValue.when(), giving you exhaustive compile-time safety across your entire state model with less code than traditional approaches.

This series covers Flutter, Supabase, and indie SaaS development. New articles every week.

Indie SaaS Community Building — Discord, Slack, and GitHub Discussions for Power Users

kanta13jp1 — Wed, 29 Apr 2026 13:32:28 +0000

Indie SaaS Community Building — Discord, Slack, and GitHub Discussions for Power Users

Community building is one of the highest-ROI marketing activities for indie SaaS products. Unlike ads, communities create compounding value: word-of-mouth growth, direct feedback loops, and retention that no paid channel can match.

Choosing Your Community Channel

The right channel depends entirely on who your users are.

Channel	Best For	Strengths	Weaknesses
Discord	Developers, creators, Gen-Z	Real-time, voice chat, bot automation	Can feel informal for enterprise B2B
Slack	Business users, enterprise teams	Fits existing workflows	Free plan limits history to 90 days
GitHub Discussions	OSS users, technical builders	Collocated with code, searchable	High barrier for non-technical users

For Flutter developer tools and indie SaaS products targeting builders, Discord delivers the fastest response loops and the most active engagement from early adopters.

Getting Your First 100 Members

The first 100 members are the hardest and most important to acquire.

Step 1: Direct Outreach (0 → 20 members)

DM your beta users and active social followers with a personal invite: "I just launched a community and you'd be one of our founding members." Personal invites convert 3–5x better than broadcast announcements.

Step 2: Product Hunt Launch (20 → 60 members)

When you launch on Product Hunt, include a Discord/Slack link in your description and say "I'll be responding to questions on Discord all day." Users who engage with your Product Hunt launch are your highest-intent audience — redirect that energy into community membership.

Step 3: Twitter/X Content Loop (60 → 100 members)

Posts like "Just shipped a community-exclusive early access feature" outperform generic feature announcements. The key is making community membership visibly valuable — show what members get that outsiders don't.

Healthy Community Operations

Define a reply SLA: Publicly commit to 24-hour response times in #support. This builds trust even when volume is low.
Automate moderation early: Use bots (MEE6, Dyno, Carl-bot) for spam filtering. Start invite-only until you have enough members to self-moderate.
Create an off-topic channel: Communities with #random or #off-topic have noticeably better retention — people stay for the conversation, not just the product.
Post a weekly digest: A brief "what shipped this week" and "top questions answered" post every Friday takes 10 minutes and keeps momentum going without requiring daily effort.

Developing Champion Users

The top 20% of your community members create 80% of the energy. Design incentives specifically for them.

Visible role: A @Champion or @Power User role in Discord signals status to the broader community
Roadmap voting: Let champions vote on which features get built next — this creates investment in outcomes
Early access gating: Give champions access to beta features controlled by feature flags
Monthly 1:1 calls: 30 minutes per month per champion. Credit their name publicly when their feedback ships as a feature.

// Feature flag for champion early access
class FeatureFlags {
  static Future<bool> isChampionFeatureEnabled(String userId) async {
    final response = await Supabase.instance.client
        .from('user_roles')
        .select('role')
        .eq('user_id', userId)
        .maybeSingle();
    return response?['role'] == 'champion';
  }
}

// Usage in a Widget
FutureBuilder<bool>(
  future: FeatureFlags.isChampionFeatureEnabled(userId),
  builder: (context, snapshot) {
    if (snapshot.data == true) {
      return const BetaFeatureWidget();
    }
    return const StandardFeatureWidget();
  },
)

Reflecting Community Activity in Your App with Supabase + Webhooks

Discord webhooks processed by Supabase Edge Functions let you log community activity and use it to power app features.

// Edge Function: discord-webhook-handler.ts
Deno.serve(async (req) => {
  const payload = await req.json()

  // Log new member joins
  if (payload.t === 'GUILD_MEMBER_ADD') {
    await supabase.from('community_events').insert({
      event_type: 'member_join',
      discord_user_id: payload.d.user.id,
      occurred_at: new Date().toISOString(),
    })

    // Trigger a welcome email
    await supabase.functions.invoke('send-welcome-email', {
      body: { discord_user_id: payload.d.user.id },
    })
  }

  return new Response('OK', { status: 200 })
})

Storing community events in your database enables retention analytics: "Users who join the community retain at 2.3x the rate of non-members." That data makes the case for continued investment in community — and gives you something concrete to share in public build-in-public posts.

This series covers Flutter, Supabase, and indie SaaS development. New articles every week.

Supabase AI and Vector Advanced — pgvector, Embeddings, RAG, and Semantic Caching

kanta13jp1 — Wed, 29 Apr 2026 13:31:40 +0000

Supabase AI and Vector Advanced — pgvector, Embeddings, RAG, and Semantic Caching

Supabase ships with pgvector support out of the box, enabling vector search, RAG pipelines, and semantic caching directly on PostgreSQL. This article covers production-ready patterns for building AI-powered search features with Supabase and Flutter.

pgvector Index Types: ivfflat vs hnsw

pgvector supports two index algorithms, each with different trade-offs:

Criteria	ivfflat	hnsw
Build Speed	Fast	Slow (noticeable at scale)
Search Accuracy	Medium (tunable via lists)	High
Memory Usage	Low	High
Best For	Write-heavy, mid-scale	Read-heavy, high-accuracy

-- hnsw index for cosine similarity (recommended for most cases)
CREATE INDEX ON documents
USING hnsw (embedding vector_cosine_ops)
WITH (m = 16, ef_construction = 64);

-- ivfflat index for inner product
CREATE INDEX ON documents
USING ivfflat (embedding vector_ip_ops)
WITH (lists = 100);

For indie projects under one million rows, hnsw is recommended. The slower build time is a one-time cost, and query accuracy is consistently better.

Generating Embeddings and Storing in Supabase

Use OpenAI's text-embedding-3-small or Google's embedding-001 to vectorize text, then store the results in Supabase.

// Supabase Edge Function: embed-and-store.ts
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
import OpenAI from 'https://esm.sh/openai@4'

const openai = new OpenAI({ apiKey: Deno.env.get('OPENAI_API_KEY')! })
const supabase = createClient(
  Deno.env.get('SUPABASE_URL')!,
  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
)

export async function embedAndStore(text: string, metadata: Record<string, unknown>) {
  const embeddingResponse = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: text,
  })
  const embedding = embeddingResponse.data[0].embedding

  const { data, error } = await supabase.from('documents').insert({
    content: text,
    embedding,
    metadata,
  })
  if (error) throw error
  return data
}

-- Table schema
CREATE TABLE documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  content TEXT NOT NULL,
  embedding VECTOR(1536),  -- 1536 dimensions for text-embedding-3-small
  metadata JSONB DEFAULT '{}'::JSONB,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

Building a RAG Pipeline

RAG (Retrieval-Augmented Generation) follows four steps: document chunking → embedding → similarity search → LLM answer generation.

// Edge Function: rag-query.ts
export async function ragQuery(userQuery: string): Promise<string> {
  // Step 1: Embed the query
  const queryEmbedding = await openai.embeddings.create({
    model: 'text-embedding-3-small',
    input: userQuery,
  })
  const queryVector = queryEmbedding.data[0].embedding

  // Step 2: Find similar documents (cosine similarity > 0.8, top 5)
  const { data: docs } = await supabase.rpc('match_documents', {
    query_embedding: queryVector,
    match_threshold: 0.8,
    match_count: 5,
  })

  // Step 3: Build context and call LLM
  const context = docs.map((d: any) => d.content).join('\n\n')
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [
      { role: 'system', content: `Answer using the following documents:\n${context}` },
      { role: 'user', content: userQuery },
    ],
  })
  return completion.choices[0].message.content ?? ''
}

-- Similarity search function
CREATE OR REPLACE FUNCTION match_documents(
  query_embedding VECTOR(1536),
  match_threshold FLOAT DEFAULT 0.8,
  match_count INT DEFAULT 5
)
RETURNS TABLE(id UUID, content TEXT, similarity FLOAT)
LANGUAGE SQL STABLE AS $$
  SELECT id, content, 1 - (embedding <=> query_embedding) AS similarity
  FROM documents
  WHERE 1 - (embedding <=> query_embedding) > match_threshold
  ORDER BY similarity DESC
  LIMIT match_count;
$$;

Implementing Semantic Caching

Semantic caching checks if an incoming query's embedding is similar enough to a cached query, avoiding redundant LLM API calls and cutting costs significantly.

// semantic-cache.ts
export async function semanticCachedQuery(
  userQuery: string,
  similarityThreshold = 0.95
): Promise<string> {
  const queryVector = await getEmbedding(userQuery)

  // Look for a cached answer with similarity >= 0.95
  const { data: cached } = await supabase.rpc('match_query_cache', {
    query_embedding: queryVector,
    match_threshold: similarityThreshold,
    match_count: 1,
  })

  if (cached && cached.length > 0) {
    console.log('Cache hit! similarity:', cached[0].similarity)
    return cached[0].answer
  }

  // Cache miss: run RAG and store the result
  const answer = await ragQuery(userQuery)
  await supabase.from('query_cache').insert({
    query: userQuery,
    embedding: queryVector,
    answer,
  })
  return answer
}

A threshold of 0.95 works well in production. Too high and the cache hit rate suffers; too low and semantically different questions receive the same answer.

Calling Vector Search from Flutter

Invoke the Edge Function from Flutter using supabase.functions.invoke():

// vector_search_service.dart
class VectorSearchService {
  final SupabaseClient _supabase;

  VectorSearchService(this._supabase);

  Future<String> ask(String query) async {
    final response = await _supabase.functions.invoke(
      'rag-query',
      body: {'query': query},
    );
    if (response.status != 200) {
      throw Exception('RAG query failed: ${response.data}');
    }
    return response.data['answer'] as String;
  }
}

// Riverpod provider
@riverpod
VectorSearchService vectorSearch(VectorSearchRef ref) {
  return VectorSearchService(ref.watch(supabaseClientProvider));
}

@riverpod
Future<String> ragAnswer(RagAnswerRef ref, String query) async {
  return ref.watch(vectorSearchProvider).ask(query);
}

The combination of pgvector, Supabase Edge Functions, and Flutter gives you a fully managed AI search backend for well under $25/month — a practical choice for indie products that need smart search without infrastructure overhead.

This series covers Flutter, Supabase, and indie SaaS development. New articles every week.

Flutter State Management Comparison 2024 — Riverpod vs Bloc vs Provider vs GetX

kanta13jp1 — Wed, 29 Apr 2026 13:30:50 +0000

Flutter State Management Comparison 2024 — Riverpod vs Bloc vs Provider vs GetX

Every Flutter developer eventually faces the same question: which state management library should I use? This article compares the four dominant options from a production perspective, covering learning curve, testability, boilerplate, and compatibility with Supabase.

Feature Comparison Table

Criteria	Riverpod 2.0	Bloc	Provider	GetX
Learning Curve	Medium	High	Low	Low–Medium
Testability	Excellent	Excellent	Good	Fair
Boilerplate	Low	High	Low	Low
Compile-time Safety	Excellent	Good	Fair	Fair
Community Size	Large	Large	Large (legacy)	Medium
Type-safe Async	Excellent (AsyncValue)	Good	Fair	Fair
DevTools Support	Excellent	Excellent	Good	Fair

Why Riverpod 2.0 Is the Current Recommendation

Riverpod 2.0 with code generation via @riverpod annotations is stable and production-ready. AsyncNotifier handles async state with full type safety, and integration with Supabase streams is natural.

// Provider that fetches user profiles from Supabase
@riverpod
Future<List<UserProfile>> userProfiles(UserProfilesRef ref) async {
  final supabase = ref.watch(supabaseClientProvider);
  final response = await supabase
      .from('profiles')
      .select()
      .order('created_at', ascending: false);
  return response.map((json) => UserProfile.fromJson(json)).toList();
}

// Usage in a Widget
class UserListPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final usersAsync = ref.watch(userProfilesProvider);
    return usersAsync.when(
      data: (users) => ListView.builder(
        itemCount: users.length,
        itemBuilder: (ctx, i) => UserTile(user: users[i]),
      ),
      loading: () => const CircularProgressIndicator(),
      error: (e, st) => ErrorWidget(e.toString()),
    );
  }
}

ref.invalidate() allows you to manually refresh cached data, making it easy to refetch after Supabase INSERT/UPDATE/DELETE operations without any boilerplate refresh logic.

When Bloc Makes Sense

Bloc is the right choice for large teams and strict event-driven architectures. The explicit Event → State flow makes code reviews straightforward and intent transparent.

// Event definition
abstract class AuthEvent {}
class LoginRequested extends AuthEvent {
  final String email;
  final String password;
  LoginRequested({required this.email, required this.password});
}

// Bloc implementation
class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc(this._supabase) : super(AuthInitial()) {
    on<LoginRequested>(_onLoginRequested);
  }

  Future<void> _onLoginRequested(
    LoginRequested event,
    Emitter<AuthState> emit,
  ) async {
    emit(AuthLoading());
    try {
      await _supabase.auth.signInWithPassword(
        email: event.email,
        password: event.password,
      );
      emit(AuthSuccess());
    } catch (e) {
      emit(AuthFailure(e.toString()));
    }
  }
}

For teams of 5+ developers working on feature branches in parallel, Bloc's explicit structure reduces merge conflicts and makes ownership of state transitions clear.

The Risks of GetX

GetX is attractive for its low boilerplate, but carries significant risks in production:

Monolithic API: state management, routing, and DI are bundled together, making partial adoption difficult
Global state pollution: Get.find() creates implicit global dependencies that are hard to mock in tests
Maintenance uncertainty: community fragmentation and delayed compatibility with new Flutter versions

GetX may be acceptable for throwaway prototypes, but avoid it for any product you plan to maintain long-term.

Migrating from Provider to Riverpod

If you're using ChangeNotifierProvider, migration can be done incrementally:

// Before: Provider
class UserNotifier extends ChangeNotifier {
  UserProfile? _user;
  UserProfile? get user => _user;

  Future<void> loadUser(String id) async {
    _user = await supabase.from('profiles').select().eq('id', id).single();
    notifyListeners();
  }
}

// After: Riverpod (AsyncNotifier)
@riverpod
class UserNotifier extends _$UserNotifier {
  @override
  FutureOr<UserProfile?> build(String id) async {
    return ref.watch(supabaseClientProvider)
        .from('profiles')
        .select()
        .eq('id', id)
        .single()
        .then((json) => UserProfile.fromJson(json));
  }
}

A safe migration strategy: new features use Riverpod, existing code stays on Provider. ProviderScope and MultiProvider can coexist in the same widget tree during the transition.

Supabase Compatibility Summary

Supabase's stream() API integrates most naturally with Riverpod's StreamProvider. Bloc can manage StreamSubscription inside on<> handlers, but requires more code. Provider's StreamProvider works but lacks the built-in error/loading handling that Riverpod provides out of the box.

Recommendation: Riverpod 2.0 for solo developers and small-to-mid teams. Consider Bloc if you have 5+ developers and need strict event-driven architecture enforcement.

This series covers Flutter, Supabase, and indie SaaS development. New articles every week.

DEV Community: kanta13jp1

Dart Generics Deep Dive — Bounds, Variance, and Production Patterns

Dart Generics Deep Dive — Bounds, Variance, and Production Patterns

Basics: Type Parameters and Inference

Type Bounds (extends)

Multiple Type Parameters

The covariant Keyword

Type Erasure? No — Dart Has Reified Generics

Type-Safe Service Locator

Generic Widgets in Flutter

When to Use What

Indie Dev Scaling — Serving 100k Users as a Solo Engineer

Indie Dev Scaling — Serving 100k Users as a Solo Engineer

Phase-Based Scaling Strategy

Phase 1: 0–1,000 Users (Validation)

Phase 2: 1,000–10,000 Users (PMF Confirmed)

Phase 3: 10,000–100,000 Users (Scaling)

Database Optimisation

Connection Pooling

Read Replicas

Table Partitioning

AI-Powered Monitoring

Caching Strategy

Client-Side Cache in Flutter

Server-Side Materialised Views

Cost Management

Staged Plan Upgrades

Budget Alerts

The Solo Scaling Rulebook

Supabase RLS Deep Dive — Multi-Tenant Design, Dynamic Policies, and Performance

Supabase RLS Deep Dive — Multi-Tenant Design, Dynamic Policies, and Performance

RLS Basics

Multi-Tenant Architecture

Team-Based Access Control

JWT Custom Claims for Roles

Dynamic Policies

Time-Based Access

Hierarchical Resource Ownership

Subscription-Gated Content

Performance Optimisation

Index Strategy

Extract Policies into SECURITY DEFINER Functions

Debugging RLS

Test as a Specific User

Inspect Policies

Flutter Client

Summary

Flutter Web in Production — SEO, Core Web Vitals, and PWA at Scale

Flutter Web in Production — SEO, Core Web Vitals, and PWA at Scale

Choosing a Rendering Mode

SEO: Meta Tags and Structured Data

Core Web Vitals Optimization

LCP — Largest Contentful Paint

CLS — Cumulative Layout Shift Prevention

INP — Offloading to Isolates

PWA Configuration

Optimised manifest.json

Service Worker — Offline Support

URL Strategy and Deep Links

Firebase Hosting Configuration

Lighthouse Score Checklist

Summary

Dart Extension Types — Zero-Cost Wrappers and Type-Safe Domain Modeling

Dart Extension Types — Zero-Cost Wrappers and Type-Safe Domain Modeling

What Are Extension Types?

Basic Syntax

implements to Expose the Underlying Type's API

Domain Modeling in Practice

Separating ID Types

Type-Safe Money Representation

Validated String Types

Application in Flutter Widgets

Combining with Sealed Classes

Extension Types vs typedef

When to Use Extension Types

Indie Dev Product-Market Fit — User Interviews and Feedback Loops in Practice

Indie Dev Product-Market Fit — User Interviews and Feedback Loops in Practice

What Is PMF?

Designing User Interviews

Good vs. Bad Questions

Type Bounds (`extends`)

The `covariant` Keyword

Extract Policies into `SECURITY DEFINER` Functions

`implements` to Expose the Underlying Type's API