Get the in-app menu running in under 2 minutes — then reach the same tools from your desktop or your AI agent.
flutter pub add buoyThe buoy umbrella pulls in the whole suite. Prefer à la carte? See Installation.
Wrap your app via MaterialApp.builder (or CupertinoApp.builder):
import 'package:buoy/buoy.dart';
MaterialApp(
builder: (context, child) => BuoyDevTools(
deviceName: 'My App',
child: child ?? const SizedBox.shrink(),
),
)
import 'package:buoy/buoy.dart';
MaterialApp(
builder: (context, child) => BuoyDevTools(
deviceName: 'My App',
child: child ?? const SizedBox.shrink(),
),
)
A floating button appears in the corner of your app. Tap it to open the menu.
Every tool is free in development — no key needed. A licenseKey prop unlocks Pro: production builds, the MCP server, and unlimited capture.
With the umbrella install, every Flutter tool is already registered. Prefer individual packages? Install any tool — it appears in the menu:
flutter pub add buoy_networkThat's it. Open the menu, tap Network, and you're watching every API call in real-time.
If you use Riverpod, add the Buoy observer to your ProviderScope:
import 'package:buoy_riverpod/buoy_riverpod.dart';
void main() {
registerBuoyRiverpod();
runApp(
ProviderScope(
observers: const [buoyRiverpodObserver],
child: const MyApp(),
),
);
}
import 'package:buoy_riverpod/buoy_riverpod.dart';
void main() {
registerBuoyRiverpod();
runApp(
ProviderScope(
observers: const [buoyRiverpodObserver],
child: const MyApp(),
),
);
}
No wrappers, no middleware. Providers automatically appear in the Riverpod tool inside your Buoy menu.
If you use go_router, pass your router once at registration:
import 'package:buoy_routes/buoy_routes.dart';
registerBuoyRoutes(router: myGoRouter);
import 'package:buoy_routes/buoy_routes.dart';
registerBuoyRoutes(router: myGoRouter);
| Package | What you get |
|---|---|
buoy_network | Every HTTP request — package:http, dio, image loads, GraphQL. |
buoy_storage | Browse and edit shared_preferences live, with a write event stream. |
buoy_env | View and validate environment config with a health score. |
buoy_console | Every print, debugPrint, and log call in a DevTools-style panel. |
buoy_routes | go_router sitemap and live navigation stack — tap to jump. |
buoy_images | Every image load with cache verdicts, oversize audits, and failures. |
buoy_events | Network, storage, state, and navigation in one LLM-ready stream. |
buoy_riverpod | Every provider’s live value and each state change, with diffs. |
buoy_perf_monitor | Live on-device HUD with FPS, jank, CPU, and memory. |
buoy_impersonate | Inject impersonation headers to test as any user. |
buoy_image_overlay | Pin a design mockup over the running app for pixel-perfect UI. |
Install what you need. Skip what you don't. Or keep the umbrella and get them all.
Only show devtools to specific users — admins, QA, internal team members, or whoever your business needs:
import 'package:buoy/buoy.dart';
Widget build(BuildContext context) {
final user = context.watch<AuthCubit>().state.user;
final showDevTools = user?.role == 'admin' ||
user?.role == 'qa' ||
(user?.email.endsWith('@yourcompany.com') ?? false);
return MaterialApp(
builder: (context, child) {
final app = child ?? const SizedBox.shrink();
if (!showDevTools) return app;
return BuoyDevTools(
licenseKey: 'YOUR_LICENSE_KEY',
child: app,
);
},
);
}
import 'package:buoy/buoy.dart';
Widget build(BuildContext context) {
final user = context.watch<AuthCubit>().state.user;
final showDevTools = user?.role == 'admin' ||
user?.role == 'qa' ||
(user?.email.endsWith('@yourcompany.com') ?? false);
return MaterialApp(
builder: (context, child) {
final app = child ?? const SizedBox.shrink();
if (!showDevTools) return app;
return BuoyDevTools(
licenseKey: 'YOUR_LICENSE_KEY',
child: app,
);
},
);
}
Or keep it available for everyone — your QA and support teams will thank you.
The tools you just installed aren't only in the floating menu — reach the same live app two more ways:
npx -y @buoy-gg/mcp@latest init
npx -y @buoy-gg/mcp@latest init
Buoy Desktop is free to use; the MCP server is a Pro feature. Both connect to the same app you just set up — Flutter devices appear next to React Native ones.