Implementation of Neumorphism user interface consisting of sets of principles and widgets for the Flutter framework
| | |
| ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |
| |
|
In your flutter project add the dependency:
dependencies: neumorphic: any
Check out library documentation (latest stable).
Now implemented some widgets:
It is container like a
Materialmerged with
Container, but implements Neumorphism
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') )
Button automatically when pressed toggle the status of NeumorphicStatus from
concaveto
convexand back
NeuButton( onPressed: () { print('Pressed !'); }, child: Text('Button'), );
Remade
CupertinoSlidingSegmentedControlwhich follows Neumorphism
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'), ), }, );
It is a Text Widget which can implement Neumorphism.
parentColor,
spread,
depth,
style,
embossare properties of this widget which can be modified to obtain different effects.
NeuText('Lorem Ipsum')
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', ), )
A Neumorphic design back button.
Used by NeuAppBar.
A Neumorphic design appBar. This app bar consists of a
leadingWidget & a
titleWidget.
App bars are typically used in the
Scaffold.appBarproperty, which places the app bar as a fixed-height widget at the top of the screen.
NeuAppBar( title: Text('This is title'), )
NeumorphicApp implements instance of
WidgetsAppwhich utilizes
NeuThemeDatafor adding themes to your app.
The
NeuThemeDataalso adds
ThemeDatato the widget tree, so you don't have to worry about using MaterialApp again. Material widgets won't have side-effects.
You can access the current Neumorphic
NeuThemeDatausing
NeuTheme.of(context). You can also use
Theme.of(context)to get
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'), ), ), )
NeuThemeData. This will be changed in later updates of this package.
NeuTextFieldcurrently isn't much different than material's
TextField.
You can make support requests or report problems here on Neumorphic's github issue page.