MBN UI Flutter

mbn_ui_flutter is a Flutter package for building Apple HIG-inspired interfaces with Liquid Glass surfaces, adaptive navigation structure, and concise SwiftUI-like ergonomics without abandoning the Flutter widget tree.

What ships in v1

• MbnApp, MbnTheme, MbnThemeData, and MbnDesignTokens
• MbnGlass, MbnGlassGroup, MbnMotionSpec, MbnMorph, MbnInteractive
• MbnScaffold, MbnToolbar, MbnSidebar, MbnTabScaffold, MbnSheet, MbnSearchField
• MbnButton, MbnIconButton, MbnMenu, MbnSlider, MbnSegmentedControl, MbnCard
• Widget extensions: mbnGlass, mbnMorph, mbnScrollEdge, mbnBackgroundExtend, mbnInteractive

Design goals

• Keep the Flutter syntax and composability model intact.
• Make Apple-style hierarchy, harmony, spacing, and motion effortless by default.
• Restrict Liquid Glass to navigation and control layers by default.
• Respect platform capabilities and accessibility settings with graceful fallbacks.
• Allow customization at three levels: theme, component style, and per-widget override.

Getting started

Add the package and wrap your app with MbnApp:

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

void main() {
  runApp(
    const MbnApp(
      title: 'Glass Demo',
      home: DemoScreen(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MbnScaffold(
      toolbar: MbnToolbar(
        title: const Text('Library'),
        subtitle: 'Adaptive HIG structure',
        actions: const <Widget>[
          MbnIconButton(icon: Icon(Icons.notifications_none_rounded)),
        ],
        primaryAction: MbnButton(
          label: 'Create',
          variant: MbnButtonVariant.prominent,
        ),
      ),
      searchField: const MbnSearchField(
        placeholder: 'Search collections',
      ),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: <Widget>[
          const MbnCard(
            title: 'Now Playing',
            subtitle: 'Glass surfaces stay in the control layer',
            child: Text('Use cards, toolbars, tabs, and search with HIG defaults.'),
          ).mbnMorph(),
          const SizedBox(height: 16),
          const Text('Content keeps the visual focus.').mbnGlass(
            style: MbnGlassStyle(
              role: MbnGlassRole.control,
              variant: MbnGlassVariant.regular,
            ),
          ),
        ],
      ),
    );
  }
}

Structure patterns

MbnScaffold adapts layout and search placement based on width:

• narrow layouts default to bottom search + minimizing tab behavior
• wide layouts default to trailing toolbar search + floating tab behavior
• sidebars are intended for tablet and desktop widths

MbnTabScaffold gives you a higher-level shell for tab-driven apps:

MbnTabScaffold(
  toolbar: MbnToolbar(
    title: const Text('Collections'),
    subtitle: 'Curated by rhythm',
  ),
  searchField: const MbnSearchField(),
  tabs: const <MbnTabItem>[
    MbnTabItem(
      label: 'Listen',
      icon: Icons.graphic_eq_rounded,
      child: Center(child: Text('Listen')),
    ),
    MbnTabItem(
      label: 'Discover',
      icon: Icons.auto_awesome_rounded,
      child: Center(child: Text('Discover')),
    ),
  ],
);

Liquid Glass and motion

Use glass directly or through extensions:

MbnButton(
  label: 'Primary',
  variant: MbnButtonVariant.prominent,
).mbnMorph(
  transition: MbnMorphTransition.toolbarReaction,
);

const Text('Floating badge').mbnGlass(
  style: MbnGlassStyle(
    role: MbnGlassRole.control,
    variant: MbnGlassVariant.clear,
  ),
  padding: EdgeInsets.symmetric(horizontal: 14, vertical: 10),
  richMediaBackground: true,
);

Example

Run the showcase app in example/lib/main.dart to see:

• toolbar grouping
• adaptive search placement
• floating/minimizing tabs
• inset sheets
• glass cards and controls
• motion behaviors

Notes

• v1 intentionally uses Flutter SDK primitives instead of a required shader pipeline.
• clear glass is intended for media-rich backgrounds; standard surfaces default back to regular.
• accessibility and reduced-motion settings simplify motion and transparency automatically.