DEV Community: fossui

Material vs fossui: an honest, component-by-component comparison

fossui — Thu, 13 Aug 2026 11:57:32 +0000

Material wins on maturity, breadth, and accessibility depth. fossui wins on
default look, API shape, and footprint. We wrote up exactly where each of
those is true.

The gist:

Look: Material's tinted seeded color scheme and rounded-pill buttons vs fossui's neutral palette and superellipse corners. Same screens rendered both ways in the full post, so you judge it, not us.
API shape: Material spreads emphasis across five button classes, fossui folds it into one widget with a variant. Same pattern repeats across tabs, badges, dialogs.
Footprint: one runtime dependency, zero icon package, fossui paints its own glyphs.
32 components mapped against their Material counterpart, six with no Material equivalent at all (OTP field, number field, skeleton, meter, toggle, toggle group).

Where Material actually wins, no spin: raw accessibility depth on dialogs,
selects, sliders; broader built-in variants (RangeSlider, DataTable,
fullscreen dialogs); and the entire ecosystem gravity, every tutorial and
Stack Overflow answer assumes Material.

Full scorecard, every screenshot, and the complete component map:
fossui.org/blogs/minimal-flutter-ui-kits-compared-2026

Migrating from Material to fossui, without a rewrite

fossui — Tue, 04 Aug 2026 12:16:26 +0000

Do you have to rewrite your app to try fossui? No. You swap widgets one screen at a time and let Material and fossui sit side by side until you're done.

Setup

Keep your MaterialApp, point its theme at fossui's:

MaterialApp(
  theme: FossThemeData.light.toThemeData(),
  darkTheme: FossThemeData.dark.toThemeData(),
  home: const HomePage(),
)

Your existing Material widgets keep working, so a half-migrated screen is fine.

A couple of the swaps

Material spreads buttons across five classes. fossui has one, with a
variant:

FossButton(variant: FossButtonVariant.outline, onPressed: f, child: t)

TextField + InputDecoration folds into named params:

FossTextField(label: 'Email', helperText: 'Work address', leading: const Icon(LucideIcons.mail))

Same pattern for cards, dialogs, tabs, checkboxes, and the rest, the full guide has the whole map.

The one real change

Styling moves to the theme, not the call site. No color: or
borderRadius: on the widgets. Retheme once at the root, and it moves everywhere:

final theme = FossThemeData.light.retheme(
  const FossThemeSpec(primary: Color(0xFF16A34A), radius: 22),
);

A sensible order: register the theme, swap leaf widgets first (buttons, fields, badges), then containers and flows (cards, dialogs, tabs), then delete the Material styling you no longer need. Stop at any step and ship.

Full widget-by-widget map and the rest of the setup fossui.org/blogs/migrating-from-material-to-fossui

fossui components work the same under MaterialApp, CupertinoApp, or a bare WidgetsApp

fossui — Wed, 29 Jul 2026 18:50:58 +0000

Most Flutter UI kits assume you're on MaterialApp. fossui doesn't. Every component reads its own theme first, so the same button, switch, and text field render identically whether your app root is MaterialApp, CupertinoApp, or a bare WidgetsApp. This isn't an anti-Material stance, most fossui apps will still run on MaterialApp. It's about not locking the components to it.

Registering the theme takes one line under each shell:

// MaterialApp
MaterialApp(theme: FossThemeData.light.toThemeData());

// CupertinoApp or bare WidgetsApp
FossTheme(data: FossThemeData.light, child: const MyApp());

Everything else comes from one accessor, context.fossTheme, so a component never needs to know which shell it's under:

Colors: 26 semantic roles (background, primary, destructive, and so on), light and dark
Radii: a five-step scale, from small controls to fully rounded
Spacing: one base unit, scaled consistently across every component
Typography: a six-step type scale
Shadows: four elevation levels
Motion: named durations for the things that animate (overlays, drawers, toasts)

Retheme once at the root and the whole app follows, no per-component color or radius props to keep in sync.

fossui is young and mobile-first. Web and desktop compile and should work, but they're less exercised than mobile, so verify on the platforms you ship.

Full breakdown, resolution order, and a working three-shell example: the theming docs.

Introducing fossui: a Flutter UI kit that doesn't look like Material

fossui — Tue, 28 Jul 2026 17:35:33 +0000

Every Flutter app looks like Material, because Material is what you get for free. For the last few months we've been building an alternative.

It's called fossui: a small, open-source Flutter UI kit for the apps that would rather not look like every other Flutter app.

What it is

30+ components, one dependency, no icon package
Framework-agnostic: it reads its own theme, so it drops into a MaterialApp, a CupertinoApp, or a bare WidgetsApp
A neutral look with superellipse (squircle) corners, light and dark out of the box
Built for the AI era: an MCP server and skills, so coding agents write it with the right variants instead of guessing the API

Why

Most Flutter component libraries ask you to buy into their world, wrap your app, or drive ThemeData directly. We wanted the opposite: components that respect a theme you already control, whether or not you're on MaterialApp. Retheme once at the root, and the whole set follows.

What ships around it

Docs at fossui.org, with a rendered light and dark preview for every component
A playground and theme builder at play.fossui.org, recolor the whole set live and copy the theme out
An MCP server so coding agents scaffold and theme fossui correctly on the first try

Where it stands

Young, mobile-first, and built by a team of two. Web and desktop compile and should work, but they're less exercised than mobile.

What would make or break fossui for your next Flutter app?

Site: https://fossui.org
Package: https://pub.dev/packages/fossui
Source: https://github.com/fossui/fossui