fading_ui

Components and widgets inspired on Fading Suns, the TTRPG game.

Features

• Runtime grouped theme support through FadingThemeScope.
• Reusable raised and inset neumorphic surfaces.
• Material and Cupertino free.
• Core components: button, card, surface, toast, and text field.
• Selection and control components: checkbox, switch, slider, radio group, and tab bar.
• Progress components: linear and circular progress indicators.
• Badge supports basic fixed colors or theme-derived colors.
• Flutter-only implementation with no external neumorphism package.

Demo

Check out demo app in fading_ui_demo that showcases the full widget set and allows manual switching between Diaspora and Imperium themes.

Documentation

• Roadmap for implemented widgets, planned widgets, and design direction.
• Theme guide for theme groups, API direction, and color reference.

Testing and Widgetbook Workflow

Use tests for behavior and Widgetbook for visual/manual review.

• Behavioral checks (required): run flutter test in fading_ui.
• Story checks (required): run flutter analyze in fading_ui_demo/widgetbook.
• Manual visual checks (recommended): run flutter run -d chrome in fading_ui_demo/widgetbook.

Coverage matrix for the initial Widgetbook rollout:

Widget	Behavioral source of truth	Widgetbook visual states
FadingButton	fading_ui/test/widgets/fading_button_test.dart	Interactive, Disabled
FadingTextField	fading_ui/test/widgets/fading_text_field_test.dart	Interactive, Error

Contribution rule for low maintenance:

• Every new public widget should add one focused widget test file and one canonical Widgetbook story.
• Do not duplicate full test permutations in stories; only include states that improve design review.

Getting started

Add the package to your app and apply the theme:

import 'package:flutter/widgets.dart';
import 'package:fading_ui/fading_ui.dart';

Widget buildApp() {
	return FadingThemeScope(
		theme: FadingThemeName.abyss,
		data: FadingThemeData.abyss,
		child: WidgetsApp(
			color: FadingThemeData.abyss.backgroundStart,
			debugShowCheckedModeBanner: false,
			pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) {
				return PageRouteBuilder<T>(
					settings: settings,
					pageBuilder: (BuildContext context, _, _) => builder(context),
				);
			},
		),
		const SizedBox(height: 16),
		FadingCheckbox(
			value: true,
			onChanged: (bool value) {},
			label: 'Enable pulse lock',
		),
		const SizedBox(height: 16),
		FadingSwitch(
			value: false,
			onChanged: (bool value) {},
			label: 'Aux relay',
		),
		const SizedBox(height: 16),
		FadingSlider(
			value: 42,
			min: 0,
			max: 100,
			onChanged: (double value) {},
		),
		const SizedBox(height: 16),
		const FadingProgressIndicator(
			value: 0.6,
			label: 'Telemetry',
		),
	),
}

Public API

The package exports the following widgets from fading_ui.dart: FadingButton, FadingCard, FadingSurface, FadingToast, FadingTextField, FadingCheckbox, FadingSwitch, FadingSlider, FadingProgressIndicator, FadingRadioGroup, and FadingTabBar.