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!
<a href="https://youtu.be/_YPw1bCNpTo?si=RowIPPDvBlhbg9YD" target="_blank" rel="noopener nofollow">Watch The Full Tutorial Here</a>
<h2>WHAT IS GENKIT DART &amp; WHY DOES IT MATTER FOR FLUTTER DEVS</h2>
So… what is Genkit?
<a href="https://genkit.dev/" target="_blank" rel="noopener nofollow">Genkit</a> 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:
<ul>
<li>You own the entire AI flow (client + backend)</li>
<li>Full type safety across the stack</li>
<li>Easy integration with Gemini, Nano Banana, Vertex AI, Anthropic, OpenAI, Cohere, Ollama, and more</li>
<li>Perfect for production apps that need secure backend AI logic (Built and used in production by Google).</li>
</ul>
Client-side AI is great for speed and offline, but real production apps need a backend. Genkit Dart gives you both stress-free.
<h2>CLIENT-SIDE vs BACKEND AI PATTERNS (Quick Comparison)</h2>
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 🤷‍♂️
<h2>SETTING UP GENKIT DART</h2>
Create a new Dart project:
<pre><code>dart create -t console-simple ai_content_generator_backend
cd ai_content_generator_backend
</code></pre>
<h2>Install Genkit packages</h2>
First, install the Genkit CLI. This gives you access to local developer tools, including the Developer UI:
<pre><code>curl -sL cli.genkit.dev | bash
</code></pre>
Then, install the core Genkit package, the Google AI plugin, and the build_runner dev dependency (for schema generation):
<pre><code>dart pub add genkit genkit_google_genai schemantic dev:build_runner
</code></pre>
<h2>Configure your model API key</h2>
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 <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener nofollow">Google AI Studio</a>. Once you have a key, set the <code>GEMINIAPIKEY</code> environment variable:
<img src="https://media.daily.dev/image/upload/s--wyqv17bw--/f_auto/v1775552419/ugc/content_5c23a0e5-7199-4770-bdb9-d90a15d8c59c?_a=BAMAMiWQ0" alt="Screenshot 2026-04-06 at 15.23.11.png">
<pre><code>export GEMINI_API_KEY=&lt;your API key&gt; // e.g export GEMINI_API_KEY=1234
</code></pre>
That’s it, you now have a full Genkit backend with Dart setup.
<h2>BUILDING YOUR FIRST AI FLOW — Content Generator</h2>
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 <code>bin/aicontentgenerator_backend.dart</code> with the following code:
<pre><code>import &#x27;dart:convert&#x27;;

import &#x27;package:genkit/genkit.dart&#x27;;
import &#x27;package:genkit_google_genai/genkit_google_genai.dart&#x27;;
import &#x27;package:schemantic/schemantic.dart&#x27;;

part &#x27;ai_content_generator_backend.g.dart&#x27;;

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

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

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

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

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

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

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

 // Print the generated content
 print(JsonEncoder.withIndent(&#x27; &#x27;).convert(content));
}
</code></pre>
This code sample:
<ul>
<li>Defines reusable input and output schemas using <code>@Schema</code> annotation</li>
<li>Configures the <code>gemini-2.5-flash</code> model</li>
<li>Defines a Genkit flow to generate structured content/article based on your input</li>
<li>Runs the flow with a sample input and prints the result</li>
</ul>
Genkit Dart uses <code>build_runner</code> to generate schema types. You’ll need to run it before your code will compile.
<pre><code>dart run build_runner build
</code></pre>
<h2>Why use flows?</h2>
<ul>
<li>Type-safe inputs and outputs: Define clear schemas for your data</li>
<li>Integrates with the Developer UI: Test and debug flows visually</li>
<li>Easy deployment as APIs: Deploy flows as HTTP endpoints</li>
<li>Built-in tracing and observability: Monitor performance and debug issues</li>
</ul>
<h2>Run your application</h2>
To run your application, run:
<pre><code>dart run
</code></pre>
You should see a structured content output in JSON format.
<h2>Test in the Developer UI</h2>
The Developer UI is a local tool for testing and inspecting Genkit components, like flows, with a visual interface.
<h2>Start the Developer UI</h2>
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:
<pre><code>genkit start -- dart run
</code></pre>
The command will print the Dev UI URL:
<pre><code>Genkit Developer UI: http://localhost:4000
</code></pre>
<h2>Run and inspect flows</h2>
In the Developer UI:
<ol>
<li>Select <code>contentGenerator</code> from the list of flows.</li>
<li>Enter sample input:</li>
</ol>
<pre><code>{
 &quot;contentTopic&quot;: &quot;Flutter tips for 2026&quot;,
 &quot;keywords&quot;: &quot;flutter, tips, dart, mobile&quot;
}
</code></pre>
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.
<img src="https://media.daily.dev/image/upload/s--bOGt1fke--/f_auto/v1775552442/ugc/content_42096632-2e73-4ea7-8a50-45cabde38704?_a=BAMAMiWQ0" alt="Screenshot 2026-04-06 at 15.37.09.png">
We are done implementing Genkit Dart in our backend. Next, we connect it to our Flutter frontend app.
<h2>Next steps</h2>
Create a new Flutter project:
<pre><code>flutter create content_generator
</code></pre>
Then, install the core Genkit package in pubspec
<pre><code>flutter pub add genkit schemantic
</code></pre>
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:
<pre><code>dart pub add genkit_shelf shelf shelf_router shelf_cors_headers
</code></pre>
In <code>bin/aicontentgenerator_backend.dart</code>, add the following code under the print statement:
<pre><code>void main() async {
 // ... previous code

 // Router() creates a request router that maps URLs to handlers:
 final router = Router()
 ..post(&#x27;/contentGenerator&#x27;, 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, &#x27;localhost&#x27;, 3400);

 print(&#x27;Serving at http://localhost:3400&#x27;);
}
</code></pre>
<a href="https://github.com/techwithsam" target="_blank" rel="noopener nofollow">Full source code here</a>
In your service file in the frontend app, you can communicate with the backend endpoint via <code>http://localhost:3400/contentGenerator</code>
<pre><code>import &#x27;package:genkit/client.dart&#x27;;
import &#x27;../models/content_models.dart&#x27;;

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

 Future&lt;Content&gt; 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(
 &#x27;Failed to communicate with content generator backend: $e&#x27;,
 );
 }
 }
}
</code></pre>
<img src="https://media.daily.dev/image/upload/s--ueuSpl1Q--/f_auto/v1775552465/ugc/content_e0d4478d-106d-4c20-a29b-f0a6b9404ab4?_a=BAMAMiWQ0" alt="Screenshot 2026-04-06 at 16.11.08.png">
<a href="https://github.com/techwithsam/ai_content_generator" target="_blank" rel="noopener nofollow">https://github.com/techwithsam/ai_content_generator</a>
If this article helped you even a little, smash that like button and subscribe so you don’t miss the next deep-dive.
Drop a comment and tell me: What’s the first AI feature you want to build in your Flutter app this year?
Thanks for reading, Flutter fam.
See you in the next one — peace! ✌️
Samuel Adekunle
Tech With Sam
<a href="https://youtube.com/@techwithsam" target="_blank" rel="noopener nofollow">YouTube.</a>

Samuel Adekunle

Genkit Dart is Google's open-source framework that lets Flutter developers build full-stack AI apps entirely in Dart. This getting-started guide walks through setting up a Genkit Dart backend, defining typed AI flows using schemas, integrating the Gemini API, and connecting the backend to a Flutter frontend via an HTTP endpoint using shelf. The tutorial covers installing the Genkit CLI and packages, building a content generator flow with structured input/output schemas, testing with the Genkit Developer UI, and exposing the flow as a REST API consumed by the Flutter client.

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