seed_ui 0.6.2

A themeable Flutter widget library — 30+ token-driven components plus context-free message, notification, modal and drawer APIs. No Material dependency.

seed_ui

A themeable widget library for Flutter, built around design tokens and context-free feedback APIs. Inspired by Ant Design — see Acknowledgements.

▶ Try every component in your browser

The gallery below runs the real widgets — switch the theme, resize the window, open a drawer.

• Token-driven theming. Every color, size and motion value is derived from a small set of seeds. Change colorPrimary and the whole kit follows — see theming, including light/dark switching.
• Feedback you can call from anywhere. message.success('Saved') and notification.error(...) need no BuildContext.
• No Material dependency in the widgets. Components build on package:flutter/widgets.dart, so they drop into Material and Cupertino apps alike.

Installation

dependencies:
  seed_ui: ^0.6.2

Getting started

Two pieces of wiring, both optional-but-recommended:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return ConfigProvider(
      theme: ThemeData(
        token: const SeedToken(colorPrimary: Color(0xFF1677FF)),
      ),
      child: MaterialApp(
        navigatorKey: UiKit.navigatorKey,
        home: const HomePage(),
      ),
    );
  }
}

ConfigProvider supplies the theme. Widgets fall back to the default theme without it, so it is optional.

UiKit.navigatorKey is required if you call message or notification: those APIs render into the root navigator's overlay, and the key is how they find it. Without it they assert in debug mode.

Components

Component	Description
Alert	Inline status banner
Avatar	Represents users or objects; image, icon, text, grouping
Button	Pressable button with variant, color, size, shape, loading and danger states
Spinner	Indeterminate circular progress indicator
Spin	Loading state for a region, with tip, delay, percent and fullscreen mask
message	Brief centred status toasts
notification	Corner-anchored cards with a headline, detail and actions
Modal	Blocking dialogs that return the user's decision
Drawer	Panels that slide in from a screen edge
Popconfirm	Confirmation bubble anchored to a trigger
Tooltip	Text hint on hover or tap
Progress	Bar or ring progress indicator
Result	Full-page operation outcome
Input	Single- or multi-line text field
InputNumber	Numeric input with steppers, range, precision
Segmented	Segmented single-select control
Tabs	Tabbed panels — line, card, editable-card
Card	Content container — header, cover, actions, tabs, meta
Collapse	Collapsible panels — accordion, ghost, custom icons
Tree	Hierarchical list — expand, select, cascading checkboxes, lines, drag-and-drop
SortableList	Drag-to-reorder list — vertical or horizontal, smooth make-room animation
Listy	Long list with grouped sections, sticky headers and imperative scroll control
Steps	Progress through a task's stages — statuses, wizard controller, five types
Timeline	Vertical event axis — modes, colours, custom dots, pending
Tour	Guided walk through a screen — spotlight mask, anchored panels, steps
Popover	Floating card with a title and a body — hover, tap or long-press
Switch	On/off toggle
Checkbox	Checkbox, single or grouped
Radio	Radio button group
Select	Dropdown select — single, multiple or tags
Dropdown	Menu floating from a trigger; submenus, groups
Empty	Empty-state placeholder; global renderEmpty
Pagination	Pager: numbers, size-changer, jumper, simple
Tag	Label / chip; presets, custom colours, closable, checkable
Upload	File list with a picker trigger, per-file progress, retry and remove

See also theming for the token system.

Name clash. The kit's Drawer getter shares a name with Material's Drawer widget. When importing both, hide the Material one: import 'package:flutter/material.dart' hide Drawer;. See the Drawer docs.

At a glance

Button(
  variant: ButtonVariant.solid,
  color: ButtonColor.primary,
  onPressed: save,
  child: const Text('Save'),
)

message.success('Saved');

final close = message.loading('Uploading…');
await upload();
close();

notification.error('Upload failed',
  description: 'The server rejected the file.',
  actions: [
    Button(
      size: SoftSize.small,
      onPressed: retry,
      child: const Text('Retry'),
    ),
  ],
);

Example app

A gallery covering every component lives in example/:

cd example
flutter run

Testing against the kit

Spinner animates continuously, which means any test rendering a loading button, a message.loading() toast or a spinner cannot use pumpAndSettle — the tree never becomes quiescent and the call times out. Drive frames explicitly instead:

await tester.pump();                                  // start the animation
await tester.pump(const Duration(milliseconds: 400)); // run it to completion
await tester.pump();                                  // let the stack rebuild

The trailing pump matters: overlay entries are removed from an animation completion callback, and the container rebuilds on the following frame.

Acknowledgements

The component set, the token vocabulary and much of the interaction detail are inspired by Ant Design — an excellent design system, and the reference this kit measured itself against while it was written. seed_ui is an independent Flutter project: not affiliated with, endorsed by, or a port of Ant Design.

Contributing

Issues and pull requests are welcome at github.com/interdev7/seed_ui.

Before opening a PR, please make sure the tree is clean:

dart format .
flutter analyze
flutter test

License

MIT © Anton Samoylov

Status

Under active development. The public API is not stable yet: while the package is on 0.x, a breaking change bumps the minor version, and every one is spelled out in the changelog. 1.0.0 follows once the surface has gone a few releases without needing one.

From 1.0.0 the guarantee covers the exported names and their signatures, not the values behind the tokens or the pixels they produce — see what the version number promises.