Fonde UI

Desktop-first Flutter UI utility components optimized for native-like interaction, with zoom scaling support.

  • Fonde (pronounced fond) — named after fond de veau.

Screenshot

Live Demo

Overview

fonde_ui is a Flutter UI utility component library for desktop applications, developed for RinneGraph. It provides improved multi-pane layouts, instant feedback interaction, and zoom scaling support out-of-the-box.

Platform Support

  • Flutter: >=3.41.2
  • Dart: ^3.7.0
  • Platforms: macOS, Windows, Linux, iOS, Android

Goals

Fonde UI's goal is to provide operational and visual comfort in desktop apps — achieving the same feel as native applications using Flutter. In Fonde UI, comfort takes priority over visual richness.

Features

  • 🖥️ Desktop-first — Optimized for desktop applications over mobile, with interactions and layouts tailored for keyboard, mouse, and large screens
  • ⚡ Native-like interaction — Instant feedback and restrained animations for smooth operation
  • 🎨 Flat design — Clean, simple visuals inspired by Figma, with smooth-curve corners throughout
  • 🪟 Multi-pane layout — Built-in support for a three-pane window with a vertical Launch Bar
  • 🔍 Zoom scaling support — All components scale uniformly with zoom, ensuring a consistent look at any size
  • 🔋 Batteries included — Handy widgets tuned for desktop applications, ready to use out of the box
  • 🏠️ Customizable appearance — Supports dark mode, color themes, and custom fonts
  • 🌐 Cross-platform — Runs on macOS, Windows, Linux, iOS, and Android

UI Utility Components

Layout

  • Scaffold — three-pane window layout with Launch Bar, resizable primary/secondary sidebars, and main content area
  • Master Detail Layout — master/detail split with synchronized selection
  • Tab View — tab bar and content area
  • Split Pane — draggable resizable split pane with minimum width constraints
  • Panel — themed container with background and border
  • Section
  • Scroll View
  • Toolbar — main, primary/secondary sidebar variants
  • Launch Bar — vertical icon navigation bar with top/bottom sections; collapses to icons-only
  • Sidebar — resizable primary and secondary areas; standard and floating panel (macOS) styles
  • Sidebar List — filled, subtle, and inset item styles

Data View

  • Table View — sortable/resizable/reorderable columns, single/multi-row selection, row reordering, leading/trailing row widgets, and visual customization (header divider, column dividers, stripe rows)
  • Outline View — collapsible tree-style list
  • List Tile — single/double-tap aware, hover highlight

Buttons

  • Button — squircle corners, multiple size and style variants
  • Icon Button
  • Icon Label Button
  • Segmented Button
  • Split Button — primary action with secondary dropdown
  • Button Group
  • Overflow Menu Button — collapses excess items into a popup menu

  • Context Menu

  • Overflow Menu

  • Dropdown Menu — macOS-style press-drag-release selection, keyboard navigation. No submenu support yet.

    Dropdown Menu

  • Popup Menu

Input

  • Text Field — zoom-scalable, squircle border, cursor and selection fully functional on desktop
  • Search Field — with optional suggestion overlay
  • Tags Field — inline tag editing; keyboard navigation (←/→ to move between tags, Backspace for 2-step delete, Delete, Escape)
  • Number Field — numeric input with − / + buttons, min/max/step
  • Checkbox — rectangle/circle shape; filled/outline/iconOnly fill style
  • Radio Button
  • Switch — toggle switch; compact and wide styles
  • Expansion Tile
  • Date Picker — monthly calendar, single and range selection
  • Slider
  • Color Picker — HSV canvas, hue/alpha sliders, palette swatches, eyedropper

Feedback

  • Dialog — modal dialog
  • Confirmation Dialog
  • Toast
  • Snack Bar
  • Popover — directional, auto-dismiss, animated
  • Notification Overlay
  • Tooltip
  • Linear Progress Indicator
  • Circular Progress Indicator

Typography

  • Text — semantic variants: page title, body, caption, code, table, and more

Visual

  • Divider
  • Tag
  • Container
  • Selection Decorator
  • Rectangle Border — Figma-style squircle border container
  • Eye Dropper — in-window color sampling with zoom loupe

Interaction

  • Gesture Detector — single/double tap without delay; hover and cursor support
  • Draggable
  • Shortcut Scope

Platform

  • Platform Menus — macOS native menu bar

Design Tokens

  • Spacing — zoomable spacing (4px grid)
  • Padding — zoomable padding
  • Border Radius — smooth squircle curve
  • Border

State Management

fonde_ui uses plain Flutter state management (ChangeNotifier + InheritedWidget).

Theme, accessibility config, and sidebar state are accessible via BuildContext extensions from any widget's build method.

Setup

Add to your pubspec.yaml:

dependencies:
  fonde_ui: ^0.9.0

Minimal Example

import 'package:fonde_ui/fonde_ui.dart';

void main() {
  runApp(
    FondeApp(
      title: 'My App',
      home: FondeScaffold(
        toolbar: MyToolbar(),
        content: MyContent(),
      ),
    ),
  );
}

FondeApp wraps MaterialApp internally.

FondeScaffold — Multi-pane Layout

FondeScaffold provides the top-level window layout for desktop apps:

[ Launch Bar | Primary Sidebar | Main Content | Secondary Sidebar ]
  • Launch Bar — vertical icon bar on the far left, split into top (main) and bottom (meta) sections
  • Primary Sidebar — resizable (240–480px), collapsible; supports standard and floating panel (macOS) styles
  • Secondary Sidebar — resizable (200–400px), collapsible
  • Main Content — fills remaining space
FondeScaffold(
  toolbar: FondeMainToolbar(children: [...]),
  launchBar: FondeLaunchBar(
    topItems: [
      FondeLaunchBarItem(icon: LucideIcons.house, label: 'Home', logicalIndex: 0, onTap: () {}),
    ],
    bottomItems: [
      FondeLaunchBarItem(icon: LucideIcons.settings, label: 'Settings', logicalIndex: 99),
    ],
    selectedIndex: 0,
  ),
  primarySidebar: FondeSidebar(
    child: FondeSidebarList(children: [...]),
  ),
  content: MyMainContent(),
)

Sidebar visibility and width are controlled via FondeSidebarControllerScope:

// Toggle primary sidebar
FondeSidebarControllerScope.primaryOf(context)?.toggle();

Documentation

Full documentation is under preparation. In the meantime, refer to the example app for usage demonstrations.

For LLM context, load llms.txt.

License

Apache License 2.0

Apps Created with Fonde UI

Libraries

fonde_ui
Desktop-first Flutter UI component library.
fonde_ui_riverpod
Riverpod integration for fonde_ui — DEPRECATED.