danieljiwonkang98/neumorphic_button

Package for 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

1. Add the latest version of package to your pubspec.yaml

dependencies:
  neumorphic_button: ^0.0.1+2

2. Import the package and use it in your Flutter App.

import 'package:neumorphic_button/neumorphic_button.dart';

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), )), ); } }

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), )), ); } }