Neumorphic Ui kit for flutter

| | | | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | | | |

Getting Started

In your flutter project add the dependency:

dependencies:
  neumorphic: any

Check out library documentation (latest stable).

Api

Now implemented some widgets:

• NeuCard
• NeuButton
• NeuSwitch
• NeuText
• NeuTextField
• NeuBackButton
• NeuAppBar
• NeuApp

NeuCard

It is container like a

Material

Container

NeuCard(
  // State of Neumorphic (may be convex, flat & emboss)
  curveType: CurveType.concave,

  // Elevation relative to parent. Main constituent of Neumorphism
  bevel: 12,
  // Specified decorations, like BoxDecoration but only limited
  decoration: NeumorphicDecoration(
    borderRadius: BorderRadius.circular(8)
  ),
  // Other arguments such as margin, padding etc. (Like Container)
  child: Text('Container')
)

NeuButton

Button automatically when pressed toggle the status of NeumorphicStatus from

concave

convex

NeuButton(
  onPressed: () {
    print('Pressed !');
  },
  child: Text('Button'),
);

NeuSwitch

Remade

CupertinoSlidingSegmentedControl

NeuSwitch(
  onValueChanged: (val) {
    setState(() {
      switchValue = val;
    });
  },
  groupValue: switchValue,
  children: {
    0: Padding(
      padding: EdgeInsets.symmetric(vertical: 24, horizontal: 8),
      child: Text('First'),
    ),
    1: Padding(
      padding: EdgeInsets.symmetric(vertical: 24, horizontal: 8),
      child: Text('Second'),
    ),
  },
);

NeuText

It is a Text Widget which can implement Neumorphism.

parentColor

spread

depth

style

emboss

NeuText('Lorem Ipsum')

NeuTextField

It is a Text editing widget like Material's TextField which has a few more properties like the support to use a custom selection control.

NeuTextField(
  controller: _controller,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Write',
  ),
)

NeuBackButton

A Neumorphic design back button.

Used by NeuAppBar.

NeuAppBar

A Neumorphic design appBar. This app bar consists of a

leading

title

App bars are typically used in the

Scaffold.appBar

NeuAppBar(
  title: Text('This is title'),
)

NeuApp

NeumorphicApp implements instance of

WidgetsApp

NeuThemeData

The

NeuThemeData

ThemeData

You can access the current Neumorphic

NeuThemeData

NeuTheme.of(context)

Theme.of(context)

ThemeData

NeumorphicApp(
  theme: NeumorphicThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.blueGrey,
    curveType: curveType.concave,
    lightSource: LightSource.topLeft, // Not implemented yet
  ),
  home: Scaffold(
    appBar: NeuAppBar(
      title: const Text('NeumorphicApp Theme'),
    ),
  ),
)

Limitations

• Not all widgets currently utilize

  NeuThemeData

  . This will be changed in later updates of this package.

• NeuTextField

  currently isn't much different than material's

  TextField

  .

You can make support requests or report problems here on Neumorphic's github issue page.

Inspired by

1. Alexander Plyuto (figma)

2. Ivan Cherepanov (medium)