DEV Community: Dylan Scott Mickelson

I Built Fast API, but for Flutter/Dart & AI

Dylan Scott Mickelson — Wed, 23 Sep 2026 00:33:13 +0000

One of my favorite Python Packages is fastapi. I love how you can build an API server very quickly with minimal code. Then, to top it off, you can use its built-in Swagger UI to test your API.

🚨 The Problem:

To my knowledge, Flutter/Dart has no package that does this...

💡 The Solution:

I will build it myself...

❓ But why build a package like this in the first place?

You got me! It was really to connect AI Agents to my Flutter applications- why, of course!

🏗️ How I built it...

I did not build this package from the ground up; I had some help!
Introducing shelf, a web-server middleware package for Dart.
I used shelf to create a Flutter package named fast_crud_api.
fast_crud_api is a lightweight, simple, and customizable CRUD API Server in Dart.

💾 What is CRUD, and why is it a part of the package?

CRUD is an acronym for Create, Read, Update, and Delete, representing the four fundamental operations for managing persistent data in software applications and databases.

I built CRUD into the package because it creates a pathway for an AI Agent to control specific app functionality. With four endpoints (/create, /read, /update, and /delete).

For example, if I created a notes app in Flutter. With fast_crud_api, I could connect an AI Agent to create, read, update, and delete notes. Effectively giving the AI Agent a new skill that it can use.

Likewise, you could leave the CRUD out of it and create a custom API instead!

🚘 Let's look under the hood and see how it works...

APIServer is the main implementation and has the following parameters:

class APIServer {
  final String? apiName;
  final Future<Response> Function(Request)? create;
  final Future<Response> Function(Request)? read;
  final Future<Response> Function(Request)? update;
  final Future<Response> Function(Request)? delete;
  final int? port;
  final int? version;
  final List<CustomRoute>? routes;
  final bool? noCRUD;
  final bool? logger;

  APIServer({
    this.create,
    this.read,
    this.update,
    this.delete,
    this.port,
    this.version,
    this.apiName,
    this.routes,
    this.noCRUD,
    this.logger,
  });
}

It has one function named start() that creates and starts the API server.

Now let's add fast_crud_api to your Flutter or Dart project.

🆕 How to add `fast_crud_api` to your Flutter/Dart app:

Add fast_crud_api and shelf to your pubspec.yaml file:

dependencies:
  shelf: any
  fast_crud_api:
    git:
      url: https://github.com/DylanScottMickelson/fast_crud_api.git

Now, run flutter pub get or dart pub get in your terminal/command prompt to install the package and its dependencies.
Add this example code inside your main.dart file:


import 'package:fast_crud_api/fast_crud_api.dart';
import 'package:shelf/shelf.dart';

void main() async {
  /// Define your create, read, update, and delete functions here...
  Future<Response> createFunction(Request request) async {
    return Response.ok("Created!");
  }

  Future<Response> readFunction(Request request) async {
    return Response.ok("Read!");
  }

  Future<Response> updateFunction(Request request) async {
    return Response.ok("Updated!");
  }

  Future<Response> deleteFunction(Request request) async {
    return Response.ok("Deleted!");
  }
  /// Create API Server Implementation
  final apiServer = APIServer(
    create: (request) => createFunction(request),
    read: (request) => readFunction(request),
    update: (request) => updateFunction(request),
    delete: (request) => deleteFunction(request),
    port: 6969,
    version: 1,
    apiName: "My API",
    noCRUD: false,
    logger: true,
  );
  ///Start API Server
  await apiServer.start();
}

Use CRUD and Custom Routes

import 'package:fast_crud_api/custom_route.dart';
import 'package:fast_crud_api/fast_crud_api.dart';
import 'package:shelf/shelf.dart';

void main() async {
  final handler = Response.notFound;

  /// Define your create, read, update, and delete functions here...
  Future<Response> createFunction(Request request) {
    return Response.ok("Created!");
  }

  Future<Response> readFunction(Request request) {
    return Response.ok("Read!");
  }

  Future<Response> updateFunction(Request request) {
    return Response.ok("Updated!");
  }

  Future<Response> deleteFunction(Request request) {
    return Response.ok("Deleted!");
  }


  /// Define your custom endpoints here...
  final customRoute1 = CustomRoute(
    endpoint: "users",
    method: "GET",
    handler: (request) => Response.ok("Users Read!"),
  );

  final apiServer = APIServer(
    create: (request) => createFunction(request),
    read: (request) => readFunction(request),
    update: (request) => updateFunction(request),
    delete: (request) => deleteFunction(request),
    port: 6969,
    version: 1,
    apiName: "My API",
    noCRUD: false,
    logger: true,
    routes: [customRoute1],
  );

  await apiServer.start();
}

Turn Off CRUD and Use Only Custom Routes


import 'dart:convert';

import 'package:fast_crud_api/custom_route.dart';
import 'package:fast_crud_api/fast_crud_api.dart';
import 'package:shelf/shelf.dart';

void main() async {
  /// Define your custom endpoints here...
  final customRoute1 = CustomRoute(
    endpoint: "users",
    method: "GET",
    handler: (request) => Response.ok(jsonEncode({"users": []})),
  );

  final apiServer = APIServer(
    port: 6969,
    version: 1,
    apiName: "My API",
    noCRUD: true,
    logger: true,
    routes: [customRoute1],
  );

  await apiServer.start();
}

👨‍💻 Access and Use the API

🪟 API Docs UI

Production:
Go to http://ip_address:chosen_port/api/docs/

Test:
Go to http://127.0.0.1:6969/api/docs/

🌐 HTTP / CURL Request

Production:

Test:

🌯 Wrapping Up

Building an efficient backend layer for a modern application can often feel like solving multiple puzzles at once. But with fast_crud_api, that process is streamlined significantly.

By leveraging Dart's power and the shelf package, fast_crud_api provides developers with a lightweight, and customizable API server.

The key takeaway isn't just how to set up an API server in Flutter/Dart, but what you can do with it. Namely, giving AI Agents standardized, reliable endpoints (Create, Read, Update, Delete) that allow them to interact with your application data seamlessly.

I hope this walkthrough was helpful! Comment and let me know what you think, or dive into the code in the GitHub repo.
Happy coding! 🧑‍💻

Creating Adaptive Flutter Screens and Widgets

Dylan Scott Mickelson — Sat, 12 Sep 2026 20:32:48 +0000

Flutter enables you to deploy a single application across phones, tablets, desktops, and the web. The challenge lies in designing an interface that feels purposeful on each platform.

A phone layout stretched across a desktop window wastes space. A dense desktop dashboard squeezed onto a phone becomes hard to use. A truly adaptive interface needs more than flexible widths—it needs the ability to choose a different composition when the available space changes.

Material Foundation is a lightweight Flutter package built for exactly that job. To show how it works, it provides two widgets:

DynamicLayoutBuilder
Selects a mobile, tablet, or desktop widget based on the available screen width.
DynamicScaffold
Puts that same adaptive behavior inside a SafeArea and Scaffold.

In this tutorial, we will use both widgets to build an interface that responds cleanly across mobile, tablet, and desktop screen sizes.

How the package works

Material Foundation uses the constraints supplied by Flutter's LayoutBuilder. By default, it selects layouts at these boundaries:

Available width	Layout	Breakpoint Parameter
Less than 740 px	Mobile	`maxMobileWidth`
740–1199 px	Tablet	`maxTabletWidth`
1200 px or wider	Desktop	`minDesktopWidth`

When the available screen width changes, the builder runs again and displays the appropriate widget.

All boundary values are customizable, so the package can follow your product's content and design system rather than forcing every app into the defaults.

Add Material Foundation to your project

Add the package to pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  material_foundation:
    git:
      url: https://github.com/DylanScottMickelson/material_foundation.git

Then fetch the dependency:

flutter pub get

Import the widget that best fits the level at which you want to adapt the interface:

import 'package:material_foundation/dynamic_layout_builder.dart';
import 'package:material_foundation/dynamic_scaffold.dart';

Build an adaptive screen with `DynamicScaffold`

The quickest way to create a full adaptive page is to supply three bodies to DynamicScaffold:

import 'package:flutter/material.dart';
import 'package:material_foundation/dynamic_scaffold.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Adaptive Dashboard',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const DashboardPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DynamicScaffold(
      backgroundColor: Theme.of(context).colorScheme.surface,
      mobileBody: const MobileDashboard(),
      tabletBody: const TabletDashboard(),
      desktopBody: const DesktopDashboard(),
    );
  }
}

Each body is a normal Flutter widget. That keeps the adaptive decision separate from the layout details and makes each version easy to read, test, and evolve.

Here is a compact mobile layout with a single-column list:

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(16),
      children: const [
        Text('Dashboard', style: TextStyle(fontSize: 28)),
        SizedBox(height: 16),
        MetricCard(label: 'Active users', value: '1,284'),
        MetricCard(label: 'Conversion', value: '8.6%'),
        MetricCard(label: 'Revenue', value: '\$24.8K'),
        MetricCard(label: 'Sessions', value: '9,412'),
      ],
    );
  }
}

On tablets, the same information can use a two-column grid:

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

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(24),
      crossAxisCount: 2,
      childAspectRatio: 2,
      children: const [
        MetricCard(label: 'Active users', value: '1,284'),
        MetricCard(label: 'Conversion', value: '8.6%'),
        MetricCard(label: 'Revenue', value: '\$24.8K'),
        MetricCard(label: 'Sessions', value: '9,412'),
      ],
    );
  }
}

Desktop screens have enough room for navigation beside the content:

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        NavigationRail(
          selectedIndex: 0,
          destinations: const [
            NavigationRailDestination(
              icon: Icon(Icons.dashboard_outlined),
              selectedIcon: Icon(Icons.dashboard),
              label: Text('Dashboard'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.analytics_outlined),
              label: Text('Analytics'),
            ),
          ],
        ),
        const VerticalDivider(width: 1),
        Expanded(
          child: GridView.count(
            padding: const EdgeInsets.all(32),
            crossAxisCount: 3,
            childAspectRatio: 2,
            children: const [
              MetricCard(label: 'Active users', value: '1,284'),
              MetricCard(label: 'Conversion', value: '8.6%'),
              MetricCard(label: 'Revenue', value: '\$24.8K'),
              MetricCard(label: 'Sessions', value: '9,412'),
            ],
          ),
        ),
      ],
    );
  }
}

The MetricCard widget can remain completely unaware of breakpoints:

class MetricCard extends StatelessWidget {
  final String label;
  final String value;

  const MetricCard({
    required this.label,
    required this.value,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(label, style: Theme.of(context).textTheme.labelLarge),
            const SizedBox(height: 8),
            Text(value, style: Theme.of(context).textTheme.headlineMedium),
          ],
        ),
      ),
    );
  }
}

This structure adapts the composition, not just the size. Mobile users receive a scrollable list, tablet users get a grid, and desktop users gain persistent side navigation.

Build an adaptive section or widget with `DynamicLayoutBuilder`

Not every responsive decision belongs at the page level. You may want the same scaffold and navigation everywhere while changing only a single form, toolbar, or content region.

Use DynamicLayoutBuilder directly for those cases:

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

  @override
  Widget build(BuildContext context) {
    return DynamicLayoutBuilder(
       const MobileSummary(),
       const TabletSummary(),
       const DesktopSummary(),
    );
  }
}

Choose boundary breakpoints that fit your content

The default boundaries are convenient, but ultimately you should define breakpoints where your layout stops working well. Both widgets allow you to provide your own mobile, tablet, and desktop thresholds:

DynamicScaffold(
  backgroundColor: Theme.of(context).colorScheme.surface,
  mobileBody: const MobileDashboard(),
  tabletBody: const TabletDashboard(),
  desktopBody: const DesktopDashboard(),
  maxMobileWidth: 600,
  maxTabletWidth: 999,
  minDesktopWidth: 1000,
)

With these values, widths below 600 use mobile, widths from 601 through 999 use tablet, and widths of 1000 or more use desktop.

Think of maxMobileWidth as where the mobile layout ends, maxTabletWidth as where the tablet layout ends, and minDesktopWidth as where the desktop layout begins.

Preview and test layouts with an explicit width

Both widgets also accept a width value. When supplied, that value takes priority over the available constraint. This is handy for deterministic previews and widget tests:

const DynamicLayoutBuilder(
  Text('Mobile'),
  Text('Tablet'),
  Text('Desktop'),
  width: 1200,
)

The example above always builds the desktop widget.

In production screens, omit width so the interface reacts naturally to its parent. In tests, use it to exercise exact boundary values such as 739, 740, 1199, and 1200 without changing the simulated window size.

A few practical details

DynamicScaffold supports drawer and endDrawer, so you can still use standard Flutter navigation patterns. It also exposes resizeToAvoidInset. The package currently defaults that behavior to false; set it to true on screens with text fields if the body should resize when the keyboard appears.

Keep state above the adaptive branch when users should retain it while resizing. For example, a selected filter or loaded data belongs in the page's state management layer, while the mobile, tablet, and desktop widgets should focus on presenting that shared state differently.

Finally, do not feel obligated to make every layout unique. Reuse small components—cards, charts, buttons, and data models—and change only the composition that benefits from the available space.

Wrapping up

The package does not try to replace Flutter's layout system. It adds a focused layer that makes three-layout interfaces straightforward to organize.

Use DynamicScaffold to switch complete page bodies.
Use DynamicLayoutBuilder to adapt a single region or component.
Keep the default 740 px and 1200 px boundaries, or replace them with values that suit your content.
Use the explicit width override for predictable previews and tests.

Explore the Material Foundation repository, try the included example application, leave a comment below and let me know what you think, or consider contributing a pull request if you have ideas for the project.

Run Cross-Platform Commands in Flutter

Dylan Scott Mickelson — Thu, 19 Feb 2026 21:11:15 +0000

💻 Introducing Command Interpreter: A Game-Changer for Flutter Desktop Apps

As developers, we're always on the lookout for tools that make our lives easier and help us build better applications. Today, I'm excited to introduce you to a new open-source package called command_interpreter! This powerful library is designed specifically for Flutter desktop applications, enabling seamless execution of commands and scripts across various platforms like Linux, MacOS, and Windows.

With command_interpreter, you can:

Run single commands using a CommandData object.
Define and execute multiple commands in a script using a ScriptData object.
Use the interpreter manually anywhere in your Dart code for more control.

Getting started is simple! Just add the package as a dependency in your pubspec.yaml file, import it into your project, and use its functions to execute commands or scripts. The library automatically injects platform-specific commands using appropriate command libraries based on the current operating system.

But that's not all - you can also contribute by submitting issues or feature requests in our repository. Plus, if you need custom platform-specific commands, you can create a new library or edit existing ones (WindowsCommandLibrary, MacCommandLibrary, or LinuxCommandLibrary) to support your requirements.

In summary, command_interpreter is an essential tool for any Flutter developer working on desktop applications. It simplifies the process of executing commands and scripts across different platforms, making development more efficient and effective. Give it a try and let us know what you think!