atomic_ui_kit

A small kit of domain-free Flutter widgets: neumorphic buttons and containers, gradient text, switches, badges, and more. The widgets use only Flutter and decimal. They do not know about app models, state management, or platform plugins.

Widgets

Widget Description
NeuButton Neumorphic button with an ink splash and an optional gradient.
NeuContainer Neumorphic container that paints the neu shadows.
NeuTheme ThemeExtension with the shared neu shadows, background color, and radius.
AppFlatButton Flat button with an ink splash and an optional border.
GradientText Paints text with a Gradient through a ShaderMask.
Indicator Colored shape followed by a bold label.
DropdownMenuIcon Button that opens an overlay menu and reports the selected item.
AnimatedListItem List item that scales and tilts into place on the first build.
PercentSwitch Row of 25 %, 50 %, 75 %, and MAX options.
TimeRangeSwitch Row of 1Y, 1M, 1W, and 1D options.
PriceBadge Price change badge: green for a positive change, red for a negative change.
slideUpRoute Route that slides a page up from the bottom of the screen.

Install

flutter pub add atomic_ui_kit

Usage

Register NeuTheme on the ambient ThemeData to restyle every neu widget in the subtree. Then use NeuButton:

MaterialApp(
  theme: ThemeData(
    extensions: const [
      NeuTheme(
        keyBackgroundColor: Color(0xFF252F45),
        borderRadius: 12,
      ),
    ],
  ),
  home: Center(
    child: NeuButton(
      height: 56,
      width: 200,
      onTap: () {},
      child: const Text('Buy'),
    ),
  ),
);

PercentSwitch reports 0.25, 0.5, 0.75, or 1.0. TimeRangeSwitch reports TimeRangeSwitchValue.day, .week, .month, or .year:

PercentSwitch(
  onChanged: (percent) {
    // 0.25, 0.5, 0.75 or 1.0
  },
);

TimeRangeSwitch(
  onChanged: (range) {
    // TimeRangeSwitchValue.day, .week, .month or .year
  },
);

Platforms

atomic_ui_kit is pure Flutter with no native code and no platform plugins. It runs on Android, iOS, web, macOS, Windows, and Linux.

Example

A runnable app in example/ shows the widgets. It has a components gallery and a trading dashboard.

Screenshots

Widget gallery

Libraries

atomic_ui_kit
A small kit of domain-free Flutter widgets: neumorphic buttons and containers, gradient text, dropdown menu icon, percent and time range switches, and more.