---
title: Flutter Figma UI kit with theme output: Appetite UI
source: https://www.appetiteui.com/works-with/flutter
---

# 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().

## What the file gives

- 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().

## How to wire it up

1. 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. Add it to the Flutter package. The Dart file goes into the package that holds your theme.
3. Hand the two themes to MaterialApp. theme takes AppetiteTheme.light() and darkTheme takes AppetiteTheme.dark().
4. 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.

### Flutter (Dart)

```dart
const apBrandBase = Color(0xFF155DFC);
const apSpace4 = 16.0;
const apDurationFast = Duration(milliseconds: 120);
```

### Wiring the themes (MaterialApp)

```dart
MaterialApp(
  theme: AppetiteTheme.light(),
  darkTheme: AppetiteTheme.dark(),
  home: const HomeScreen(),
);

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

## What to check

- 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

### Does Appetite UI include Flutter widgets?

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

### How does dark mode reach a Flutter app?

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

## Official documentation (30 October 2026)

- [Use themes to share colors and font styles, Flutter docs](https://docs.flutter.dev/cookbook/design/themes), read 30 October 2026

## On this site

- [Code output in the docs](https://www.appetiteui.com/docs/code-output)
- [How one Figma token becomes SwiftUI, Compose, Flutter and CSS](https://www.appetiteui.com/blog/figma-token-to-swiftui-compose-flutter-css)
- [One file for iOS and Android](https://www.appetiteui.com/platforms)