Build your Flutter design system from three libraries.

1// dart format off2import 'package:mix/mix.dart';3
4import '../../colors.dart';5
6// The values change with `on`. animate() decides how they get there.7BoxStyler track({8  required bool on,9  required AnimationConfig motion,10}) {11  return BoxStyler()12      .size(76, 44)13      .padding(.all(5))14      .borderRadius(.circular(22))15      .color(on ? purple : slate)16      .alignment(on ? .centerRight : .centerLeft)17      .animate(motion);18}19
20final thumb = BoxStyler()21    .size(34, 34)22    .borderRadius(.circular(17))23    .color(white);24
25final ease = AnimationConfig.easeOut(260.ms);26final spring = AnimationConfig.spring(520.ms, bounce: 0.35);27final bouncy = AnimationConfig.spring(700.ms, bounce: 0.6);

1import 'package:flutter/widgets.dart';2import 'package:mix/mix.dart';3import 'package:naked_ui/naked_ui.dart';4
5import '../plans.dart';6
7/// How one option is drawn. Naked UI passes the state; the rest is yours.8typedef PlanBuilder =9    Widget Function(10      Plan plan,11      NakedRadioState<String> state,12    );13
14/// A radio group of plans. Naked UI supplies the behavior; [builder]15/// draws each option and [layout] places them:16///17/// ```dart18/// PlanPicker(19///   plan: plan,20///   onChanged: choose,21///   layout: planRows,22///   builder: planRow,23/// )24/// ```25class PlanPicker extends StatelessWidget {26  const PlanPicker({27    super.key,28    required this.plan,29    required this.onChanged,30    required this.layout,31    required this.builder,32  });33
34  final String plan;35  final ValueChanged<String> onChanged;36  final FlexBoxStyler layout;37  final PlanBuilder builder;38
39  @override40  Widget build(BuildContext context) {41    // Selection, arrow keys, focus and semantics come from the group.42    return NakedRadioGroup<String>(43      groupValue: plan,44      onChanged: (next) => onChanged(next ?? plan),45      semanticLabel: 'Plan',46      child: layout(47        children: [48          for (final plan in plans)49            NakedRadio<String>(50              value: plan.name,51              builder: (context, state, child) =>52                  builder(plan, state),53            ),54        ],55      ),56    );57  }58}

1import 'package:flutter/widgets.dart';2
3import '../../ui/ui.dart';4import 'style.dart';5
6/// A checkout form composed from installed Remix components.7class Checkout extends StatefulWidget {8  const Checkout({super.key});9
10  @override11  State<Checkout> createState() => _CheckoutState();12}13
14class _CheckoutState extends State<Checkout> {15  int seats = 3;16  bool yearly = true;17  bool support = false;18  bool starting = false;19
20  int get monthly =>21      seats * (yearly ? 10 : 12) + (support ? 4 : 0);22
23  // Nothing is submitted: the button shows its loading state for a moment.24  Future<void> start() async {25    setState(() => starting = true);26    await Future<void>.delayed(27      const Duration(milliseconds: 1400),28    );29    if (mounted) setState(() => starting = false);30  }31
32  void reset() => setState(() {33    seats = 3;34    yearly = true;35    support = false;36  });37
38  @override39  Widget build(BuildContext context) {40    return UiCard(41      child: form(42        children: [43          header(44            children: [45              const Text('Seats'),46              UiBadge.secondary(label: '$seats'),47            ],48          ),49          UiSlider(50            value: seats.toDouble(),51            min: 1,52            max: 10,53            snapDivisions: 9,54            semanticLabel: 'Seats',55            onChanged: (value) =>56                setState(() => seats = value.round()),57          ),58          UiSwitch(59            label: 'Bill yearly',60            selected: yearly,61            onChanged: (value) =>62                setState(() => yearly = value),63          ),64          UiCheckbox(65            label: 'Priority support',66            selected: support,67            onChanged: (value) =>68                setState(() => support = value ?? false),69          ),70          UiButton(71            label: 'Start for \$$monthly a month',72            loading: starting,73            onPressed: start,74          ),75          UiButton.ghost(label: 'Reset', onPressed: reset),76        ],77      ),78    );79  }80}