Flutter仿拟物风格按钮插件neumorphic_button的使用

本README描述了该包。如果你将此包发布到pub.dev，则此README的内容将出现在你的包的首页上。

有关编写好的包README的指南，请参阅 编写包页面。

有关开发包的一般信息，请参阅Dart指南 创建库包 和 Flutter指南 开发包和插件。

Neumorphic Button

这个包让你可以创建具有多种可定制功能的仿拟物风格按钮，这些功能可以在你的Flutter应用中使用。你可以创建一种极简视觉设计风格，使用单色颜色、微妙阴影和低对比度来展示按钮和卡片，创造出非常柔和的效果。

安装

1. 在你的pubspec.yaml文件中添加最新版本的包。

dependencies:
  neumorphic_button: ^0.0.1+2

1. 导入包并在你的Flutter应用中使用它。

import 'package:neumorphic_button/neumorphic_button.dart';

特性

你可以为你的仿拟物按钮指定以下属性：

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

示例

轻模式仿拟物按钮

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

暗模式仿拟物按钮

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