Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
GitHub repositoryTushar-Mishra999/Neumorphic_Button

Neumorphic_Button

Package for Neumorphic Button

View on GitHub ↗
Neumorphic_Button project cover
Stars
2
Forks
2
Last push (UTC)
Dec 19, 2022
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

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
  1. 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),
      )),
    );
  }
}
Tushar Mishra GitHub avatar
GitHub author

Tushar Mishra ↗

New DelhiOfficial website ↗
LanguagesC++CMakeDartHTMLCSwiftKotlinObjective-C

Packages published by this repository

Dependencies used

Dependency list 3 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}
  • flutter_lintsDevelopment^2.0.0

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗