Fifty Flutter Kit

A comprehensive Flutter/Dart toolkit: design tokens, theming, UI components, forms, caching, storage, connectivity, real-time sockets, printing, audio, speech, narrative, world rendering, skill trees, and achievements.

This toolkit is born from close to a decade of building Flutter and Dart applications professionally. It is a curated collection of the packages and patterns I reach for most often -- not everything I know, but the essentials, battle-tested across real projects and refined over the years. Rather than keeping these as scattered internal utilities and tribal knowledge, I wrote them down as properly published, reusable packages and open-sourced them for the Flutter community.

By Fifty.dev

---

Showcase

Demo App	Multi-Step Forms	Skill Trees	Tactical Grid
Audio Engine	Achievements	Printing	Connectivity

---

Packages

All packages are published on pub.dev and work independently or together.

Foundation

The design system core. All visual decisions flow from here.

Package	Version	Description
fifty_tokens		Design tokens — colors, typography, spacing, motion
fifty_theme		Flutter theming — converts tokens into ThemeData
fifty_ui		Component library — buttons, cards, inputs, effects

App Development

Production infrastructure for Flutter applications.

Package	Version	Description
fifty_forms		Form building with validation, multi-step wizards, drafts
fifty_utils		DateTime, Color, responsive utilities, async state
fifty_cache		TTL-based HTTP response caching
fifty_storage		Secure token storage and preferences
fifty_connectivity		Network monitoring with reachability probing
fifty_socket		Phoenix WebSocket with auto-reconnect
fifty_printing_engine		Multi-printer ESC/POS with Bluetooth and WiFi

Game Development

Engines and systems for Flutter-based games and interactive experiences.

Package	Version	Description
fifty_audio_engine		Reactive audio — BGM, SFX, Voice channels
fifty_speech_engine		Text-to-speech and speech-to-text
fifty_narrative_engine		Narrative processing for dialogue and stories
fifty_world_engine		Flame-based grid world rendering
fifty_skill_tree		Interactive skill tree widget
fifty_achievement_engine		Achievement system with condition-based unlocks

Source code for each package is in packages/.

---

Quick Start

Design System

import 'package:fifty_tokens/fifty_tokens.dart';
import 'package:fifty_theme/fifty_theme.dart';
import 'package:fifty_ui/fifty_ui.dart';

// Apply the design system
MaterialApp(
  theme: FiftyTheme.light(),
  darkTheme: FiftyTheme.dark(),
);

// Use tokens directly
final primary = FiftyColors.primary;
final padding = FiftySpacing.md;

// Use components
FiftyButton(
  label: 'Get Started',
  onPressed: () {},
);

Audio Engine

import 'package:fifty_audio_engine/fifty_audio_engine.dart';

// Initialize once in main()
await FiftyAudioEngine.instance.initialize([
  'assets/bgm/menu.mp3',
  'assets/bgm/level1.mp3',
]);

// Background music
FiftyAudioEngine.instance.bgm.play('assets/bgm/menu.mp3');

// Low-latency sound effects
FiftyAudioEngine.instance.sfx.play('assets/sfx/click.wav');

See each package README for complete API documentation, or browse the full Quick Start guide for all domains.

---

Architecture

graph LR
    subgraph Foundation
        tokens[fifty_tokens] --> theme[fifty_theme] --> ui[fifty_ui]
    end
    subgraph AppDev[App Development]
        forms[fifty_forms]
        cache[fifty_cache]
        storage[fifty_storage]
        connectivity[fifty_connectivity]
        socket[fifty_socket]
        printing[fifty_printing_engine]
    end
    subgraph GameDev[Game Development]
        audio[fifty_audio_engine]
        speech[fifty_speech_engine]
        narrative[fifty_narrative_engine]
        world[fifty_world_engine]
        skill_tree[fifty_skill_tree]
        achievements[fifty_achievement_engine]
    end
    utils[fifty_utils]
    ui --> forms
    ui --> skill_tree
    ui --> achievements
    utils -.-> AppDev
    utils -.-> GameDev

Loading

Full architecture documentation and dependency graph: docs/ARCHITECTURE.md

---

Templates

Template	Description	Pattern
mvvm_actions	Production app scaffold with auth, caching, connectivity, theming	MVVM + Actions

Templates use the ecosystem packages as dependencies. Fork as a starting point -- don't import.

Apps

App	Description
fifty_demo	Interactive demo showcasing all packages
tactical_grid	Tactical skirmish game -- world engine, audio, achievements
sneaker_drops	Sneaker marketplace -- UI components, forms, theming

---

Installation

dart pub add fifty_tokens fifty_theme fifty_ui

Or add to pubspec.yaml:

dependencies:
  fifty_tokens: ^1.0.3
  fifty_theme: ^1.0.1
  fifty_ui: ^0.6.2

For contributors (path dependencies)

dependencies:
  fifty_tokens:
    path: ../fifty_tokens

---

Development

# Run tests for all packages
flutter test packages/*/test/

# Run tests for a specific package
cd packages/fifty_utils && flutter test

# Generate coverage report
flutter test --coverage
genhtml coverage/lcov.info -o coverage/html

---

Contributing

Contributions welcome! See CONTRIBUTING.md for setup, code style, and PR guidelines.

---

License

MIT License — see LICENSE for details.

---

Built with Fifty Design Language

pub.dev · GitHub · Architecture · Quick Start