creamy_field 是一个用于 Flutter 的自定义输入字段插件，它提供了丰富的功能和定制选项，使开发者能够轻松地创建美观且功能强大的输入字段。以下是如何使用 creamy_field 插件的详细指南。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 creamy_field 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  creamy_field: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 基本使用

creamy_field 提供了一个 CreamyField 组件，你可以像使用 TextField 一样使用它。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('CreamyField Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: CreamyField(
            decoration: CreamyDecoration(
              labelText: 'Enter your text',
              hintText: 'Type something...',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 自定义装饰

CreamyField 提供了丰富的装饰选项，你可以通过 CreamyDecoration 来自定义输入字段的外观。

CreamyField(
  decoration: CreamyDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    prefixIcon: Icon(Icons.person),
    suffixIcon: Icon(Icons.clear),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.0),
      borderSide: BorderSide(color: Colors.blue),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.0),
      borderSide: BorderSide(color: Colors.green),
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.0),
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
)

4. 输入验证

你可以通过 validator 属性来添加输入验证逻辑。

CreamyField(
  decoration: CreamyDecoration(
    labelText: 'Email',
    hintText: 'Enter your email',
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your email';
    }
    if (!value.contains('@')) {
      return 'Please enter a valid email';
    }
    return null;
  },
)

5. 控制输入行为

你可以通过 controller 属性来控制输入字段的行为。

final _controller = CreamyController();

[@override](/user/override)
Widget build(BuildContext context) {
  return CreamyField(
    controller: _controller,
    decoration: CreamyDecoration(
      labelText: 'Password',
      hintText: 'Enter your password',
    ),
  );
}

6. 其他功能

creamy_field 还提供了其他一些功能，例如：

• 自动完成：通过 autocomplete 属性启用自动完成功能。
• 密码字段：通过 obscureText 属性将输入字段设置为密码字段。
• 多行输入：通过 maxLines 属性支持多行输入。

CreamyField(
  decoration: CreamyDecoration(
    labelText: 'Password',
    hintText: 'Enter your password',
  ),
  obscureText: true,
)

7. 完整示例

以下是一个完整的示例，展示了如何使用 creamy_field 插件创建一个带有验证和自定义装饰的输入字段。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('CreamyField Example')),
        body: MyForm(),
      ),
    );
  }
}

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

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = CreamyController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          children: [
            CreamyField(
              controller: _emailController,
              decoration: CreamyDecoration(
                labelText: 'Email',
                hintText: 'Enter your email',
                prefixIcon: Icon(Icons.email),
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter your email';
                }
                if (!value.contains('@')) {
                  return 'Please enter a valid email';
                }
                return null;
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  // 表单验证通过
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Form Submitted Successfully')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}