Flutter仿拟态（Neumorphism）文本框插件material_neumorphic_textfield的使用

Flutter仿拟态（Neumorphism）文本框插件material_neumorphic_textfield的使用

material_neumorphic_textfield 是一个用于在 Flutter 应用中创建仿拟态（Neumorphism）风格文本框的插件。本示例将展示如何使用 material_neumorphic_textfield 插件来创建具有仿拟态效果的文本框。

使用方法

NeumorphicTextField 和 NeumorphicTextFormField 是该插件的主要组件。它们继承自 Flutter 的原生 TextField 和 TextFormField 组件，并添加了一些额外的属性以实现仿拟态效果。

添加属性

这些组件支持以下属性：

• neumorphicStyle: 用于设置仿拟态样式。
• margin: 设置文本框的外边距。
• padding: 设置文本框的内边距。
• color: 设置文本框的颜色。
• depth: 设置文本框的深度。
• borderRadius: 设置文本框的圆角半径。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Neumorphic TextField 示例'),
        ),
        body: Center(
          child: ExampleWidget(),
        ),
      ),
    );
  }
}

class ExampleWidget extends StatefulWidget {
  [@override](/user/override)
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  String name = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        NeumorphicTextField(
          margin: const EdgeInsets.symmetric(vertical: 12),
          borderRadius: const BorderRadius.all(Radius.circular(12.0)),
          depth: -4,
          initialValue: name,
          decoration: const InputDecoration(
            labelText: '姓名',
            contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          ),
          onChanged: (value) {
            setState(() {
              name = value;
            });
          },
        ),
        NeumorphicTextFormField(
          margin: const EdgeInsets.symmetric(vertical: 12),
          borderRadius: const BorderRadius.all(Radius.circular(12.0)),
          depth: -4,
          initialValue: name,
          decoration: const InputDecoration(
            labelText: '姓名',
            contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          ),
          onChanged: (value) {
            setState(() {
              name = value;
            });
          },
        ),
      ],
    );
  }
}