Agentics Apps in Flutter

In this blog we will discuss about how to we build Agentics Apps in Flutter.

Introduction

Agentic apps in Flutter are applications that leverage autonomous, intelligent agents to perform tasks automatically.

These agents can make decisions, respond to real-time events, and operate in the background without constant user input.

By using intelligent logic and contextual awareness, these apps aim to simplify complex workflows and enhance user experiences through automation.

What is Agentics?

An agent is an entity that can perceive its environment, make decisions, and take actions to achieve goals. Agentics focuses on understanding or designing the behavior of such entities.

An agentic app is powered by an intelligent agent — combining an LLM, a user goal, and tools like APIs — to actively help users. Learn more in this Flutter guide on building agentic apps.

Instead of just displaying data, it thinks, plans, and acts to assist users proactively.

For example, a travel app that not only shows places but also creates a smart packing list based on your trip, or an email app that turns unread messages into an actionable to-do list.

How Does an Agentic App Work in Flutter?

An agentic app in Flutter connects your app UI with a backend powered by a Large Language Model (LLM) (like GPT-4), which can think and act like an assistant.

An agentic app is powered by an intelligent agent — combining an LLM, a user goal, and tools like APIs — to actively help users.

Instead of just displaying data, it thinks, plans, and acts to assist users proactively.

For example, a travel app that not only shows places but also creates a smart packing list based on your trip, or an email app that turns unread messages into an actionable to-do list.

Components:

User Input (Goal) – The user enters a goal (e.g., “Plan my weekend trip”).
LLM Agent (Brain) – The backend agent (using an LLM) understands the goal and decides what needs to be done. Read more about using open-source LLMs in mobile devices.
Tools & APIs – The agent uses tools like weather APIs, calendar access, or email parsing.
Output/Action – The Flutter app displays the results (like a packing list or a to-do list).

Why Do We Use Agentics ?

This are smart apps that use AI agents to think, make decisions, and take actions on their own to help users reach their goals — often without needing much input from the user.

We use this because they go beyond regular tools — instead of just helping you do something, they understand what you want and try to do it for you, like a helpful assistant.

1. They Do Tasks for You Automatically:

Agentic apps can handle big tasks with many steps by themselves.

Example: Book a full trip for you — checking weather, your likes, your budget, and visa rules.

2. They Help Without Being Asked:

These apps don’t wait for you to tell them what to do — they give smart suggestions on their own.

Example: Remind you to take an umbrella if it might rain and you have an event outside.

3. They Learn What You Like:

They get smarter over time by learning your habits and adjusting to them.

Example: A workout app that changes your exercise plan based on your sleep and progress.

4. They Understand Your Situation:

They use info like your location, schedule, and preferences to make better choices.

Example: Turn your phone to silent during meetings or choose the best driving route based on traffic.

Implementation

We are going to implement this using Flutter so we need to follow below steps to implement this topic.

Step 1:

First, we need to create a new Flutter project and add the following dependency to the pubspec.yaml file. You can find it on the pub.dev site.

dependencies:
  flutter:
    sdk: flutter
  http: ^1.4.0

dependencies:

flutter:

sdk: flutter

http: ^1.4.0

You need to add latest version of this package.

Step 2:

In this step you need to create a StatefulWidget for the showing result at screen.

class AgenticHomePage extends StatefulWidget {
  const AgenticHomePage({Key? key}) : super(key: key);

  @override
  State<AgenticHomePage> createState() => _AgenticHomePageState();
}

class AgenticHomePage extends StatefulWidget {

const AgenticHomePage({Key? key}) : super(key: key);

@override

State<AgenticHomePage> createState() => _AgenticHomePageState();

}

Step 3:

Define Controllers and API Keys in this steps.

class _AgenticHomePageState extends State<AgenticHomePage> {
  final TextEditingController _locationController = TextEditingController();
  final TextEditingController _daysController = TextEditingController();
  String _response = "Enter destination, days, lat & lon to ask agent.";
  bool _isLoading = false;

  final String _geminiApiKey = "YOUR_GEMINI_API_KEY";
  final String _owmApiKey = "YOUR_OPENWEATHERMAP_API_KEY";

  double _lat = 25.276987; // Default lat
  double _lon = 55.296249; // Default lon

class _AgenticHomePageState extends State<AgenticHomePage> {

final TextEditingController _locationController = TextEditingController();

final TextEditingController _daysController = TextEditingController();

String _response = "Enter destination, days, lat & lon to ask agent.";

bool _isLoading = false;

final String _geminiApiKey = "YOUR_GEMINI_API_KEY";

final String _owmApiKey = "YOUR_OPENWEATHERMAP_API_KEY";

double _lat = 25.276987; // Default lat

double _lon = 55.296249; // Default lon

Step 4:

Define the _askAgent() method in the following steps:

Validate the input and set Loading.
Fetch weather data from OpenWeatherMap.
Generate a prompt.
Call the Gemini API.
Extract and display the response.

  Future<void> _askAgent() async {
    final dest = _locationController.text.trim();
    final days = _daysController.text.trim();
    if (dest.isEmpty || days.isEmpty) {
      setState(() => _response = "Please enter destination and days.");
      return;
    }

    setState(() {
      _isLoading = true;
      _response = "Agent is thinking...";
    });
    try {
      final weatherUrl = Uri.parse(
        'https://api.openweathermap.org/data/2.5/weather?lat=$_lat&lon=$_lon&appid=$_owmApiKey&units=metric',
      );
      final weatherRes = await http.get(weatherUrl);
      if (weatherRes.statusCode != 200) {
        throw Exception("Failed to fetch weather data.");
      }

      final weatherData = json.decode(weatherRes.body);

      print("Main Weather Data====>${weatherData}");
      final temp = weatherData['main']['temp'];
      final condition = weatherData['weather'][0]['description'];

      final weather = "Temperature: ${temp}°C, Conditions: $condition";

      print("Weather Data ===>${weather}");

      final prompt =
          "I'm traveling to $dest for $days days. The weather there is: $weather. Give me a detailed packing list.";

      final geminiUrl = Uri.parse(
        'https://generativelanguage.googleapis.com/v1/models/gemini-1.5-flash:generateContent?key=$_geminiApiKey',
      );

      final geminiResponse = await http.post(
        geminiUrl,
        headers: {'Content-Type': 'application/json'},
        body: json.encode({
          "contents": [
            {
              "parts": [
                {"text": prompt}
              ]
            }
          ]
        }),
      );

      print("asdjhad===>${geminiResponse.body}");

      if (geminiResponse.statusCode != 200) {
        throw Exception("Gemini API error: ${geminiResponse.body}");
      }

      final geminiData = json.decode(geminiResponse.body);
      final resultText = geminiData['candidates']?[0]?['content']?['parts']?[0]?['text'];

      setState(() {
        _response = resultText ?? "No response received from Gemini.";
      });
    } catch (e) {
      setState(() {
        _response = "An error occurred: $e";
      });
    } finally {
      setState(() => _isLoading = false);
    }
  }

Future<void> _askAgent() async {

final dest = _locationController.text.trim();

final days = _daysController.text.trim();

if (dest.isEmpty || days.isEmpty) {

setState(() => _response = "Please enter destination and days.");

return;

}

setState(() {

_isLoading = true;

_response = "Agent is thinking...";

});

try {

final weatherUrl = Uri.parse(

'https://api.openweathermap.org/data/2.5/weather?lat=$_lat&lon=$_lon&appid=$_owmApiKey&units=metric',

);

final weatherRes = await http.get(weatherUrl);

if (weatherRes.statusCode != 200) {

throw Exception("Failed to fetch weather data.");

}

final weatherData = json.decode(weatherRes.body);

print("Main Weather Data====>${weatherData}");

final temp = weatherData['main']['temp'];

final condition = weatherData['weather'][0]['description'];

final weather = "Temperature: ${temp}°C, Conditions: $condition";

print("Weather Data ===>${weather}");

final prompt =

"I'm traveling to $dest for $days days. The weather there is: $weather. Give me a detailed packing list.";

final geminiUrl = Uri.parse(

'https://generativelanguage.googleapis.com/v1/models/gemini-1.5-flash:generateContent?key=$_geminiApiKey',

);

final geminiResponse = await http.post(

geminiUrl,

headers: {'Content-Type': 'application/json'},

body: json.encode({

"contents": [

{

"parts": [

{"text": prompt}

]

}

]

}),

);

print("asdjhad===>${geminiResponse.body}");

if (geminiResponse.statusCode != 200) {

throw Exception("Gemini API error: ${geminiResponse.body}");

}

final geminiData = json.decode(geminiResponse.body);

final resultText = geminiData['candidates']?[0]?['content']?['parts']?[0]?['text'];

setState(() {

_response = resultText ?? "No response received from Gemini.";

});

} catch (e) {

setState(() {

_response = "An error occurred: $e";

});

} finally {

setState(() => _isLoading = false);

}

Step 5:

In this steps we will create the UI, you need to add below mention code to build the Ui.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Agentic Weather Packing List'),
        backgroundColor: Colors.blueGrey[800],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _locationController,
              decoration: const InputDecoration(
                labelText: 'Destination',
                hintText: 'e.g., Dubai',
              ),
            ),
            const SizedBox(height: 10),
            TextField(
              controller: _daysController,
              decoration: const InputDecoration(
                labelText: 'Number of Days',
                hintText: 'e.g., 5',
              ),
              keyboardType: TextInputType.number,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _isLoading ? null : _askAgent,
              child: _isLoading
                  ? const CircularProgressIndicator(color: Colors.white)
                  : const Text('Ask Agent'),
            ),
            const SizedBox(height: 30),
            Expanded(
              child: SingleChildScrollView(
                child: Text(
                  _response,
                  style: TextStyle(fontSize: 16, color: Colors.blueGrey[800]),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Agentic Weather Packing List'),

backgroundColor: Colors.blueGrey[800],

body: Padding(

padding: const EdgeInsets.all(16.0),

child: Column(

children: [

TextField(

controller: _locationController,

decoration: const InputDecoration(

labelText: 'Destination',

hintText: 'e.g., Dubai',

const SizedBox(height: 10),

TextField(

controller: _daysController,

decoration: const InputDecoration(

labelText: 'Number of Days',

hintText: 'e.g., 5',

keyboardType: TextInputType.number,

const SizedBox(height: 20),

ElevatedButton(

onPressed: _isLoading ? null : _askAgent,

child: _isLoading

? const CircularProgressIndicator(color: Colors.white)

: const Text('Ask Agent'),

const SizedBox(height: 30),

Expanded(

child: SingleChildScrollView(

child: Text(

_response,

style: TextStyle(fontSize: 16, color: Colors.blueGrey[800]),

)

);

}

Output