fading_ui

Neumorphic Flutter components with Diaspora and Imperium theme groups in a retrofuturistic tone.

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.
• Flutter-only implementation with no external neumorphism package.

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),
				);
			},
			home: const MyScreen(),
		),
	);
}

Switch themes at runtime:

class MyApp extends StatefulWidget {
	const MyApp({super.key});

	@override
	State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
	FadingThemeName _theme = FadingThemeName.abyss;

	@override
	Widget build(BuildContext context) {
		final FadingThemeData theme = FadingThemeData.fromTheme(_theme);

		return FadingThemeScope(
			theme: _theme,
			data: theme,
			child: WidgetsApp(
				color: theme.backgroundStart,
				debugShowCheckedModeBanner: false,
				home: MyScreen(
					onToggleTheme: () {
						setState(() {
							_theme = _theme == FadingThemeName.abyss
								? FadingThemeName.dawn
								: FadingThemeName.abyss;
						});
					},
				),
			),
		);
	}
}

Usage

Column(
	children: <Widget>[
		FadingButton(
			label: 'Engage Drive',
			onPressed: () {},
		),
		const SizedBox(height: 16),
		const FadingCard(
			title: 'Noble House Signal',
			child: Text('Orbital route synchronized.'),
		),
		const SizedBox(height: 16),
		const FadingTextField(
			label: 'Transmission',
			hint: 'Type your command',
		),
		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',
		),
	],
)

Theme

FadingThemeData provides four built-in palettes grouped into Diaspora (Dawn, Abyss) and Imperium (Hope, Dream) plus semantic tokens for text, surfaces, controls, and progress states. Use FadingThemeData.fromTheme(...) to switch between the built-in themes, or construct your own theme data if you want a custom palette.

Color Reference

Diaspora — Abyss

Color	Hex	Preview
midnight	#1A1824
dusk	#2A2235
dust	#3C2D3B
amberGlow	#EC8A54
ember	#CC5C4D
roseHaze	#D88AA1
starlight	#F1E6D9
storm	#93879C
border	#4B3B4E
success	#79B889
error	#D96D6D

Diaspora — Dawn

Color	Hex	Preview
daybreak	#F8EFE4
sunwash	#EBD9C7
sand	#DFC6B3
linen	#FFF8F0
ink	#2D2332
mist	#6F5F68
dayBorder	#CCB19F
amberGlow	#EC8A54
ember	#CC5C4D
success	#79B889
error	#D96D6D

Imperium — Hope

Color	Hex	Preview
imperialBlack	#121317
imperialCharcoal	#26282E
imperialBronze	#7B5A3A
imperialGold	#D1A446
imperialOchre	#B6812B
imperialSilver	#D3D2D0
imperialBorder	#5C4C35
success	#79B889
error	#D96D6D

Imperium — Dream

Color	Hex	Preview
dreamWhite	#F8F8F6
dreamCream	#F5EBDD
dreamBeige	#E0D1BF
dreamCharcoal	#2C3139
dreamSlate	#6B7480
dreamSteel	#8F99A6
dreamBorder	#B6AA9C
success	#79B889
error	#D96D6D

Public API

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