Updated 4 July 2025
In this blog we will discuss about how to we build Agentics Apps in Flutter.
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.
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.
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.
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.
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.
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.
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.
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.
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.
We are going to implement this using Flutter so we need to follow below steps to implement this topic.
First, we need to create a new Flutter project and add the following dependency to the pubspec.yaml file.
1 2 3 4 |
dependencies: flutter: sdk: flutter http: ^1.4.0 |
You need to add latest version of this package.
In this step you need to create a StatefulWidget for the showing result at screen.
1 2 3 4 5 6 |
class AgenticHomePage extends StatefulWidget { const AgenticHomePage({Key? key}) : super(key: key); @override State<AgenticHomePage> createState() => _AgenticHomePageState(); } |
Define Controllers and API Keys in this steps.
1 2 3 4 5 6 7 8 9 10 11 |
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 |
Define the _askAgent()
method in the following steps:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
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); } } |
In this steps we will create the UI, you need to add below mention code to build the Ui.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
@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]), ), ), ) ], ), ), ); } } |
Agentic apps in Flutter use AI agents to automate tasks like planning, decision-making, and content generation.
They combine user input, real-time data (e.g., weather), and APIs (like Gemini) to deliver smart, personalized results.
In this blog, we have explored how to use Agentics Apps in flutter.
You can also check other blogs from here for more knowledge.
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.