DEV Community

Cover image for Migrating from Material to fossui, without a rewrite
fossui
fossui

Posted on

Migrating from Material to fossui, without a rewrite

#flutter #ui #dart #opensource

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(),
)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

TextField + InputDecoration folds into named params:

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

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),
);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)