Forem: Samuel Adekunle

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

Samuel Adekunle — Tue, 07 Apr 2026 09:24:47 +0000

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!

WHAT IS GENKIT DART & WHY DOES IT MATTER FOR FLUTTER DEVS

So… what is Genkit?

Genkit 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:

You own the entire AI flow (client + backend)
Full type safety across the stack
Easy integration with Gemini, Nano Banana, Vertex AI, Anthropic, OpenAI, Cohere, Ollama, and more
Perfect for production apps that need secure backend AI logic (Built and used in production by Google).

Client-side AI is great for speed and offline, but real production apps need a backend. Genkit Dart gives you both stress-free.

CLIENT-SIDE vs BACKEND AI PATTERNS (Quick Comparison)

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 🤷‍♂️

SETTING UP GENKIT DART

Create a new Dart project:

dart create -t console-simple ai_content_generator_backend
cd ai_content_generator_backend

Install Genkit packages

First, install the Genkit CLI. This gives you access to local developer tools, including the Developer UI:

curl -sL cli.genkit.dev | bash

Then, install the core Genkit package, the Google AI plugin, and the build_runner dev dependency (for schema generation):

dart pub add genkit genkit_google_genai schemantic dev:build_runner

Configure your model API key

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 Google AI Studio. Once you have a key, set the GEMINI_API_KEY environment variable:

export GEMINI_API_KEY=<your API key> // e.g export GEMINI_API_KEY=1234

That’s it, you now have a full Genkit backend with Dart setup.

BUILDING YOUR FIRST AI FLOW — Content Generator

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 bin/ai_content_generator_backend.dart with the following code:

import 'dart:convert';

import 'package:genkit/genkit.dart';
import 'package:genkit_google_genai/genkit_google_genai.dart';
import 'package:schemantic/schemantic.dart';

part 'ai_content_generator_backend.g.dart';

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

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

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

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

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

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

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

  // Print the generated content
  print(JsonEncoder.withIndent('  ').convert(content));
}

This code sample:

Defines reusable input and output schemas using @Schema annotation
Configures the gemini-2.5-flash model
Defines a Genkit flow to generate structured content/article based on your input
Runs the flow with a sample input and prints the result

Genkit Dart uses build_runner to generate schema types. You’ll need to run it before your code will compile.

dart run build_runner build

Why use flows?

Type-safe inputs and outputs: Define clear schemas for your data
Integrates with the Developer UI: Test and debug flows visually
Easy deployment as APIs: Deploy flows as HTTP endpoints
Built-in tracing and observability: Monitor performance and debug issues

Run your application

To run your application, run:

dart run

You should see a structured content output in JSON format.

Test in the Developer UI

The Developer UI is a local tool for testing and inspecting Genkit components, like flows, with a visual interface.

Start the Developer UI

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:

genkit start -- dart run

The command will print the Dev UI URL:

Genkit Developer UI: http://localhost:4000

Run and inspect flows

In the Developer UI:

Select contentGenerator from the list of flows.
Enter sample input:

{
    "contentTopic": "Flutter tips for 2026",
    "keywords": "flutter, tips, dart, mobile"
}

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.

We are done implementing Genkit Dart in our backend. Next, we connect it to our Flutter frontend app.

Next steps

Create a new Flutter project:

flutter create content_generator

Then, install the core Genkit package in pubspec

flutter pub add genkit schemantic

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:

dart pub add genkit_shelf shelf shelf_router shelf_cors_headers

In bin/ai_content_generator_backend.dart, add the following code under the print statement:

void main() async {
  // ... previous code

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

  print('Serving at http://localhost:3400');
}

Full source code here

In your service file in the frontend app, you can communicate with the backend endpoint via http://localhost:3400/contentGenerator

import 'package:genkit/client.dart';
import '../models/content_models.dart';

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

  Future<Content> 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(
        'Failed to communicate with content generator backend: $e',
      );
    }
  }
}

techwithsam / ai_content_generator

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

content_generator

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

ai_content_generator

View on GitHub

There you have it — Genkit Dart lets Flutter developers finally build real full-stack AI apps without leaving the Dart ecosystem.

If this article helped you even a little, smash that like button and subscribe so you don’t miss the next deep-dive.

Lastly, if you’re serious about mastering AI tools like this, join my free Flutter + AI newsletter. Every week, I share the exact prompts, workflows, and early access to new agent skills that I test before they hit YouTube. Completely free, no spam. https://techwithsam.dev/newsletter — I’d love to see you there!

Drop a comment and tell me: What’s the first AI feature you want to build in your Flutter app this year? Content generator, image creator, smart chat, or something else?

Thanks for reading, Flutter fam.

See you in the next one — peace! ✌️

Samuel Adekunle
Tech With Sam
YouTube.

Gemini CLI + Flutter: The Most Powerful AI Coding Assistant Workflow in 2026

Samuel Adekunle — Sat, 28 Mar 2026 09:10:00 +0000

Query and edit large codebases, generate apps from images or PDFs, and automate complex workflows — all from your terminal with Gemini 3.

Today, I will guide you through how to set up Gemini CLI in your terminal and get it up and running for any of your projects.

Gemini CLI + Flutter is faster than Cursor, more accurate than GitHub Copilot for Flutter-specific stuff, and it integrates directly with Flutter SDK and its best practices.

No more context switching. No more “please generate clean code” prayers. Just precise, production-ready Flutter code in one command.

WHAT IS GEMINI CLI IN 2026?

Gemini CLI is Google’s official terminal-first AI that runs locally or in the cloud, understands your entire project/codebase, and speaks native Dart/Flutter or any other programming language.

Key upgrades:

Full project awareness (reads pubspec, lib structure, assets)
Native support for Riverpod 3+, Impeller, and the new Stitch/Antigravity plugins
Built-in testing and debugging agents
VS Code extension that turns it into a one-key superpower

Install command (copy-paste this):

dart pub global activate gemini_cli
gemini init flutter

SETUP + VS CODE INTEGRATION

Run gemini auth (uses your Google account )
In your Flutter project root: gemini project init
Install the official Gemini CLI VS Code extension (search “Gemini CLI” in extensions )

Now every time you highlight code and hit Cmd/Ctrl + Shift + G, you’re talking directly to Gemini inside the editor. Terminal or VS Code — your choice.

PROMPT ENGINEERING MASTERCLASS FOR FLUTTER

Golden Rule: Be ridiculously specific and give context.

Template 1 — Code Generation:

“Using Riverpod 3+ and the latest Flutter 3.29 best practices, generate a clean, typed [feature] provider with loading/error states. Include tests. Project uses Impeller and Material 3.”

Template 2 — Refactoring:

“Refactor this widget to fix Impeller jank. Use const constructors everywhere possible, move expensive computations outside build, and add a proper RepaintBoundary. Keep the same API.”

Template 3 — Debugging:

“Analyze this crash log and give me the exact one-line fix plus why it happens in the Impeller rendering pipeline.”

LIVE DEMO 1 — Generate a Riverpod Provider

Watch this in the terminal:

gemini flutter generate riverpod cart_provider --with-tests

You get a fully typed CartNotifier, provider, and two widget tests using riverpod_test.

LIVE DEMO 2 — Fix Impeller Jank on the Spot

I open a screen that’s dropping to 38 fps on iOS. Highlight the ListView, hit the Gemini button in VS Code, and type:

“Fix this ListView causing Impeller jank on iOS 18+. Use const, cache builders, and add proper RepaintBoundary without changing UI.”

Gemini spits out the fixed version with comments. I apply a hot restart, and we’re back at 120 fps.

LIVE DEMO 3 — Scaffold a Full Production Screen

Command:

gemini flutter scaffold screen profile --state=rp3 --features=analytics,theme,localization

It generates:

ProfileScreen with Riverpod 3+
Clean folder structure under lib/features/profile/
Theme-aware UI
Analytics events are already wired
Localization keys ready

TESTING + DEBUGGING INSIDE TERMINAL

Want to test the provider we just generated?

gemini flutter test cart_provider --watch

It runs only that file and even suggests edge cases I missed.

Debugging a widget rebuild storm?

gemini flutter debug rebuilds profile_screen

It shows you the exact culprit of the rebuild with a flame graph.

FINAL TIPS + COMMON PITFALLS

Always run gemini project sync after big pubspec changes
Use --local flag when you want zero cloud cost
Combine with Flutter AI Toolkit for even smarter multi-file refactors
Never accept the first output — iterate with “make it more concise” or “add error handling.”

Quick pause before we finish, if you’re serious about mastering AI tools like this, join my free Flutter + AI newsletter. Every week, I share the exact prompts, workflows, and early access to new agent skills that I test before they hit YouTube. Completely free, no spam — just the most relevant stuff for Flutter developers. https://techwithsam.dev/newsletter — I’d love to see you there!

That’s it — this is the most powerful AI coding workflow for Flutter devs in 2026, and it’s all inside your terminal.

Drop a like if you’re going to try one of these commands today, and tell me in the comments what you think about Gemini CLI

I’ll see you in the next one. Peace! ✌️

Samuel Adekunle | Tech With Sam | YouTube

Stitch + Antigravity + Flutter: Build Apps with AI Agents in 2026

Samuel Adekunle — Thu, 19 Mar 2026 18:21:10 +0000

In 2026, the way we build Flutter apps has completely changed. You no longer start by opening VS Code and typing widgets line by line.

Instead, you describe your app in plain English, an AI agent designs the entire UI, another agent writes and wires up the code, and you only guide the process.

That’s exactly what Google’s Stitch + Antigravity + Flutter combo delivers.

Today I’m going to show you the complete end-to-end workflow: from a simple prompt to a fully functional Flutter app in under a few minutes. This is the new skill every Flutter developer needs in 2026.

Why This Workflow Matters Right Now

Stitch is Google’s AI design agent. You give it a text prompt or even a rough sketch, and it instantly generates production-ready UI designs and structured metadata.

Antigravity is Google’s agentic IDE — a next-gen VS Code fork powered by Gemini. It doesn’t just suggest code; it plans, runs terminal commands, installs packages, writes tests, and iterates until the app works.

When you connect Stitch output to Antigravity via the new MCP (Model Context Protocol) connectors, the AI agent converts the design into real Flutter + Dart code.

This is what the community is calling “vibe coding” or “agentic development.” The developer is still in control — you review, tweak prompts, and make final decisions. But the heavy lifting is handled by agents.

Perfect for rapid prototyping, MVPs, or even production features.

Prerequisites & Setup

Before we build:

Flutter 3.27+ (stable)
Google account with access to Antigravity (antigravity.google)
Stitch access at stitch.withgoogle.com (Google Labs)

Step 1: Install Antigravity (it’s a separate IDE). Download from antigravity.google and open it.

Step 2: Enable MCP connectors in Antigravity settings (this links Stitch directly).

Step 3: Create a new Flutter project in Antigravity or create an empty folder and open it on Antigravity; it will handle every other setup.

Live Build Demo — Let’s Build a Real App. We’re going to build a simple ‘Daily Habit Tracker’ app using only prompts.

First, open Stitch:

Prompt:

Create a clean, modern mobile habit tracker application UI designed to help users build consistent daily routines and maintain positive habits. The design should feel minimal, motivating, and calming, encouraging users to stay consistent with their goals. Use a modern, accessible color system with a primary accent color and soft neutral backgrounds. Support both light mode and dark mode. Use rounded cards, subtle shadows, smooth spacing, and simple iconography to create a polished mobile experience. The application should include bottom navigation with the following sections:

Home / Today Screen

*   Display a daily streak counter at the top with a visually engaging streak indicator (flame or progress ring).

*   Show today’s habits list in card format.

*   Each habit should include:

    *   A checkbox or toggle to mark completion.

    *   Habit name.

    *   Optional small progress indicator.

*   Include a progress summary showing how many habits are completed for the day.

*   Add a motivational quote section at the bottom to inspire users.


Habits Screen

*   Display a list of all created habits.

*   Each habit card should show:

    *   Habit name

    *   Current streak

    *   Completion progress

*   Provide an “Add Habit” floating action button.

*   Allow editing or deleting habits.


Progress / Statistics Screen

*   Display weekly and monthly habit completion charts.

*   Show streak history and completion percentages.

*   Include visual elements like line charts or progress rings.


Profile / Settings Screen

*   Display a circular user avatar.

*   Show user statistics such as:

    *   Total habits created

    *   Longest streak

    *   Total days completed

*   Include settings such as:

    *   Dark mode toggle

    *   Notification reminders

    *   Habit reminder times


Design Style

*   Minimalist and modern mobile UI

*   Rounded cards and soft shadows

*   Smooth spacing and readable typography

*   Friendly icons and subtle animations

*   Clean bottom navigation bar

*   Consistent spacing and hierarchy

Stitch instantly generates the full UI design + metadata. Now select the screens generated by Stitch and click on Export — then select MCP

Now copy the Prompt and move to Antigravity:

Open the Agent Tab and paste the prompt from Stitch

After Antigravity is done downloading all the screens, then you can give it an instruction of what to build e.g

Use the UI layout generated from Stitch and build a Flutter application using Dart. 
The project should follow Clean Architecture and separate presentation, domain, and data layers. 
Use the Riverpod for state management. Ensure UI components are separated from business logic and follow a clear architecture project structure.

Watch the magic afterward. By the way, the AI Agent will ask for permission to run some commands; make sure you go through and approve accordingly.

After 10–12 minutes, run flutter run and the fully functional app appears on your emulator.

Best Practices & Pro Tips

Key lessons from using this daily:

Always start with a clear, detailed prompt in Stitch (include platform, theme, accessibility).
In Antigravity, use the ‘Manager Agent’ mode and give it one task at a time.
Review every generated file — AI is fast but not perfect yet (especially complex state logic).
Combine with your existing skills: Use Riverpod, GoRouter, and Impeller optimizations from my earlier videos.
Limitations: Native plugins and heavy custom logic still need human oversight.
Pro move: Save your best prompts as reusable skills in Antigravity for future projects.

This workflow is gaining traction in the Flutter community right now because it lets you go from idea to a working app faster than ever.

This is the new reality of Flutter development in 2026 — Stitch for design, Antigravity for agentic building, and you as the conductor.

Don’t forget to join my Free Newsletter: https://techwithsam.dev/newsletter

Samuel Adekunle, Tech With Sam YouTube

How to Push Over-the-Air (OTA) Flutter Updates with Shorebird - Complete 2026 Guide

Samuel Adekunle — Wed, 04 Mar 2026 09:55:00 +0000

One of the biggest frustrations for mobile devs is still waiting days or weeks for App Store or Play Store approvals to ship a small bug fix, UI tweak, or critical security patch.

What if you could push those changes instantly, over-the-air, directly to your users’ devices? No resubmission, no waiting, no lost users.

That’s exactly what Shorebird’s Code Push delivers: true over-the-air (OTA) updates for Dart code in Flutter apps. Today we’re doing a complete how-to: set up Shorebird from scratch, create your first release, push a patch live, and see it update in seconds. This is production-level magic, let’s get your app update-ready!

Prerequisites & Installation

Before we code, prerequisites:

Flutter 3.22+ (stable channel)
A Flutter project (new or existing)
macOS/Linux/Windows machine
Google/Apple developer accounts if releasing to stores

Step 1: Install the Shorebird CLI.

For macOS/Linux:

curl --proto ‘=https’ --tlsv1.2 https://raw.githubusercontent.com/shorebirdtech/install/main/install.sh -sSf | bash

For Windows (PowerShell):

Set-ExecutionPolicy RemoteSigned -scope CurrentUser # Needed to execute remote scripts
iwr -UseBasicParsing ‘https://raw.githubusercontent.com/shorebirdtech/install/main/install.ps1’|iex

Verify:

shorebird --version

shorebird login

Initialize & First Release

Navigate to your Flutter project:

cd my_flutter_app
shorebird init

This creates shorebird.yaml, adds internet permission to AndroidManifest, and sets up your app in the Shorebird console.

Create your first release (this builds a patched Flutter engine version):

shorebird release android   # or ios

For iOS, you’ll need Xcode/macOS. This uploads the base release. Submit this binary to Google Play/App Store as usual (first time only).

Watch the console: you’ll see your app listed with the release ID.

Pushing Your First Patch

Now the magic: make a small change. Let’s add a debug banner or fix a text bug in main.dart.

Build and push the patch:

shorebird patch android   # or ios

This creates a small diff patch (often <1MB) and uploads it to Shorebird servers.

On user devices: next app launch (or background check), the modified engine downloads the patch, applies it, and runs the updated Dart code, no restart needed in many cases (restartless patches supported).

Demo:

Run the old release on the emulator
Show bug
Push patch
Relaunch app → bug fixed instantly!

Best Practices & Limitations 2026

Tips from community experience:

Always test patches on real devices (emulators sometimes miss delegate issues)
Use the shorebird doctor to check the setup
Handle patch failures gracefully (Shorebird auto-rolls back)
For large changes, combine with full release
Limitations: Dart code only (no native plugin updates, no asset/binary changes)
Monitor usage in the Shorebird console (downloads, success rate)
Integrate with CI/CD (Codemagic/GitHub Actions workflows exist)

Quick pause before we finish, I want to invite you to my free newsletter personally. Every week, I send the exact code snippets, early access to full project repos, and the latest 2026 tips that I don’t always cover in videos. It’s completely free, zero spam, and it’s the fastest way to level up. Just click this link: https://techwithsam.dev/newsletter — I’d love to see you there!

That’s it! You now have an instant update superpower with Shorebird; no more store approval anxiety.

Don’t forget to join my Free Newsletter: https://techwithsam.dev/newsletter

Samuel Adekunle, Tech With Sam YouTube

How to Build Responsive Flutter Apps for Phones, Foldables, Tablets & Web (2026)

Samuel Adekunle — Fri, 27 Feb 2026 09:40:00 +0000

Hey everyone, Samuel here! In 2026, your Flutter app needs to look perfect on a tiny phone, a folding tablet, a desktop window, and even on the web — all from one codebase.

Nothing kills user experience faster than a layout that breaks on different screen sizes.

Today, we’re doing a complete how-to: building fully responsive UIs using MediaQuery, LayoutBuilder, breakpoints, and the best scaling tricks in 2026. By the end of this article, you’ll have all you need to build professional apps that automatically adapt everywhere. Let’s jump in!

Why Responsive Matters + Core Concepts

First, a quick difference: **Responsive design **means the UI scales and reflows. **Adaptive design **means it completely changes the structure (e.g., showing a side menu on a tablet). In 2026, users expect buttery smooth adaptation — no overflow, no tiny text, no broken layouts. The two weapons we’ll use most:

MediaQuery → get screen size, orientation, padding
LayoutBuilder → get exact constraints of the parent widget

These are built-in, zero dependencies, and still the foundation.

MediaQuery & Basic Responsiveness

Let’s start simple. In your home screen:

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
bool isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;

Now build a profile card:

Container(
  width: screenWidth * 0.9,           // 90% of screen
  height: screenHeight * 0.25,
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(... glassmorphism ...),
  child: Column(...)
)

See how it automatically scales?

Next, orientation handling:

if (isLandscape) {
  return Row(children: [sidebar, mainContent]);
} else {
  return Column(children: [header, mainContent]);
}

That already makes it way better on tablets and desktops.

Advanced — LayoutBuilder + Breakpoints

Now the real power tool: LayoutBuilder.

Wrap your Scaffold body:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth >= 1024) return DesktopLayout();
    if (constraints.maxWidth >= 600) return TabletLayout();
    return MobileLayout();
  },
)

We have three separate widgets: MobileLayout (stacked), TabletLayout (two-column), and DesktopLayout (sidebar + content).

The layout instantly switches as you resize the window, no refresh needed.

Scaling Magic with Flutter ScreenUtil (2026 Best Practice)

For pixel-perfect scaling across all devices, we can still use flutter_screenutil in 2026.

Add to pubspec:

dependencies:
  flutter_screenutil: ^5.9.3   # latest stable

Then in the main.dart:

ScreenUtilInit(
  designSize: const Size(375, 812),   // iPhone 12/13 size
  minTextAdapt: true,
  splitScreenMode: true,
  builder: (context, child) => MaterialApp(...)
)

Now you can write:

Text(’Hello’, style: TextStyle(fontSize: 16.sp)),
Container(width: 200.w, height: 50.h)

It scales fonts, padding, everything automatically. Combine this with LayoutBuilder, and you have production-ready responsive UIs.

Best Practices & SafeArea

Final pro tips for 2026:

Always wrap top-level content in SafeArea
Use MediaQuery.padding for notches and dynamic islands
Limit max width on large screens: ConstrainedBox(maxWidth: 1200)
Test in all orientations + web + different window sizes
Use const everywhere
Profile with DevTools — responsive UIs should stay under 8ms per frame

That’s it! You now have everything to build beautiful, responsive UIs that work everywhere. If you have any questions, make sure to drop them in the comment section.

Don’t forget to join my Free Newsletter: https://techwithsam.dev/newsletter

Samuel Adekunle, Tech With Sam YouTube

Flutter Performance Optimization 2026 (Make Your App 10x Faster + Best Practices)

Samuel Adekunle — Tue, 24 Feb 2026 11:00:00 +0000

Hey guys, Samuel here again. One of the crucial aspects of mobile app development is performance optimization to ensure the app is usable even on low-quality devices and delivers a very good user experience, which is what we will be looking into today.

To optimize a Flutter application's performance, focus on minimizing unnecessary widget rebuilds, using efficient rendering techniques, and managing resources effectively. The key steps involve leveraging built-in tools for profiling, optimizing UI code, and improving data handling efficiency.

Performance Diagnosis

Before optimizing, you must identify bottlenecks using the right tools:

Run in Profile Mode: Always profile your app in profile mode on a physical device, as debug mode performance is not representative of the final release build.

flutter run --profile

Flutter DevTools: Use the Flutter DevTools suite (Performance, Memory, Network tabs) to analyze frame rendering times, CPU usage, memory allocation, and network latency.
Performance Overlay: Use the built-in PerformanceOverlay widget or press 'P' in the terminal while running the app to see real-time UI and GPU thread frame times. Red bars indicate "jank" (dropped frames).

MaterialApp(
  ...
  showPerformanceOverlay: true,
  ...
),

Widget and UI Optimization

Most performance issues stem from inefficient UI code.

Minimize Widget Rebuilds:

- Use const constructors for widgets that don't change to allow Flutter to reuse them at compile time, reducing runtime overhead.

const Text("This widget would not rebuild"),

- Refactor large build methods into smaller, dedicated StatelessWidget or StatefulWidget classes to localize the scope of rebuilds.

- Use state management solutions (like Provider, Riverpod, or BLoC) with Consumer or Selector to ensure only the necessary parts of the UI rebuild when the state changes.

- Use ValueListenableBuilder or AnimatedBuilder for fine-grained updates instead of calling setState() on large widgets.

Optimize Lists and Animations:

- For long lists, use ListView.builder (or SliverList) to lazy load items, building them only when they become visible on screen.

ListView.builder(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  itemCount: 1,
  itemBuilder: (context, index) {
    return ListTile();
  },
),

// OR

 SliverList.builder(
  itemBuilder: (context, index) =>
      Container(height: 100),
 ),

- Wrap complex, frequently animating widgets in a RepaintBoundary to isolate their repainting from the rest of the UI.

RepaintBoundary(child: ...),

- Avoid using the Opacity widget directly for animations; prefer FadeTransition instead, as it's more performant.

Resource and Data Management

Efficiently handle data, images, and heavy computations to prevent UI freezes.

Image Handling:

- Use the cached_network_image package for images from the network to implement efficient caching and reduce network requests.

- Compress images before bundling them with the app and loading them at optimal resolutions.

Asynchronous Operations:

- Use async/await, FutureBuilder, and StreamBuilder to perform network requests and other I/O operations without blocking the main UI thread.

- For CPU-intensive tasks (e.g., heavy data processing), use Isolates via the compute function to run them on a separate thread.
Memory Management:

- Always dispose of controllers (AnimationController, TextEditingController, etc.), StreamSubscription instances, and other resources in the dispose() Method of your StatefulWidget to prevent memory leaks.

Network Optimization:

- Implement data pagination for large datasets to avoid fetching all data at once.
- Cache API responses to reduce the number of network calls and improve perceived performance.

App Size and Build Optimizations

Reduce App Size:

- Remove unused assets and libraries ("tree-shaking").
- Use the flutter build apk --split-per-abi command to generate smaller APKs for different device architectures.

Enable Release Mode: Always verify final performance using flutter run --release or by building the app in release mode.

That's it! You've fully optimized your Flutter app performance if you follow all the principles. If you have any questions, make sure to drop them in the comment section.

Join Free Newsletter: https://techwithsam.dev/newsletter

Samuel Adekunle, Tech With Sam YouTube

GoRouter Advanced Tutorial 2026: Bottom Nav, Nested Routes, Auth Redirects & Typed Navigation 🚀

Samuel Adekunle — Sun, 08 Feb 2026 18:35:39 +0000

I remember being asked early in my career as a software engineer whether I could persist the bottom navigation so it would stay on the screen regardless of which page the user navigated to. My colleague and I explained that it's not possible, given how we implemented the bottom navigation system; it simply wasn't feasible.

A few years later, I started using AutoRoute, and later moved to GoRouter on projects to streamline advanced navigation, nested routes for deep links, persistent bottom navigation, and much more.
That's what inspired this tutorial on GoRouter.

GoRouter Features: Deep linking, ShellRoute for tabs, typed routes via builder.

Let's get started.

Add to pubspec:

dependencies:
  go_router: ^17.1.0
  flutter_riverpod: ^2.6.1

dev_dependencies:
  build_runner: ^2.6.0
  go_router_builder: ^4.0.1

Run dart run build_runner build for typed helpers.

Create a new project or use an existing one.

Router file (lib/router/app_router.dart):

import 'package:go_router/go_router.dart';
import 'package:flutter/material.dart';

// Typed route data example
part 'app_router.g.dart';

@TypedGoRoute<HomeRoute>(path: '/')
class HomeRoute extends GoRouteData {
  @override
  Widget build(BuildContext context, GoRouterState state) => const HomeScreen();
}

@TypedGoRoute<DetailsRoute>(path: '/details/:id')
class DetailsRoute extends GoRouteData {
  final String id;
  DetailsRoute(this.id);
  @override
  Widget build(BuildContext context, GoRouterState state) => DetailsScreen(id: id);
}

// Shell for bottom nav
final _rootNavigatorKey = GlobalKey<NavigatorState>();
final _shellNavigatorKey = GlobalKey<NavigatorState>();

final router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  initialLocation: '/',
  redirect: (context, state) {
    // Riverpod auth check example
    final isLoggedIn = false; // ref.watch(authProvider)
    if (!isLoggedIn && state.uri.toString() != '/login') {
      return '/login';
    }
    return null;
  },
  routes: [
    ShellRoute(
      builder: (context, state, child) => ScaffoldWithNavBar(child: child),
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => const HomeScreen(),
          routes: [
            GoRoute(
              path: 'details/:id',
              builder: (context, state) => DetailsScreen(id: state.pathParameters['id']!),
            ),
          ],
        ),
        GoRoute(path: '/profile', builder: (_, __) => const ProfileScreen()),
        GoRoute(path: '/settings', builder: (_, __) => const SettingsScreen()),
      ],
    ),
    GoRoute(path: '/login', builder: (_, __) => const LoginScreen()),
  ],
  errorBuilder: (context, state) => ErrorScreen(state.error),
);

Update main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'router/app_router.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return MaterialApp.router(
      title: 'Advanced GoRouter Tutorial',
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
      ),
      routerConfig: router,
    );
  }
}

Bottom nav shell: StatefulShellRoute.indexedStack for branches (Home/Profile/Settings) to preserve state.

Navigation: context.go('/details/123') or DetailsRoute(id: '123').go(context) for typed.

Full Source Code 👇 - Show some ❤️ by starring ⭐ the repo and follow me 😄!

https://github.com/techwithsam/gorouter_tutorial

I hope you've learn something incredible. Press that follow button if you're not following me yet. Also, make sure to subscribe to the newsletter so you're notified when I publish a new article.

🔗 Let's Connect 🔗 → Twitter | LinkedIn.

Join my Community 👨‍💻👨‍💻 on Discord.

Subscribe to my YouTube channel | and also to the Medium newsletter in the input box above👆 or below👇.

Happy Building! 🥰👨‍💻

Dart Frog Part 5: Deploying Your Backend Service With Dart Globe 🌍

Samuel Adekunle — Sat, 31 Jan 2026 13:16:00 +0000

This final part of the Dart Frog Full Course is finally here! 🥳

Hi guys, Samuel here again. Today, will be deploying our secure Todo API (with JWT auth from Part 4) to Globe (globe.dev).

Globe is the go-to deployment platform for Dart & Flutter in 2026. Globe offers zero-config deployment, a global edge network for low-latency worldwide access, automatic scaling, built-in SSL, and first-class support for Dart Frog. No Dockerfiles, no YAML nightmares — just globe deploy, and you’re live.

Why Globe stands out in 2026: It’s purpose-built for Dart ecosystems (integrates natively with Dart Frog, Shelf, Serverpod, etc.), handles cold starts gracefully, and deploys to a distributed edge network (think “hello from any city” demos). Perfect for our full-stack Todo app, test it globally without regional latency issues.

Prerequisites (From Previous Parts)

Dart Frog project from Part 4 (with auth, protected routes, in-memory or simple DB).
Globe account (sign up free at globe.dev).
Globe CLI installed: dart pub global activate globe_cli
Logged in: globe login
Dart Frog CLI (already have from series): dart pub global activate globe_cli
Build once locally: dart_frog build (creates optimized production binary in /build).

Step 1: Prepare Your Project for Production

Globe auto-detects Dart Frog projects, but a few tweaks ensure smooth sailing:

Listen on the Right Port Dart Frog defaults to 8080, but Globe uses PORT env var. Update main.dart (or wherever you serve):

import ‘dart:io’;
import ‘package:dart_frog/dart_frog.dart’;

void main() async {
  final port = int.parse(Platform.environment[’PORT’] ?? ‘8080’);
  await serve(handler, InternetAddress.anyIPv4, port);
}

Secrets & Env Vars For JWT secret (from Part 4), use Globe’s env vars dashboard instead of hardcoding. Example: In auth_service.dart, load from env:

final secret = Platform.environment[’JWT_SECRET’] ?? ‘fallback-dev-secret’;

CORS (If Needed)
Already added in Part 3 — Globe handles it fine, but keep wildcard for dev.
Build Locally

dart_frog build

This compiles your AOT binary — Globe runs it efficiently.

Step 2: Deploy with Globe CLI

From your project root:

globe deploy

First time? CLI guides you: Create/link project, choose name (e.g., “todo-project”).
Globe detects Dart Frog automatically → applies preset (file-based routing, Shelf under the hood).
Builds & deploys in seconds (AOT binary = fast cold starts).
For production push: globe deploy --prod

After success:

Get your URL: https://your-project-name.globeapp.dev (or custom domain later).
Test endpoints: Use Postman/curl with your live URL (e.g., https://todo-api-samuel.globeapp.dev/todos with a JWT Bearer token).

Step 3: Post-Deployment Tips

Env Vars: Dashboard > Project > Settings > Environment Variables → Add JWT_SECRET, DB creds, etc.
Scaling & Performance: Auto-scales on demand, edge-cached where possible, great for global users.
Logs & Monitoring: Built-in logs, metrics dashboard.
Custom Domain: Add in settings (SSL auto-provisioned).
CI/CD: Connect GitHub repo for auto-deploys on push.
Costs: Free tier is generous for starters, pay-as-you-scale.

Testing Your Full-Stack App Live

Update Flutter app’s Dio baseUrl to your Globe URL:

final Dio _dio = Dio(BaseOptions(baseUrl: ‘https://your-project-name.globeapp.dev’));

Run Flutter → CRUD Todos securely via live backend. Full-stack Dart in production!

Source Code👇 — Show some ❤️ by starring ⭐ the repo and follow me 😄 https://github.com/techwithsam/dart_frog_full_course_tutorial

Wrapping the Series

From basic intro (Part 1) → CRUD API (Part 2) → Flutter connection (Part 3) → JWT auth (Part 4) → global deployment (Part 5) — you now have a complete, secure, scalable full-stack Dart Todo service.

Globe makes the “deploy” step trivial, letting you focus on building features (next: Add real DB like Postgres via Globe templates?).

What backend are you deploying next? More Dart Frog, Serverpod, or something new? Drop comments below, what feature should we add in a future video?

Thanks for following the 2026 Dart Frog series — subscribe for more full-stack, AI, and trends content. Let’s keep pushing Dart forward! 🚀🐸

Samuel Adekunle, Tech With Sam YouTube

Dart Frog Part 4: Secure Authentication Tutorial (JWT + Password Hashing) 🔒

Samuel Adekunle — Wed, 28 Jan 2026 08:58:00 +0000

Hey guys! Welcome to Part 4 of our Dart Frog series. If you missed Parts 1, 2, and 3, we set up Dart Frog, built a CRUD API for our Task App, and integrated it on frontend app. Watch it now if you’re new!

Today, we will integrate full authentication with JWT tokens, bcrypt hashing, and protected routes to our Dart Frog server, enabling a secure TODO project.

We’ll add: Register/login endpoints, JWT middleware, protected Todos.

Planning & Theory

Flow:

Users register → password hashed with bcrypt
Login → verify hash → sign JWT
Protected endpoints → middleware extracts/verifies bearer token

Packages: dart_jsonwebtoken for JWT, bcrypt for hashing. Store users in-memory (easy swap to Postgres later).

Update pubspec.yaml:

dependencies:
  dart_jsonwebtoken: ^latest
  bcrypt: ^latest

User model: lib/src/user.dart

///
class User {
  ///
  const User({
    required this.id,
    required this.username,
    required this.hashedPassword,
  });

  /// fromJson
  final String id;

  /// username
  final String username;

  /// hashedPassword
  final String hashedPassword;

  /// toJson
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'username': username,
    };
  }
}

In-memory: lib/src/user_repository.dart (similar to todos, Map by email/ID).

import 'package:collection/collection.dart';
import 'package:my_project/src/user_model.dart';
import 'package:uuid/uuid.dart';

const _uuid = Uuid();
final _users = <String, User>{};

/// Find user by username
User? findUserByUsername(String username) {
  return _users.values.firstWhereOrNull((u) => u.username == username);
}

/// Find user by id
User? findUserById(String id) {
  return _users[id];
}

/// Create user
User createUser({required String username, required String passwordHash}) {
  final id = _uuid.v4();
  final user = User(id: id, username: username, hashedPassword: passwordHash);
  _users[id] = user;
  return user;
}

auth/login.dart:
import 'package:bcrypt/bcrypt.dart';
import 'package:dart_frog/dart_frog.dart';
import 'package:dart_jsonwebtoken/dart_jsonwebtoken.dart';
import 'package:my_project/src/constant.dart';
import 'package:my_project/src/user_repository.dart';

Future<Response> onRequest(RequestContext context) async {
  if (context.request.method != HttpMethod.post) {
    return Response(statusCode: 405, body: 'Method Not Allowed');
  }

  final body = await context.request.json() as Map<String, dynamic>;
  final username = body['username'] as String?;
  final password = body['password'] as String?;

  if (username == null ||
      username.isEmpty ||
      password == null ||
      password.isEmpty) {
    return Response(
      statusCode: 400,
      body: 'Username and password are required.',
    );
  }

  final user = findUserByUsername(username);
  if (user == null || !BCrypt.checkpw(password, user.hashedPassword)) {
    return Response(statusCode: 401, body: 'Invalid username or password.');
  }

  final jwt = JWT({
    'id': user.id,
    'username': user.username,
  });

  final token = jwt.sign(SecretKey(jwtSecret));

  return Response.json(body: {'token': token});
}

auth/register.dart:

import 'package:bcrypt/bcrypt.dart';
import 'package:dart_frog/dart_frog.dart';
import 'package:my_project/src/user_repository.dart';

Future<Response> onRequest(RequestContext context) async {
  if (context.request.method != HttpMethod.post) {
    return Response(statusCode: 405, body: 'Method Not Allowed');
  }

  final body = await context.request.json() as Map<String, dynamic>;
  final username = body['username'] as String?;
  final password = body['password'] as String?;

  if (username == null ||
      username.isEmpty ||
      password == null ||
      password.isEmpty) {
    return Response(
      statusCode: 400,
      body: 'Username and password are required.',
    );
  }

  if (findUserByUsername(username) != null) {
    return Response(statusCode: 409, body: 'Username already exists.');
  }

  final hashedPassword = BCrypt.hashpw(password, BCrypt.gensalt());
  final user = createUser(username: username, passwordHash: hashedPassword);

  return Response.json(body: user.toJson());
}

Update todos/_middleware.dart:

import 'package:dart_frog/dart_frog.dart';
import 'package:dart_jsonwebtoken/dart_jsonwebtoken.dart';
import 'package:my_project/src/constant.dart';
import 'package:my_project/src/user_model.dart';
import 'package:my_project/src/user_repository.dart';

Handler middleware(Handler handler) {
  return handler.use(requestLogger()).use(_authMiddleware).use(_corsMiddleware);
}

Handler _corsMiddleware(Handler handler) {
  return (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',
      },
    );
  };
}

Handler _authMiddleware(Handler handler) {
  return (context) async {
    if (context.request.method == HttpMethod.options) {
      return handler(context);
    }

    final authHeader = context.request.headers['Authorization'];
    if (authHeader == null || !authHeader.startsWith('Bearer ')) {
      return Response(
        statusCode: 401,
        body: 'Missing or invalid Authorization header',
      );
    }

    final token = authHeader.substring(7);

    try {
      final jwt = JWT.verify(token, SecretKey(jwtSecret));
      final payload = jwt.payload as Map<String, dynamic>;
      final userId = payload['id'] as String;

      final user = findUserById(userId);
      if (user == null) {
        return Response(statusCode: 401, body: 'User not found');
      }

      return handler(context.provide<User>(() => user));
    } catch (e) {
      return Response(statusCode: 401, body: 'Invalid token: $e');
    }
  };
}

Apply to protected routes (e.g., wrap todos handler).

Update todos to be per-user (add userId).

Test with Postman: Register → login → use token for CRUD.

Source Code 👇 - Show some ❤️ by starring ⭐ the repo and follow me 😄! https://github.com/techwithsam/dart_frog_full_course_tutorial

Fully done with wrapping our Task App with Authentication secured with JWT and Password Hashing! Next part: Deployment with Dart Globe.

Samuel Adekunle, Tech With Sam YouTube

On-Device AI in Flutter 2026: TensorFlow Lite Tutorial (Image Classifier App) 🤖

Samuel Adekunle — Sat, 24 Jan 2026 16:30:15 +0000

If you've ever wanted AI in your Flutter app without Gemini API costs, this is it.

Hey guys! It's Samuel once again. Today, we're going to be integrating something cool: On-device AI: no cloud, no internet - just pure privacy and speed with TensorFlow Lite. We will use TensorFlow Lite to build an image classifier that recognizes objects in real-time from your camera or gallery.

Why on-device in 2026? Cloud AI is great, but on-device wins for offline apps, privacy (no data sent), and battery life. Flutter's ecosystem is mature. We have tflite_flutter that handles delegates beautifully now.

We'll use MobileNet (quantized for mobile), download the .tflite model and labels.txt from TensorFlow Hub.

New project: flutter create ai_classifier.

Create a new assets folder in your project directory: assets/models, and download the mobilenet file and labels.text file and place it inside the assets/models folder.

Next, install dependencies in pubspec.yaml:

dependencies:
  flutter_riverpod: ^3.2.0
  google_fonts: ^7.1.0
  camera: ^0.11.3
  image_picker: ^1.2.1
  tflite_flutter: ^0.12.1
  path_provider: ^2.1.5
  permission_handler: ^12.0.1
  path: ^1.9.1
  image: ^4.7.2

assets:
  - assets/models/mobilenet_v1.tflite
  - assets/models/labels.txt

TFLite helper: lib/providers/classifier_provider.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../services/tflite_service.dart';

final tfliteServiceProvider = Provider<TfliteService>((ref) {
  return TfliteService();
});

final classifierInitializedProvider = FutureProvider<void>((ref) async {
  final service = ref.watch(tfliteServiceProvider);
  await service.init();
});

Tflite Service: lib/services/tflite_service.dart

import 'package:tflite_flutter/tflite_flutter.dart';
import 'package:image/image.dart' as img;

class TfliteService {
  late Interpreter _interpreter;
  late List<String> _labels;

  Future<void> loadModel() async {
    _interpreter = await Interpreter.fromAsset('mobilenet_v2.tflite');
    final labelsData = await rootBundle.loadString('assets/labels.txt');
    _labels = labelsData.split('\n');
  }

  Future<List<Map<String, dynamic>>> predict(img.Image image) async {
    // Preprocess: Resize to 224x224, normalize
    final input = _preprocess(image);

    final output = List.filled(1 * 1001, 0.0).reshape([1, 1001]);

    _interpreter.run(input, output);

    // Postprocess: Top 5 labels
    final List<Map<String, dynamic>> results = [];
    final outputList = output[0] as List<double>;
    for (int i = 0; i < outputList.length; i++) {
      results.add({'index': i, 'confidence': outputList[i]});
    }
    results.sort((a, b) => b['confidence'].compareTo(a['confidence']));
    return results.take(5).map((r) => {
      'label': _labels[r['index'] as int],
      'confidence': (r['confidence'] as double * 100).toStringAsFixed(1),
    }).toList();
  }

  // Full preprocess function (resize, normalize to [0,1] or [-1,1] per model)
  // Use img package or custom
}

UI: Home screen with ImagePicker button.

Pick image → decode → run predict → display ListView of labels/confidence.

Add loading spinner + error handling.

 File? _selectedImage;
  List<Map<String, dynamic>>? _results;
  bool _isCameraMode = false;
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage(ImageSource source) async {
    final XFile? image = await _picker.pickImage(source: source);
    if (image != null) {
      setState(() {
        _selectedImage = File(image.path);
        _results = null;
      });
      _classifyImage(_selectedImage!);
    }
  }

  Future<void> _classifyImage(File file) async {
    final service = ref.read(tfliteServiceProvider);
    final results = await service.classifyImage(file);
    setState(() {
      _results = results;
    });
  }

That's all! Demo on emulator/real device, pick a photo, see instant labels, and see how it works.

Full Source Code 👇 - Show some ❤️ by starring ⭐ the repo and follow me 😄!

https://github.com/techwithsam/vision_ai

I hope you've learn something incredible. Press that follow button if you're not following me yet.

🔗 Let's Connect 🔗 → Github | Twitter | Youtube | LinkedIn .

Happy Building! 🥰👨‍💻

[Boost]

Samuel Adekunle — Fri, 23 Jan 2026 15:56:16 +0000

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

Samuel Adekunle ・ Jan 21

#dart #fullstack #flutter #techwithsam

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

Samuel Adekunle — Wed, 21 Jan 2026 08:30:00 +0000

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.

Planning & Setup

Quick plan: Reuse the Todo API from Part 2. In Flutter:

Dio for HTTP (better interceptors, error handling than http package)
Riverpod for state (AsyncNotifierProvider for API calls)
Simple UI: ListView + forms

First, fix CORS in Dart Frog — add middleware. Open routes/todos:

Create a new Dart file inside the todos folder _middleware.dart

import ‘package:dart_frog/dart_frog.dart’;

Handler middleware(Handler handler) {
  return handler.use(requestLogger()).use(
        (handler) => (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’,
            },
          );
        },
      );
}

For local testing: Use http://10.0.2.2:8080 on Android emulator (or your machine IP on a physical device, e.g., http://localhost:8080).

Start Dart Frog dev server in one window: dart_frog dev.

New Flutter project: flutter create todo_flutter.

pubspec.yaml:

dependencies:
  flutter_riverpod: ^3.2.0
  uuid: ^4.5.2
  dio: ^5.9.0

Model (shareable later): lib/models/todo.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<String, dynamic> toJson() {
    return {’id’: id, ‘title’: title, ‘isCompleted’: completed};
  }

  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      id: json[’id’],
      title: json[’title’],
      completed: json[’isCompleted’],
    );
  }
}

Dio setup: lib/services/api_service.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<List<Todo>> getTodos() async {
    try {
      final response = await _dio.get(’/todos’);
      if (response.data is List) {
        final todos = (response.data as List)
            .map((todoJson) => Todo.fromJson(todoJson as Map<String, dynamic>))
            .toList();
        return todos;
      }
      return [];
    } catch (e) {
      rethrow;
    }
  }

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

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

  Future<void> deleteTodo(String id) async {
    try {
      await _dio.delete(’/todos/$id’);
    } catch (e) {
      rethrow;
    }
  }
}

Riverpod providers: lib/providers/todo_provider.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) => ApiService());

final todoListProvider = AsyncNotifierProvider<TodoListNotifier, List<Todo>>(
  () {
    return TodoListNotifier();
  },
);

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

  Future<void> 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<void> 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<void> 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;
    });
  }
}

lib/main.dart (add google_fonts package):

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(),
    );
  }
}

lib/home.dart:

import ‘package:flutter/material.dart’;
import ‘package:flutter_riverpod/flutter_riverpod.dart’;
import ‘models/todo.dart’;
import ‘providers/todo_provider.dart’;

class TodoListScreen extends ConsumerWidget {
  const TodoListScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final todosAsync = ref.watch(todoListProvider);

    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar.large(
            title: const Text(’My Tasks’),
            centerTitle: false,
            floating: true,
            pinned: true,
            actions: [
              IconButton(
                onPressed: () => ref.refresh(todoListProvider),
                icon: const Icon(Icons.refresh),
              ),
            ],
          ),
          todosAsync.when(
            data: (todos) => sliverTodoList(todos, ref, context),
            loading: () => const SliverFillRemaining(
              child: Center(child: CircularProgressIndicator()),
            ),
            error: (err, stack) =>
                SliverFillRemaining(child: Center(child: Text(’Error: $err’))),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () => _showAddTodoDialog(context, ref),
        label: const Text(’Add Task’),
        icon: const Icon(Icons.add),
      ),
    );
  }

  Widget sliverTodoList(List<Todo> todos, WidgetRef ref, BuildContext context) {
    if (todos.isEmpty) {
      return const SliverFillRemaining(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.task_alt, size: 64, color: Colors.grey),
              SizedBox(height: 16),
              Text(
                ‘No tasks yet. Add one!’,
                style: TextStyle(fontSize: 18, color: Colors.grey),
              ),
            ],
          ),
        ),
      );
    }

    return SliverPadding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          final todo = todos[index];
          return Padding(
            padding: const EdgeInsets.only(bottom: 12),
            child: TodoCard(todo: todo),
          );
        }, childCount: todos.length),
      ),
    );
  }

  void _showAddTodoDialog(BuildContext context, WidgetRef ref) {
    final controller = TextEditingController();
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) => Padding(
        padding: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
          left: 20,
          right: 20,
          top: 20,
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(’New Task’, style: Theme.of(context).textTheme.headlineSmall),
            const SizedBox(height: 16),
            TextField(
              controller: controller,
              autofocus: true,
              decoration: InputDecoration(
                hintText: ‘What needs to be done?’,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                if (controller.text.isNotEmpty) {
                  ref.read(todoListProvider.notifier).addTodo(controller.text);
                  Navigator.pop(context);
                }
              },
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              child: const Text(’Create Task’),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}

class TodoCard extends ConsumerWidget {
  final Todo todo;
  const TodoCard({super.key, required this.todo});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Dismissible(
      key: Key(todo.id.toString()),
      direction: DismissDirection.endToStart,
      background: Container(
        alignment: Alignment.centerRight,
        padding: const EdgeInsets.only(right: 20),
        decoration: BoxDecoration(
          color: Colors.red.shade100,
          borderRadius: BorderRadius.circular(16),
        ),
        child: const Icon(Icons.delete, color: Colors.red),
      ),
      onDismissed: (_) {
        ref.read(todoListProvider.notifier).deleteTodo(todo.id);
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        decoration: BoxDecoration(
          color: Theme.of(context).cardColor,
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 10,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: ListTile(
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 20,
            vertical: 8,
          ),
          title: Text(
            todo.title,
            style: TextStyle(
              decoration: todo.completed ? TextDecoration.lineThrough : null,
              color: todo.completed ? Colors.grey : null,
              fontWeight: FontWeight.w500,
            ),
          ),
          trailing: IconButton(
            icon: const Icon(Icons.delete_outline, color: Colors.redAccent),
            onPressed: () {
              ref.read(todoListProvider.notifier).deleteTodo(todo.id);
            },
          ),
          leading: Checkbox(
            value: todo.completed,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(4),
            ),
            onChanged: (_) {
              ref.read(todoListProvider.notifier).toggleTodo(todo);
            },
          ),
        ),
      ),
    );
  }
}

Source Code 👇 — Show some ❤️ by starring ⭐ the repo and follow me 😄! https://github.com/techwithsam/dart_frog_full_course_tutorial

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 YouTube

Forem: Samuel Adekunle

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

WHAT IS GENKIT DART & WHY DOES IT MATTER FOR FLUTTER DEVS

CLIENT-SIDE vs BACKEND AI PATTERNS (Quick Comparison)

SETTING UP GENKIT DART

Install Genkit packages

Configure your model API key

BUILDING YOUR FIRST AI FLOW — Content Generator

Why use flows?

Run your application

Test in the Developer UI

Start the Developer UI

Run and inspect flows

Next steps

techwithsam / ai_content_generator

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

content_generator

Getting Started

ai_content_generator

Gemini CLI + Flutter: The Most Powerful AI Coding Assistant Workflow in 2026

WHAT IS GEMINI CLI IN 2026?

Key upgrades:

SETUP + VS CODE INTEGRATION

PROMPT ENGINEERING MASTERCLASS FOR FLUTTER

LIVE DEMO 1 — Generate a Riverpod Provider

LIVE DEMO 2 — Fix Impeller Jank on the Spot

LIVE DEMO 3 — Scaffold a Full Production Screen

TESTING + DEBUGGING INSIDE TERMINAL

FINAL TIPS + COMMON PITFALLS

Stitch + Antigravity + Flutter: Build Apps with AI Agents in 2026

Why This Workflow Matters Right Now

Best Practices & Pro Tips

How to Push Over-the-Air (OTA) Flutter Updates with Shorebird - Complete 2026 Guide

Top questions Flutter devs are asking and how Shorebird answers most of them:

Prerequisites & Installation

Initialize & First Release

Pushing Your First Patch

Best Practices & Limitations 2026

How to Build Responsive Flutter Apps for Phones, Foldables, Tablets & Web (2026)

Why Responsive Matters + Core Concepts

MediaQuery & Basic Responsiveness

Advanced — LayoutBuilder + Breakpoints

Scaling Magic with Flutter ScreenUtil (2026 Best Practice)

Best Practices & SafeArea

Flutter Performance Optimization 2026 (Make Your App 10x Faster + Best Practices)

Performance Diagnosis

Widget and UI Optimization

Resource and Data Management

App Size and Build Optimizations

GoRouter Advanced Tutorial 2026: Bottom Nav, Nested Routes, Auth Redirects & Typed Navigation 🚀

Dart Frog Part 5: Deploying Your Backend Service With Dart Globe 🌍

Prerequisites (From Previous Parts)

Step 1: Prepare Your Project for Production

Step 2: Deploy with Globe CLI

After success:

Step 3: Post-Deployment Tips

Testing Your Full-Stack App Live

Wrapping the Series

Dart Frog Part 4: Secure Authentication Tutorial (JWT + Password Hashing) 🔒

Planning & Theory

On-Device AI in Flutter 2026: TensorFlow Lite Tutorial (Image Classifier App) 🤖

[Boost]

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

Samuel Adekunle ・ Jan 21

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

Planning & Setup