Full-Stack Dart and Generative UI: Building Production AI Workflows with Flutter - GetAppUI Web & Mobile Blog

Let's look at how to structure a full-stack Dart application that communicates with Firebase Functions and renders dynamic generative UI elements on the fly.

If you have ever wanted to eliminate context switching between your frontend and backend languages while shipping agent-driven interfaces, this setup gives you a clean, type-safe pipeline.

What you'll learn

Setting up a shared Dart data contract between frontend and backend.
Writing type-safe Firebase Functions handlers in Dart.
Consuming dynamic generative UI components inside a Flutter client.
Handling serialization and state updates safely across client-server boundaries.

1. Sharing Types Across Client and Backend

Writing both your Flutter client and your backend in Dart means you can share models directly. Instead of maintaining duplicate TypeScript interfaces or Python Pydantic models, put your shared data models in a common directory or package.

DART

// shared/lib/src/order_model.dart
library shared;

class CoffeeOrder {
  final String id;
  final String drinkType;
  final String status;
  final Map<String, dynamic> customMetadata;

  CoffeeOrder({
    required this.id,
    required this.drinkType,
    required this.status,
    required this.customMetadata,
  });

  Map<String, dynamic> toJson() => {
        'id': id,
        'drinkType': drinkType,
        'status': status,
        'customMetadata': customMetadata,
      };

  factory CoffeeOrder.fromJson(Map<String, dynamic> json) => CoffeeOrder(
        id: json['id'] as String,
        drinkType: json['drinkType'] as String,
        status: json['status'] as String,
        customMetadata: json['customMetadata'] as Map<String, dynamic>,
      );
}

Speed Note: Keep your shared package free of platform-specific dependencies (dart:html or dart:ui). This ensures it compiles cleanly for both Flutter (mobile/web) and server-side Dart runtimes.

2. Writing Server-Side Handlers in Dart

With preview support for Dart in Firebase Functions, you can handle incoming requests using the exact same language and models your Flutter app uses. Here is how you handle an order creation endpoint.

DART

// functions/bin/server.dart
import 'package:functions_framework/functions_framework.dart';
import 'package:shared/shared.dart';
import 'package:shelf/shelf.dart';

@CloudFunction()
Future<Response> createOrder(Request request) async {
  final payload = await request.readAsString();
  // Parse using shared deserializer
  final order = CoffeeOrder.fromJson(parseJson(payload));

  // Process business logic or trigger AI agent pipeline
  final updatedOrder = CoffeeOrder(
    id: order.id,
    drinkType: order.drinkType,
    status: 'queued',
    customMetadata: {'processedBy': 'dart-backend'},
  );

  return Response.ok(
    jsonEncode(updatedOrder.toJson()),
    headers: {'Content-Type': 'application/json'},
  );
}

Gotcha: Make sure your Firebase Functions runtime is configured to use the correct Dart SDK version matching your local environment to avoid compilation mismatches during deployment.

3. Consuming Data in Flutter with Type Safety

Now that your backend returns standard JSON matching your shared models, consuming it on the Flutter client is straightforward. Use standard http requests or Firebase SDK integrations backed by your shared types.

DART

// client/lib/services/order_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:shared/shared.dart';

class OrderService {
  final String baseUrl;

  OrderService({required this.baseUrl});

  Future<CoffeeOrder> submitOrder(String drinkType) async {
    final response = await http.post(
      Uri.parse('$baseUrl/createOrder'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({
        'id': DateTime.now().millisecondsSinceEpoch.toString(),
        'drinkType': drinkType,
        'status': 'pending',
        'customMetadata': {},
      }),
    );

    if (response.statusCode == 200) {
      return CoffeeOrder.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to create order: ${response.body}');
    }
  }
}

Accessibility Tip: When rendering dynamic UI components returned from backend agents, ensure dynamically generated buttons and text fields include proper semantic labels (Semantics widget in Flutter) so screen readers can parse them reliably.

4. Building Generative UI Renderers

Agentic applications often need to render UI components on the fly based on user intent. Instead of hardcoding every screen layout, your app can interpret layout schemas delivered via your backend API.

DART

// client/lib/widgets/dynamic_ui_renderer.dart
import 'package:flutter/material.dart';

class DynamicUIRenderer extends StatelessWidget {
  final Map<String, dynamic> schema;

  const DynamicUIRenderer({Key? key, required this.schema}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final componentType = schema['type'] as String?;
    final properties = schema['properties'] as Map<String, dynamic>? ?? {};

    switch (componentType) {
      case 'button':
        return ElevatedButton(
          onPressed: () {},
          child: Text(properties['label'] ?? 'Action'),
        );
      case 'card':
        return Card(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(properties['content'] ?? ''),
          ),
        );
      default:
        return const Text('Unsupported component type');
    }
  }
}

Summary & Next Steps

Using Dart across your entire stack reduces friction when building modern cloud apps. By pairing full-stack Dart with Firebase Functions and generative UI widgets, you can ship complex agentic workflows much faster.

Next Steps:
- Extract your domain models into a local pub package to share between your Flutter app and backend functions.
- Experiment with Genkit Dart to orchestrate AI agent prompts and structure your dynamic UI schemas.