Hey guys! Welcome to Part 3 of our Dart Frog series. If you missed Part 1 and Part 2, we set up Dart Frog and built a CRUD API for our Task App with hot reload. Watch it now if you’re new!
Today is the payoff: Connecting a Flutter frontend to our Dart Frog server for true full-stack Dart—no Firebase, no Supabase — just pure Dart magic.
We’ll build a Todo/Task app that allows users to create, read, update, and delete tasks. All talking to our local server.
Watch the full tutorial here: <a href="https://youtu.be/AIdENvxXAL0" target="_blank" rel="noopener nofollow">https://youtu.be/AIdENvxXAL0</a>
<h2>Planning &amp; Setup</h2>
Quick plan: Reuse the Todo API from Part 2. In Flutter:
<ul>
<li>
Dio for HTTP (better interceptors, error handling than http package)
</li>
<li>
Riverpod for state (AsyncNotifierProvider for API calls)
</li>
<li>
Simple UI: ListView + forms
</li>
</ul>
First, fix CORS in Dart Frog — add middleware. Open routes/todos:
Create a new Dart file inside the todos folder _middleware.dart
<pre><code class="language-dart">import ‘package:dart_frog/dart_frog.dart’;

Handler middleware(Handler handler) {
 return handler.use(requestLogger()).use(
 (handler) =&gt; (context) async {
 final response = await handler(context);
 return response.copyWith(
 headers: {
 ‘Access-Control-Allow-Origin’: ‘*’,
 ‘Access-Control-Allow-Methods’: ‘GET, POST, PUT, DELETE, OPTIONS’,
 ‘Access-Control-Allow-Headers’: ‘Content-Type’,
 },
 );
 },
 );
}
</code></pre>
For local testing: Use <a href="http://10.0.2.2:8080" target="_blank" rel="noopener nofollow">http://10.0.2.2:8080</a> on Android emulator (or your machine IP on a physical device, e.g., <a href="http://localhost:8080" target="_blank" rel="noopener nofollow">http://localhost:8080</a>).
Start Dart Frog dev server in one window: <code>dart_frog dev</code>.
New Flutter project: <code>flutter create todo_flutter</code>.
pubspec.yaml:
<pre><code class="language-yaml">dependencies:
 flutter_riverpod: ^3.2.0
 uuid: ^4.5.2
 dio: ^5.9.0
</code></pre>
Model (shareable later): lib/models/todo.dart
<pre><code class="language-dart">class Todo {
 final String id;
 final String title;
 final bool completed;

 Todo({required this.id, required this.title, this.completed = false});

 Todo copyWith({String? id, String? title, bool? completed}) {
 return Todo(
 id: id ?? this.id,
 title: title ?? this.title,
 completed: completed ?? this.completed,
 );
 }

 Map&lt;String, dynamic&gt; toJson() {
 return {’id’: id, ‘title’: title, ‘isCompleted’: completed};
 }

 factory Todo.fromJson(Map&lt;String, dynamic&gt; json) {
 return Todo(
 id: json[’id’],
 title: json[’title’],
 completed: json[’isCompleted’],
 );
 }
}
</code></pre>
Dio setup: lib/services/api_service.dart
<pre><code class="language-dart">import ‘dart:io’;

import ‘package:dio/dio.dart’;
import ‘package:flutter_todo_dart_frog/models/todo.dart’;

class ApiService {
 final Dio _dio = Dio(
 BaseOptions(
 baseUrl: Platform.isAndroid
 ? “http://10.0.2.2:8080”
 : “http://localhost:8080”,
 connectTimeout: const Duration(seconds: 5),
 receiveTimeout: const Duration(seconds: 5),
 ),
 );

 Future&lt;List&lt;Todo&gt;&gt; getTodos() async {
 try {
 final response = await _dio.get(’/todos’);
 if (response.data is List) {
 final todos = (response.data as List)
 .map((todoJson) =&gt; Todo.fromJson(todoJson as Map&lt;String, dynamic&gt;))
 .toList();
 return todos;
 }
 return [];
 } catch (e) {
 rethrow;
 }
 }

 Future&lt;void&gt; createTodo(Todo todo) async {
 try {
 await _dio.post(’/todos’, data: todo.toJson());
 } catch (e) {
 rethrow;
 }
 }

 Future&lt;void&gt; updateTodo(Todo todo) async {
 try {
 await _dio.put(’/todos/${todo.id}’, data: todo.toJson());
 } catch (e) {
 rethrow;
 }
 }

 Future&lt;void&gt; deleteTodo(String id) async {
 try {
 await _dio.delete(’/todos/$id’);
 } catch (e) {
 rethrow;
 }
 }
}
</code></pre>
Riverpod providers: lib/providers/todo_provider.dart
<pre><code class="language-dart">import ‘package:flutter_riverpod/flutter_riverpod.dart’;
import ‘package:flutter_todo_dart_frog/models/todo.dart’;
import ‘package:flutter_todo_dart_frog/services/api_service.dart’;
import ‘package:uuid/uuid.dart’;

final apiServiceProvider = Provider((ref) =&gt; ApiService());

final todoListProvider = AsyncNotifierProvider&lt;TodoListNotifier, List&lt;Todo&gt;&gt;(
 () {
 return TodoListNotifier();
 },
);

class TodoListNotifier extends AsyncNotifier&lt;List&lt;Todo&gt;&gt; {
 @override
 Future&lt;List&lt;Todo&gt;&gt; build() async {
 return ref.watch(apiServiceProvider).getTodos();
 }

 Future&lt;void&gt; addTodo(String title) async {
 state = const AsyncLoading();
 state = await AsyncValue.guard(() async {
 final newTodo = Todo(
 id: const Uuid().v4(),
 title: title,
 completed: false,
 );
 await ref.read(apiServiceProvider).createTodo(newTodo);
 final todos = await ref.read(apiServiceProvider).getTodos();
 return todos;
 });
 }

 Future&lt;void&gt; toggleTodo(Todo todo) async {
 state = const AsyncLoading();
 state = await AsyncValue.guard(() async {
 final updatedTodo = todo.copyWith(completed: !todo.completed);
 await ref.read(apiServiceProvider).updateTodo(updatedTodo);
 final todos = await ref.read(apiServiceProvider).getTodos();
 return todos;
 });
 }

 Future&lt;void&gt; deleteTodo(String id) async {
 state = const AsyncLoading();
 state = await AsyncValue.guard(() async {
 await ref.read(apiServiceProvider).deleteTodo(id);
 final todos = await ref.read(apiServiceProvider).getTodos();
 return todos;
 });
 }
}
</code></pre>
lib/main.dart (add google_fonts package):
<pre><code class="language-dart">import ‘package:flutter/material.dart’;
import ‘package:flutter_riverpod/flutter_riverpod.dart’;
import ‘package:google_fonts/google_fonts.dart’;
import ‘home.dart’;

void main() {
 runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: ‘Premium Todo’,
 debugShowCheckedModeBanner: false,
 theme: ThemeData(
 useMaterial3: true,
 colorScheme: ColorScheme.fromSeed(
 seedColor: const Color(0xFF6750A4),
 brightness: Brightness.light,
 ),
 textTheme: GoogleFonts.outfitTextTheme(),
 ),
 darkTheme: ThemeData(
 useMaterial3: true,
 colorScheme: ColorScheme.fromSeed(
 seedColor: const Color(0xFFD0BCFF),
 brightness: Brightness.dark,
 ),
 textTheme: GoogleFonts.outfitTextTheme(ThemeData.dark().textTheme),
 ),
 home: const TodoListScreen(),
 );
 }
}
</code></pre>
lib/home.dart (check it on GitHub daily dev limit).
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4x7yr8na3iu9jfva2w0.png" alt="App screenshots">
Source Code 👇 — Show some ❤️ by starring ⭐ the repo and follow me 😄! <a href="https://github.com/techwithsam/dart_frog_full_course_tutorial" target="_blank" rel="noopener nofollow">https://github.com/techwithsam/dart_frog_full_course_tutorial</a>
This is your first real full-stack project with pure Dart and Flutter — congrats! Next part: Authentication (JWT) and deployment with Dart Globe.
Samuel Adekunle, Tech With Sam <a href="https://youtube.com/@techwithsam" target="_blank" rel="noopener nofollow">YouTube</a>

Samuel Adekunle

A step-by-step tutorial demonstrating how to connect a Flutter frontend to a Dart Frog backend server to build a full-stack todo application. Covers CORS configuration, setting up Dio for HTTP requests, implementing Riverpod for state management, creating a shared Todo model, and building CRUD operations (create, read, update, delete) that communicate with a local Dart Frog API. Includes complete code examples for API service layer, Riverpod providers, and UI implementation.

Dart Frog Part 3: Connecting Flutter to Your Dart Backend (Full-Stack Todo Demo) 🐸