Environment & Energy

How to Build a Full-Stack Dart App with Firebase Functions and GenUI

Posted by u/Lolpro Lab · 2026-05-18 20:03:03

Introduction

At Google Cloud Next 2026, the Flutter and Dart team unveiled a game-changing preview: Dart support for Firebase Functions, plus deeper integrations with the Dart Admin SDK. These tools let you use the same language for both your frontend and backend, reducing context switching and accelerating development. This step-by-step guide will walk you through building a full-stack Dart application—from setting up your environment to deploying a GenUI-powered interface. Whether you're creating a custom latte art app like the GenLatte demo or an enterprise dashboard, these steps will get you from zero to deployed.

How to Build a Full-Stack Dart App with Firebase Functions and GenUI

What You Need

Flutter SDK (latest stable version)
Dart SDK (comes with Flutter, but ensure version 3.x or later)
Firebase CLI (install via npm: npm install -g firebase-tools)
Google Cloud account with billing enabled for Firebase Functions
A code editor (VS Code with Flutter/Dart extensions recommended)
Node.js (v18 or newer, required for Firebase CLI emulators)
Optional: Flutter GenUI package (flutter_gen_ui) for dynamic UI generation

Step-by-Step Guide

Step 1: Set Up Your Flutter Project and Firebase Backend

Start by creating a new Flutter project from the terminal:

flutter create my_fullstack_app
cd my_fullstack_app

Next, install the Firebase Flutter plugins for authentication, firestore, and functions. Add these dependencies to your pubspec.yaml:

dependencies:
  firebase_core: ^2.15.0
  firebase_auth: ^4.7.0
  cloud_firestore: ^4.8.0
  cloud_functions: ^4.0.0

Run flutter pub get to install them.

Step 2: Initialize Firebase in Your Project

firebase login
firebase init functions

When prompted, select Dart as the language for Functions (this is the preview feature announced at Google Cloud Next). The CLI will create a functions directory with a pubspec.yaml and a main.dart file for your backend code.

Link your Firebase project by selecting an existing project or creating a new one. Also initialize Firestore if you need a database.

Step 3: Write Your First Dart Firebase Function

Open functions/main.dart and replace its content with a simple HTTP function that returns a dynamic UI payload:

import 'dart:convert';
import 'package:firebase_functions/firebase_functions.dart';
import 'package:googleapis/firestore/v1.dart' as admin;

Future generateLatteArt(request) async {
  final data = request.data as Map;
  final flavor = data['flavor'] ?? 'vanilla';
  // Use the Dart Admin SDK to store order
  final firestore = admin.FirestoreApi(admin.FirestoreApi.ensureInitialized());
  await firestore.documents.create(
    'orders',
    admin.Document(data: {'flavor': flavor, 'timestamp': DateTime.now().toIso8601String()}),
  );
  // Return a GenUI schema (simplified example)
  return Response.json({
    'ui': {
      'type': 'column',
      'children': [
        {'type': 'text', 'value': 'Your $flavor latte is being prepared!'},
        {'type': 'image', 'url': 'https://example.com/latte_art.png'}
      ]
    }
  });
}

This function uses the Dart Admin SDK to write to Firestore and returns a JSON object that your Flutter GenUI client can render as dynamic UI.

Step 4: Connect Your Flutter Frontend to the Function

Back in your Flutter project, create a service class to call the cloud function:

import 'package:cloud_functions/cloud_functions.dart';
import 'package:flutter_gen_ui/flutter_gen_ui.dart'; // hypothetical package

class LatteService {
  final HttpsCallable callable = FirebaseFunctions.instance.httpsCallable('generateLatteArt');

  Future orderLatte(String flavor) async {
    final result = await callable.call({'flavor': flavor});
    final uiJson = result.data['ui'];
    // Pass uiJson to GenUI renderer in your widget
    GenUI.render(uiJson);
  }
}

Use this service in your UI—for example, when a user taps an order button, call LatteService().orderLatte('hazelnut'). The GenUI engine will convert the returned JSON into Flutter widgets on the fly, just like the GenLatte demo at the conference.

Step 5: Deploy and Test Locally

Before deploying to production, test locally with the Firebase Emulator Suite:

firebase emulators:start --only functions,firestore

Run your Flutter app on an emulator or device using flutter run. Point your app to the local emulator by setting FirebaseFunctions.instance.useFunctionsEmulator(origin: 'http://localhost:5001'). Verify that ordering a latte triggers the function, writes to Firestore, and returns a dynamic UI.

Once satisfied, deploy:

firebase deploy --only functions

Step 6: Add Advanced GenUI Features (Optional)

Inspired by the Partiful app demoed at Google Cloud Next, you can generate entire screens from your backend. Extend your function to return nested widgets, charts, or even entire page layouts. For example, return a UI schema that includes a listview with items fetched from Firestore. The Dart Admin SDK makes it easy to query data and transform it into UI definitions.

Tips

Stay within the preview limits: The Dart support for Firebase Functions is in preview—check the official documentation for any known limitations or breaking changes before the full release at Google I/O.
Leverage the Dart Admin SDK: Reduce context switching by using the same language and types for both client and server. Avoid mixing in JavaScript or TypeScript for your backend.
Optimize GenUI payloads: Keep returned JSON lightweight. Use caching strategies for repeated UI patterns to minimize bandwidth.
Test with emulators: Always test locally before deploying to avoid costly mistakes. The Firebase Emulator Suite now supports Dart Functions seamlessly.
Watch the Google I/O session: For deeper insights, check the full breakout session on full-stack Dart that will be available on the Flutter YouTube channel after Google I/O. It dives into advanced patterns shown by Rody Davis and Kevin Moore.
Explore community examples: Check out the Step 1 tips for your environment setup. The Toyota and Talabat success stories at Google Cloud Next show how even large enterprises use Flutter for infotainment and scaling—so your full-stack Dart app is in good company.

Share Save Report