# Building Agentic Flutter Apps with Gemini/Gemma

AI has moved beyond static chatbots. The next wave of applications are **agentic apps** — AI-powered apps that can **reason, act, and adapt dynamically** to user needs. Instead of waiting for pre-defined screens, these apps use LLMs like **Gemini (Google DeepMind)** and **Gemma (open-source)** to decide *what the UI should look like, what data to fetch, and which action to take next*.

In this article, we’ll explore how you can build an **agentic Flutter app** that integrates with Gemini/Gemma to provide an adaptive, intelligent user experience.

## What Are Agentic Apps?

An **agentic app** is different from a traditional AI app:

* **Traditional AI app** → User asks a question, AI responds in text.
    
* **Agentic app** → AI can:
    
    * Change the UI dynamically (e.g., show a chart if the user asks for data).
        
    * Trigger system actions (e.g., call an API, schedule a task).
        
    * Remember context and adapt over time.
        

Think of it as **ChatGPT + Actions + UI Generation** inside Flutter.

## Why Flutter?

Flutter is uniquely positioned to power agentic apps because of:

* **Dynamic UI rendering** → Widgets can be generated from JSON or AI instructions.
    
* **Cross-platform reach** → One agent can power mobile, web, and desktop.
    
* **Rich ecosystem** → Easy integration with APIs, state management, and local storage.
    

## Example Use Case: AI Travel Planner

Let’s say you’re building a **travel planner agent**:

1. User: *“Plan me a 3-day trip to Nairobi under $500.”*
    
2. Gemini: Returns structured JSON describing the itinerary.
    
3. Flutter: Renders a custom itinerary UI with cards, maps, and action buttons.
    

## High-Level Architecture

```dart
+-------------------+
|   Flutter App     |
|-------------------|
| - Dynamic UI      |
| - Action Handlers |
+---------+---------+
          |
          v
+-------------------+
| Gemini / Gemma    |
| (Reason + Output) |
+---------+---------+
          |
          v
+-------------------+
| Backend / APIs    |
| (Flights, Hotels) |
+-------------------+
```

* Flutter handles **UI rendering & action triggers**.
    
* Gemini/Gemma handles **reasoning & planning**.
    
* Backend APIs provide **real-world data**.
    

## Flutter + Gemini Example

Here’s a simplified flow:

### Step 1: Install HTTP or `google_generative_ai`

```dart
dependencies:
  http: ^1.2.0
  google_generative_ai: ^0.4.2
```

### Step 2: Call Gemini / Gemma

```dart
import 'package:google_generative_ai/google_generative_ai.dart';

final model = GenerativeModel(
  model: 'gemini-pro',
  apiKey: 'YOUR_API_KEY',
);

Future<String> askGemini(String prompt) async {
  final response = await model.generateContent([Content.text(prompt)]);
  return response.text ?? "No response";
}
```

### Step 3: Parse AI Output Into Widgets

If Gemini outputs JSON like:

```dart
{
  "type": "itinerary",
  "days": [
    { "day": 1, "activity": "Visit Nairobi National Park" },
    { "day": 2, "activity": "Safari at Maasai Mara" }
  ]
}
```

You can map it into Flutter UI:

```dart
Widget buildItinerary(List<dynamic> days) {
  return ListView.builder(
    itemCount: days.length,
    itemBuilder: (context, index) {
      final day = days[index];
      return Card(
        child: ListTile(
          title: Text("Day ${day['day']}"),
          subtitle: Text(day['activity']),
        ),
      );
    },
  );
}
```

## Adding Agency: Actions + Decisions

The real power comes when the AI doesn’t just generate text, but decides **what the app should do**.

For example:

```dart
{
  "action": "fetch_hotels",
  "location": "Nairobi",
  "budget": 200
}
```

Flutter can interpret this and **call your backend API**, then update the UI accordingly.

## Challenges to Consider

* **Security** → Don’t let AI directly execute arbitrary actions without validation.
    
* **Prompt Engineering** → Design prompts that constrain the model’s output (JSON, Markdown, etc.).
    
* **Latency** → Gemini calls may be slow; use async loading states.
    
* **Costs** → API calls to LLMs can add up; consider caching results.
    
    ## The Future: Fully Adaptive Apps
    

Agentic Flutter apps are just beginning. Imagine apps that:

* Redesign their dashboards based on user goals.
    
* Act as personal assistants inside any workflow.
    
* Seamlessly blend **UI + AI + real-world APIs**.
    

With Gemini and Gemma, you’re not just building apps you’re building **digital teammates**