将一些流行的控件转换为新拟态风格。

特点

  • NeumorphicCard: 具有新拟态外观和感觉的卡片
  • NeumorphicButton: 实现按下和释放按钮效果。也具有 onTap 监听器。
  • NeumorphicTextInputField: 构建具有压印效果的 TextInputField。

入门

要使用此包，请在您的 pubspec.yaml 文件中将 ‘neumorphic_widget’ 添加为依赖项。

用法

截图

示例

以下是一些如何使用 NeumorphicCard 的小示例

NeumorphicCard(
              shadowBlur: 15,
              backgroundColor: kBackgroundColor,
              child: Card(
                color: kBackgroundColor,
                elevation: 0,
                child: Container(...),
              ),
            ),

使用 NeumorphicButton

NeumorphicButton(
              borderRadius: BorderRadius.circular(8.0),
              width: MediaQuery.of(context).size.width * 0.5,
              height: 40,
              onPressed: _submit,
              child: Text('LOGIN'),
            ),

NeumorphicTextInputField

NeumorphicTextInputField(
                          textFormField: TextFormField(
                            onSaved: (_) {},
                            decoration: buildNeumorphicInputDecoration(
                                'Username'),
                          ),
                        ),

附加信息

在 NeumorphicTextInputField 中，您可以为子控件 TextFormField 的装饰应用 buildNeumorphicInputDecoration(String hintText) 以获得更好的外观。

GitHub

查看 Github