neumorphic_button

Description:

neumorphic button

Neumorphic Button #
This package lets you create Neumorphic Button with a number of customizable features that can be used throughout your Flutter app.You can create a minimal visual design style that uses monochromatic colors, subtle shadows and low contrasts to showcase buttons and cards, creating a really soft look.
Installation #

Add the latest version of package to your pubspec.yaml

dependencies:
neumorphic_button: ^0.0.1+2
copied to clipboard

Import the package and use it in your Flutter App.

import 'package:neumorphic_button/neumorphic_button.dart';
copied to clipboard
Features #
There are a number of properties that you can specify for your neumorphic button :

height
width
border-radius
box-shape
shadow-color
spread-radius
blur-radius
onTap function

Example #
Light mode neumorphic button #



class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.grey.shade300,
body: Center(
child: NeumorphicButton(
onTap: () {},
child: Image.asset(
'assets/apple.png',
height: 80,
color: Colors.grey[700],
),
BorderRadius: 12,
bottomRightShadowBlurRadius: 15,
bottomRightShadowSpreadRadius: 1,
borderWidth: 5,
backgroundColor: Colors.grey.shade300,
topLeftShadowBlurRadius: 15,
topLeftShadowSpreadRadius: 1,
topLeftShadowColor: Colors.white,
bottomRightShadowColor: Colors.grey.shade500,
height: size.width * 0.5,
width: size.width * 0.5,
padding: EdgeInsets.all(50),
bottomRightOffset: Offset(4, 4),
topLeftOffset: Offset(-4, -4),
)),
);
}
}
copied to clipboard






Dark mode neumorphic button #



class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.grey.shade900,
body: Center(
child: NeumorphicButton(
onTap: () {},
child: Image.asset(
'assets/apple.png',
height: 80,
color: Colors.grey[700],
),
BorderRadius: 12,
bottomRightShadowBlurRadius: 15,
bottomRightShadowSpreadRadius: 1,
borderWidth: 5,
backgroundColor: Colors.grey.shade900,
topLeftShadowBlurRadius: 15,
topLeftShadowSpreadRadius: 1,
topLeftShadowColor: Colors.grey.shade800,
bottomRightShadowColor: Colors.black,
height: size.width * 0.5,
width: size.width * 0.5,
padding: EdgeInsets.all(50),
bottomRightOffset: Offset(5, 5),
topLeftOffset: Offset(-5, -5),
)),
);
}
}
copied to clipboard