Un package Flutter pour bouton neumorphique

Le bouton neumorphique vous permet de créer un bouton neumorphique avec un certain nombre de fonctionnalités personnalisables qui peuvent être utilisées dans votre application Flutter.

Installation

Ajoutez la dernière version du package à votre pubspec.yaml

dependencies:
  neumorphic_button: ^0.0.1

Importez le package et utilisez-le dans votre application Flutter.

import 'package:neumorphic_button/neumorphic_button.dart';

Caractéristiques

Il existe un certain nombre de propriétés que vous pouvez spécifier pour votre bouton neumorphique :

la taille
largeur
rayon de bordure
en forme de boîte
couleur d’ombre
rayon de propagation
rayon de flou
fonction onTap

Exemple

Bouton neumorphique mode lumière

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

Bouton neumorphique en mode sombre

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

Information additionnelle

À FAIRE : Expliquez aux utilisateurs plus d’informations sur le package : où trouver plus d’informations, comment contribuer au package, comment signaler des problèmes, quelle réponse ils peuvent attendre des auteurs du package, etc.