Flutter拟物风格界面插件neumorphic_widget的使用

帮助开发者将一些流行的控件转换为拟物风格（Neumorphism）。

特性

• NeumorphicCard: 具有拟物风格外观的卡片。
• NeumorphicButton: 实现按下和释放按钮效果，并带有 onTap 回调。
• NeumorphicTextInputField: 构建具有浮雕效果的输入框。

开始使用

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  neumorphic_widget: ^版本号

然后运行 flutter pub get 安装该插件。

使用方法

截图展示

以下是使用 neumorphic_widget 的效果截图：

示例代码

1. 使用 NeumorphicCard

通过设置阴影模糊度和背景颜色来创建一个拟物风格的卡片。

import 'package:flutter/material.dart';
import 'package:neumorphic_widget/neumorphic_widget.dart';

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NeumorphicCard(
      // 阴影模糊度
      shadowBlur: 15,
      // 背景颜色
      backgroundColor: Colors.grey[200],
      child: Card(
        color: Colors.grey[200],
        elevation: 0,
        child: Center(
          child: Text("这是一个拟物风格卡片"),
        ),
      ),
    );
  }
}

2. 使用 NeumorphicButton

实现带有按下效果的按钮。

import 'package:flutter/material.dart';
import 'package:neumorphic_widget/neumorphic_widget.dart';

class MyWidget extends StatelessWidget {
  void _submit() {
    print("登录按钮被点击");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return NeumorphicButton(
      // 圆角半径
      borderRadius: BorderRadius.circular(8.0),
      // 按钮宽度
      width: MediaQuery.of(context).size.width * 0.5,
      // 按钮高度
      height: 40,
      // 点击事件回调
      onPressed: _submit,
      child: Text(
        'LOGIN',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

3. 使用 NeumorphicTextInputField

构建具有浮雕效果的输入框。

import 'package:flutter/material.dart';
import 'package:neumorphic_widget/neumorphic_widget.dart';

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NeumorphicTextInputField(
      textFormField: TextFormField(
        // 输入框保存数据的回调
        onSaved: (_) {},
        decoration: buildNeumorphicInputDecoration('Username'),
      ),
    );
  }
}

// 自定义输入框装饰
 InputDecoration buildNeumorphicInputDecoration(String hintText) {
  return InputDecoration(
    hintText: hintText,
    border: InputBorder.none,
    contentPadding: EdgeInsets.symmetric(horizontal: 16.0),
  );
}