Skip to content

Works with

A Flutter theme that starts in Figma.

Appetite UI works with Flutter through a generated Dart output of its token source, which builds a ThemeData for Light and for Dark with AppetiteTheme.light() and AppetiteTheme.dark().Appetite UI is a Figma UI kit for iOS and Android apps, built like a design system. One token source drives Apple and Material components in light and dark mode, and exports to SwiftUI, Jetpack Compose, Flutter and CSS.

Code output in the docsAll tools

What you get

What the file gives Flutter.

As the file ships today.

Constants named after the variables.

brand/base is apBrandBase and spacing/4 is apSpace4. The Dart names are derived by the export, because the token file has no slot for Dart.

ThemeData for Light and Dark.

The Flutter output builds ThemeData with AppetiteTheme.light() and AppetiteTheme.dark().

Set up

How to wire it up for Flutter.

  1. 01

    Take the Dart output from the file you buy.

    The token source and all four outputs come with the purchase. There is no package to install and no public repository.
  2. 02

    Add it to the Flutter package.

    The Dart file goes into the package that holds your theme.
  3. 03

    Hand the two themes to MaterialApp.

    theme takes AppetiteTheme.light() and darkTheme takes AppetiteTheme.dark().
  4. 04

    Use the generated names.

    apBrandBase and apSpace4 instead of a hex or a literal number. Change values in the source, not in the Dart file.

Sample

What it looks like.

In code.

Flutter: Dart. Wiring the themes: MaterialApp.
FlutterDart
const apBrandBase = Color(0xFF155DFC);
const apSpace4 = 16.0;
const apDurationFast = Duration(milliseconds: 120);
Wiring the themesMaterialApp
MaterialApp(
  theme: AppetiteTheme.light(),
  darkTheme: AppetiteTheme.dark(),
  home: const HomeScreen(),
);

Container(
  color: apBrandBase,
  padding: const EdgeInsets.all(apSpace4),
);

Watch for

What to check before you rely on it.

Tokens, not widgets.

The file ships token code, not component code: your developers build the components on those values. Appetite UI Code, the coded components, is upcoming and is not part of the file today.

The Dart names are derived.

They are generated from the token path, not stored on the variable, so read them from the output instead of guessing them from Figma.

Edit the source.

A value changed by hand in the Dart file is overwritten when the outputs are generated again.

FAQ

Questions about Flutter.

No. The components are Figma components, and the Dart output carries their values and the two themes. Your developers build the widgets on those.

Through the two themes: AppetiteTheme.light() and AppetiteTheme.dark(). MaterialApp chooses between them with its theme, darkTheme and themeMode.

Official documentation

Flutter's own documentation.

Where the tool says how it works. The date is the day it was read or linked.

Read 30 October 2026

Use themes to share colors and font styles, Flutter docs

Check it against the tool.

This page states what the file does today and follows the documentation beside it. Where the two differ, the tool’s own page wins.

Keep reading

On this site.

Read

Code output in the docs

Read

How one Figma token becomes SwiftUI, Compose, Flutter and CSS

Read

One file for iOS and Android

Bring your own stack.

Find your tool on the list, then open the preview and see how the kit sits next to it.

Get lifetime accessOpen the Figma preview