拟态按钮

拟态按钮可让您创建具有许多可自定义功能的拟态按钮，这些功能可在您的 Flutter 应用中通用。

安装

  1. 将最新版本的包添加到您的 pubspec.yaml 文件中

dependencies:
  neumorphic_button: ^0.0.1
  1. 导入包并在您的 Flutter 应用中使用它。
import 'package:neumorphic_button/neumorphic_button.dart';

特点

您可以为拟态按钮指定许多属性

  • 高度
  • width
  • 边距半径
  • 框形
  • 阴影颜色
  • 扩散半径
  • 模糊半径
  • onTap 函数

示例

浅色模式拟态按钮

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

附加信息

TODO：告诉用户更多关于该包的信息：在哪里找到更多信息，如何为该包做出贡献，如何提交问题，可以从该包作者那里获得什么样的回应，以及更多。

GitHub

查看 Github