Flutter Helper Utils flutter_helper_utils is a curated Flutter utility package focused on a few high-value areas: adaptive UI and breakpoint helpers color parsing, transformation, and accessibility utilities typed list and sliver list widgets focused BuildContext and UI extensions dart_helper_utils re-exported for the Dart-only helpers that still fit the package surface

Version 10 uses the extracted material_ui library for Material-specific helpers. Requires Flutter 3.47.7+ and Dart 3.13.5+.

Documentation #

Full documentation: https://omar-hanafy.github.io/flutter_helper_utils/

The site is built from site/ in this repository, so it ships with the package rather than trailing behind it.

AI coding-assistant support #

This repository ships a package-specific agent plugin for Claude Code and OpenAI Codex (this is tooling for coding agents, not a runtime feature of the Flutter package). It teaches the agent the exact flutter_helper_utils APIs - breakpoint/adaptive-UI semantics, TypedListView contracts, color parsing and WCAG helpers, navigation and theme member names, the v8-to-v9 and v9-to-v10 breaking migrations, and version-aware upgrades.

Install in Claude Code:

/plugin marketplace add omar-hanafy/flutter_helper_utils
/plugin install flutter-helper-utils@flutter-helper-utils-tools

Install in OpenAI Codex (CLI; the IDE extension does not support plugins - use its $skill-installer there instead):

codex plugin marketplace add omar-hanafy/flutter_helper_utils
codex plugin add flutter-helper-utils@flutter-helper-utils-tools

Start a new agent session after installing so the skills load. Then try prompts like "make this screen adaptive with flutter_helper_utils breakpoints" or "migrate this app from flutter_helper_utils 8.x to 9.x", or invoke a skill explicitly in Claude Code, e.g. /flutter-helper-utils:use-flutter-helper-utils.

The plugin is installed from this Git repository (not from the pub.dev archive), contains markdown skills only - no hooks, no MCP servers, no telemetry - and its version tracks the package version. Details, the full capability list, updating, and uninstalling are in tooling/ai/flutter-helper-utils/README.md.

Install #

dependencies:
  flutter_helper_utils: ^10.0.0

Imports #

Most users should import the package once:

import 'package:flutter_helper_utils/flutter_helper_utils.dart';

If you only want the shortcut-heavy surface, use the opt-in sugar import:

import 'package:flutter_helper_utils/sugar.dart';

For Material widgets and helpers, also depend on material_ui: ^1.6.0 and import package:material_ui/material_ui.dart. FHU does not export Material types. Use a material_ui.MaterialApp with matching themes and Scaffold widgets. SDK Material theme, scaffold, snackbar, and carousel types are distinct; see the v10 migration guide.

Notifiers #

Notifier utilities were extracted from this package in v9.

If you need the old notifier-style workflows, use better_value_notifier

Highlights #

Adaptive UI #

runApp(
  const PlatformTypeProvider(
    child: MyApp(),
  ),
);

@override
Widget build(BuildContext context) {
  final breakpoint = context.watchBreakpoint;

  if (breakpoint.isMobile) {
    return const MobileLayout();
  }
  if (breakpoint.isTablet) {
    return const TabletLayout();
  }
  return const DesktopLayout();
}

PlatformEnv #

final report = PlatformEnv.report();
final os = PlatformEnv.operatingSystem;
final locale = PlatformEnv.localeName;
final processors = PlatformEnv.numberOfProcessors;

Color Toolkit #

final brand = tryToColor('#F97316') ?? Colors.orange;
final accent = tryToColor('rgb(14 165 233)') ?? Colors.blue;

final hex = brand.toHex(includeAlpha: true);
final readableText = brand.contrastColor();
final passesAA = brand.meetsWCAG(
  readableText,
  level: WCAGLevel.aa,
  context: WCAGContext.normalText,
);

Color parsing supports:

• hex strings
• rgb(...) and rgba(...)
• hsl(...) and hsla(...)
• hwb(...)
• CSS named colors

Typed Lists #

TypedListView<Product>(
  items: products,
  itemBuilder: (context, index, product) {
    return ProductTile(product: product);
  },
  spacing: 12,
  header: const Text('Products'),
);

CustomScrollView(
  slivers: [
    const SliverAppBar(title: Text('Products')),
    products.buildSliverList(
      itemBuilder: (context, index, product) {
        return ProductTile(product: product);
      },
      spacing: 12,
    ),
  ],
);

BuildContext and UI Helpers #

Use context.popPage() for guarded back navigation and context.forcePopPage() when the current route should be removed directly.

context.pushPage(const DetailsPage());
await context.popPage();
context.showSnackBar(const SnackBar(content: Text('Saved')));
context.unfocus();

final theme = context.themeData;
final width = context.widthPx;
final height = context.heightPx;

Opt-in Sugar #

final padding = 16.edgeInsetsAll;
final hSpace = 12.heightBox();
final radius = 24.allCircular;
final rawColor = 0xFFF97316.color;

0xFFF97316.color lives in sugar.dart, not in the main color toolkit.

Widgets #

Included widgets and widget systems:

• PlatformTypeProvider
• PlatformInfoLayoutBuilder
• BreakpointLayoutBuilder
• TypedListView
• TypedSliverList
• GradientWidget
• MultiTapDetector
• ThemeWithoutEffects

Migration #

Version 10 changes Material-specific API types to material_ui and raises the SDK and dependency minimums. Read migration_guides.md for the v9-to-v10 migration, legacy widget bridge limitations, and earlier hops.

Example #

The example app in example/ demonstrates the current package surface with material_ui, including theme, navigation, colors, adaptive UI, and typed lists.

License #

MIT