Skip to content

data-charya/Synth-Flutter

Repository files navigation

Logo

flutter GitHub license Flutter action


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

1

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

Drawable Button

2

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

Flat Button

3

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

Flat Drawable Button

4

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

Img Button

5

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

Elevated View

6

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

Circular Checkbox

7

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

RoundedRect Checkbox

8

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