Example source

The files behind the page.

Each live example is a folder in lib/demos: its styles in style.dart, its widget in a file of its own (plan_picker keeps one file per drawing). Plain colors come from lib/colors.dart; only the Tokens example uses the tokens in lib/theme.dart. The files in lib/host only connect them to the website.

Run the examplesDependencies & setup

Requires Flutter 3.47.9+ · Dart 3.13+.

Run this version of the examples:

git clone https://github.com/btwld/mix-website.git
cd mix-website
git checkout 65da40a7936dbcdb71a7024f83e90b44bbc8ba28
cd packages/mix_showcase
flutter pub get
flutter run -d chrome

On its own, the app opens a gallery of the examples with a theme switch. To start smaller, run a starter:

flutter run -d chrome -t lib/starters/mix.dart

Browse the package on GitHub. Start with any folder in demos.

The file list includes the bundled fonts’ license notices.

The plain colors the examples share.

Complete file · 15 linesView on GitHub

/// Plain colors the examples share. Only demos/themed_plan uses tokens.
library;

import 'dart:ui';

const purple = Color(0xFF8B5CF6);
const purpleLight = Color(0xFF9D75FA); // hover
const white = Color(0xFFFFFFFF);
const grey = Color(0xFF9A93AE); // secondary text
const night = Color(0xFF0D0B14); // darkest fill
const charcoal = Color(0xFF17141F); // surfaces
const graphite = Color(0xFF221D30); // hovered surfaces
const slate = Color(0xFF322B45); // outlines
const shadow = Color(0x59000000);
const clear = Color(0x00000000);