fonde_ui 0.4.0

Desktop-first Flutter UI component library. Shell layout, precise interaction, and accessibility by default.

Fonde UI

Desktop-first Flutter UI optimized for native-grade instant feedback, with accessibility built in.

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

[Screenshot]

Overview

fonde_ui is a Flutter UI component library for desktop applications, developed for RinneGraph. It provides improved multi-pane layouts, instant feedback interaction, and accessibility 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
• ⚡ Instant feedback interaction — Native-grade responsiveness with restrained animations that never get in the way of 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
• 👤 Accessibility support — Zoom and other accessibility features built in from the ground up
• 🏠️ Customizable appearance — Supports dark mode, color themes, and custom fonts
• 🌐 Cross-platform — Runs on macOS, Windows, Linux, iOS, and Android

UI Components

Layout

• Scaffold — integrated three-pane layout with Launch Bar, primary/secondary sidebar, and main content
• Master Detail Layout — master/detail split layout
• Tab View — tab bar and tab view
• Panel — container with header/content/footer structure
• Section

Navigation

• Tool Bar — main, sidebar
• Launch Bar — vertical icon navigation bar with top/bottom sections
• Sidebar — resizable primary and secondary sidebar areas
• Sidebar List

Data View

• Table View
• Outline View — tree-style outline view
• List Tile

Buttons

• Button — general purpose button, smooth curve corner
• Icon Button
• Icon Label Button
• Segmented Button
• Split Button — button with dropdown for secondary actions
• Button Group

Menus

• Context Menu
• Overflow Menu — collapses excess buttons into a menu
• Dropdown Menu
• Popup Menu

Input

• Text Field
• Search Field
• Tags Field
• Checkbox
• Radio Button
• Expansion Tile

Feedback

• Dialog — modal dialog
• Confirmation Dialog
• Toast
• Snack Bar
• Popover
• Linear Progress Indicator
• Circular Progress Indicator

Typography

• Text — with semantic variants

Visual

• Divider
• Tag
• Container
• Selection Decorator

Interaction

• Gesture Detector — detects single/double tap without delay, with hover and cursor support

Platform

• Platform Menus

Design Tokens

• Spacing — zoomable spacing
• Padding — zoomable padding
• Border Radius — smooth curve
• Border

State Management

The current version uses Riverpod 3.x for theme, accessibility config, and sidebar state management.

Riverpod integration is optional — import fonde_ui_riverpod.dart separately when needed.

Setup

Add to your pubspec.yaml:

dependencies:
  fonde_ui: ^0.1.0

Minimal Example

import 'package:fonde_ui/fonde_ui.dart';               // Core + all widgets
import 'package:fonde_ui/fonde_ui_riverpod.dart';      // Riverpod providers (optional)

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

FondeApp wraps Riverpod's ProviderScope and Material's MaterialApp internally.

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

• RinneGraph — graph-based database app