Synth Neumorphism Components #

My take on CRED's Synth Design System. I tried to recreate the components as close to the real thing as possible and will be adding more components down the line.

Usage #

Add the plugin to your pubspec.yaml using :

flutter pub add synth

Import the package and use the components, Its that simple !

SynthSoftbutton(
  text: 'Your Text',
  width: 100,
  height: 50,
  onPressed: () 
  {
    //write your function definition
  },
 )

Buttons #

Softbutton #

SynthSoftbutton(
  text: 'Your Text',
  width: 100,
  height: 50,
  onPressed: () 
  {
    //write your function definition
  },
 )

Drawable Button #

SynthDrawablebutton(
  text: 'Your Text',
  width: 100,
  height: 50,
  onPressed: () 
  {
    //write your function definition
  },
 )

Flat Button #

SynthFlatbutton(
  text: 'Your Text',
  width: 100,
  height: 50,
  onPressed: () 
  {
    //write your function definition
  },
 )

Flat Drawable Button #

SynthFlatDrawablebutton(
  text: 'Your Text',
  width: 100,
  height: 50,
  onPressed: () 
  {
    //write your function definition
  },
  icon: Icon(
    Icons.add,
    color: primarySynthWhite100,
    ),
   )
 )

Img Button #

NeuImgbutton(
  radius: 80,
  onPressed: () 
  {
    //write your function definition
  },
  icon: Icon(
    Icons.arrow_back_ios_new_rounded,
  ),
 )

Elevated View #

ElevatedView(
   width: 300,
   height: 100,
   child: Center(
   child: Text(
   'synth',
   style: TextStyle(
   fontSize: 25,
   fontFamily: 'Gilroy',
   fontWeight: FontWeight.w900,
   color: primarySynthCopper400,
   ),
  ),
 ),
)

Circular Checkbox #

SynthCircularcheckbox(
  width: 30,
  height: 30,
  onPressed: () 
  {
    //write your function definition
  },
 )

RoundedRect Checkbox #

 SynthRoundedRectcheckbox(
   width: 30,
   height: 30,
   onPressed: () 
   {
      //write your function definition here
   },
  )