DEV Community

Samuel Adekunle
Samuel Adekunle

Posted on • Originally published at techwithsam.dev

Genkit Dart for Flutter Developers: Build Full-Stack AI Apps in 2026 (Getting Started)

#gemini #ai #flutter #techwithsam

Hey Flutter family!

Imagine integrating genuine AI capabilities into your apps — creating full-stack AI solutions with clean Dart code, client-side and server-side.

Introducing Genkit Dart, Google’s new approach to building production-ready AI features within your Flutter apps.

This introduction explores Genkit Dart, its impact on Flutter development, and demonstrates building an AI Content Generator powered by Gemini.

If you’re looking to implement AI features efficiently, this is for you. Let’s get started!

WHAT IS GENKIT DART & WHY DOES IT MATTER FOR FLUTTER DEVS

So… what is Genkit?

Genkit is Google’s open-source framework for building AI-powered applications. The Dart version (Genkit Dart) lets Flutter developers write both the frontend and the backend in the same language. Everything stays in Dart.

Why this is huge in 2026:

  • You own the entire AI flow (client + backend)
  • Full type safety across the stack
  • Easy integration with Gemini, Nano Banana, Vertex AI, Anthropic, OpenAI, Cohere, Ollama, and more
  • Perfect for production apps that need secure backend AI logic (Built and used in production by Google).

Client-side AI is great for speed and offline, but real production apps need a backend. Genkit Dart gives you both stress-free.

CLIENT-SIDE vs BACKEND AI PATTERNS (Quick Comparison)

Let me show you the difference with a simple example:

Client-side pattern (inside Flutter): → Fast, works offline, but limited by device power and API keys exposed.
Good for: simple chat, image description, on-device models.

Backend pattern with Genkit Dart: → Secure, scalable, you control costs and prompts, can combine multiple models.
Perfect for: content generation, image generation, user data processing, and paid features.

Today, we’ll focus on the backend pattern because why not 🤷‍♂️

SETTING UP GENKIT DART

Create a new Dart project:

dart create -t console-simple ai_content_generator_backend
cd ai_content_generator_backend
Enter fullscreen mode Exit fullscreen mode

Install Genkit packages

First, install the Genkit CLI. This gives you access to local developer tools, including the Developer UI:

curl -sL cli.genkit.dev | bash
Enter fullscreen mode Exit fullscreen mode

Then, install the core Genkit package, the Google AI plugin, and the build_runner dev dependency (for schema generation):

dart pub add genkit genkit_google_genai schemantic dev:build_runner
Enter fullscreen mode Exit fullscreen mode

Configure your model API key

Genkit can work with multiple model providers, as mentioned above. This guide uses the Gemini API, which offers a generous free tier and doesn’t require a credit card to get started.

To use it, you’ll need an API key from Google AI Studio. Once you have a key, set the GEMINI_API_KEY environment variable:

Google AI Studio

export GEMINI_API_KEY=<your API key> // e.g export GEMINI_API_KEY=1234
Enter fullscreen mode Exit fullscreen mode

That’s it, you now have a full Genkit backend with Dart setup.

BUILDING YOUR FIRST AI FLOW — Content Generator

Let’s build a simple but useful AI Content Generator.

Imagine your users type a topic (“Flutter tips for 2026”) and the app returns a well-structured blog post outline + key points.

Step 1: Define the Flow on the Backend (Dart) In your Genkit backend, create a new flow:

Replace bin/ai_content_generator_backend.dart with the following code:

import 'dart:convert';

import 'package:genkit/genkit.dart';
import 'package:genkit_google_genai/genkit_google_genai.dart';
import 'package:schemantic/schemantic.dart';

part 'ai_content_generator_backend.g.dart';

@Schema()
abstract class $ContentInput {
  @Field(description: 'The main topic or theme for the content')
  String get contentTopic;

  @Field(description: 'Any specific keywords to include in the content')
  String? get keywords;
}

// Define output schema
@Schema()
abstract class $Content {
  String get title;
  String get subtitle;
  String get content;
  List<String> get seoText;
  List<String> get tags;
}

void main() async {
  final ai = Genkit(plugins: [googleAI()]);

  // Define a content generator flow
  final contentGenerator = ai.defineFlow(
    name: 'contentGenerator',
    inputSchema: ContentInput.$schema,
    outputSchema: Content.$schema,
    fn: (ContentInput input, _) async {
      final response = await ai.generate(
        model: googleAI.gemini('gemini-2.5-flash'),
        config: GeminiOptions(temperature: 0.8),
        prompt:
            'Generate a blog post about ${input.contentTopic}. Include the following keywords: ${input.keywords ?? 'none'}. Format the output as JSON with the following structure: { "title": string, "subtitle": string, "content": string, "seoText": [string], "tags": [string] }',
        outputSchema: Content.$schema,
      );

      if (response.output == null) {
        throw Exception('Failed to generate content');
      }
      return response.output!;
    },
  );

  // Run the content generator flow
  final content = await contentGenerator(
    ContentInput(
      contentTopic: 'Flutter tips for 2026',
      keywords: 'flutter, tips, dart, mobile',
    ),
  );

  // Print the generated content
  print(JsonEncoder.withIndent('  ').convert(content));
}
Enter fullscreen mode Exit fullscreen mode

This code sample:

  • Defines reusable input and output schemas using @Schema annotation
  • Configures the gemini-2.5-flash model
  • Defines a Genkit flow to generate structured content/article based on your input
  • Runs the flow with a sample input and prints the result

Genkit Dart uses build_runner to generate schema types. You’ll need to run it before your code will compile.

dart run build_runner build
Enter fullscreen mode Exit fullscreen mode

Why use flows?

  • Type-safe inputs and outputs: Define clear schemas for your data
  • Integrates with the Developer UI: Test and debug flows visually
  • Easy deployment as APIs: Deploy flows as HTTP endpoints
  • Built-in tracing and observability: Monitor performance and debug issues

Run your application

To run your application, run:

dart run
Enter fullscreen mode Exit fullscreen mode

You should see a structured content output in JSON format.

Test in the Developer UI

The Developer UI is a local tool for testing and inspecting Genkit components, like flows, with a visual interface.

Start the Developer UI

The Genkit CLI is required to run the Developer UI. If you followed the installation steps above, you already have it installed.

To inspect your app with Genkit Dev UI, run:

genkit start -- dart run
Enter fullscreen mode Exit fullscreen mode

The command will print the Dev UI URL:

Genkit Developer UI: http://localhost:4000
Enter fullscreen mode Exit fullscreen mode

Run and inspect flows

In the Developer UI:

  1. Select contentGenerator from the list of flows.
  2. Enter sample input: 
{
    "contentTopic": "Flutter tips for 2026",
    "keywords": "flutter, tips, dart, mobile"
}
Enter fullscreen mode Exit fullscreen mode

Next: Click Run

You’ll see the generated content as structured output, along with a visual trace of the AI generation process for debugging and optimization.

Genkit Developer UI

We are done implementing Genkit Dart in our backend. Next, we connect it to our Flutter frontend app.

Next steps

Create a new Flutter project:

flutter create content_generator
Enter fullscreen mode Exit fullscreen mode

Then, install the core Genkit package in pubspec

flutter pub add genkit schemantic
Enter fullscreen mode Exit fullscreen mode

The next thing is to create a router in the backend project for it to communicate with our frontend.

First, add the following dependencies to the backend project:

dart pub add genkit_shelf shelf shelf_router shelf_cors_headers
Enter fullscreen mode Exit fullscreen mode

In bin/ai_content_generator_backend.dart, add the following code under the print statement:

void main() async {
  // ... previous code

  // Router() creates a request router that maps URLs to handlers:
  final router = Router()
    ..post('/contentGenerator', shelfHandler(contentGenerator));

  // A chain of middleware + a final handler:
  final handler = Pipeline()
      .addMiddleware(corsHeaders())
      .addHandler(router.call);

  // Start the HTTP server — binds to localhost:3400 and listens for incoming
  // requests:
  await io.serve(handler, 'localhost', 3400);

  print('Serving at http://localhost:3400');
}
Enter fullscreen mode Exit fullscreen mode

Full source code here

In your service file in the frontend app, you can communicate with the backend endpoint via http://localhost:3400/contentGenerator

import 'package:genkit/client.dart';
import '../models/content_models.dart';

class ContentService {
  final _action = defineRemoteAction(
    url: 'http://localhost:3400/contentGenerator',
    inputSchema: ContentInput.$schema,
    outputSchema: Content.$schema,
  );

  Future<Content> generateContent({
    required String topic,
    String? keywords,
  }) async {
    try {
      final input = ContentInput(contentTopic: topic, keywords: keywords);
      final result = await _action(input: input);
      return result;
    } catch (e) {
      throw Exception(
        'Failed to communicate with content generator backend: $e',
      );
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

AI Content Generator

GitHub logo techwithsam / ai_content_generator

Genkit Dart for Flutter Developers: Build Full-Stack AI Apps in 2026 (Getting Started)

content_generator

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

ai_content_generator


View on GitHub


There you have it — Genkit Dart lets Flutter developers finally build real full-stack AI apps without leaving the Dart ecosystem.

If this article helped you even a little, smash that like button and subscribe so you don’t miss the next deep-dive.

Lastly, if you’re serious about mastering AI tools like this, join my free Flutter + AI newsletter. Every week, I share the exact prompts, workflows, and early access to new agent skills that I test before they hit YouTube. Completely free, no spam. https://techwithsam.dev/newsletter — I’d love to see you there!

Drop a comment and tell me: What’s the first AI feature you want to build in your Flutter app this year? Content generator, image creator, smart chat, or something else?

Thanks for reading, Flutter fam.

See you in the next one — peace! ✌️

Samuel Adekunle
Tech With Sam
YouTube.

Top comments (0)