Flutter文本字段阴影效果插件inset_field_shadow的使用

Flutter文本字段阴影效果插件inset_field_shadow的使用

InsetFieldShadow

A Flutter text field with a unique inset shadow effect and full support for TextFormField functionality. The InsetFieldShadow package allows you to create customizable text fields with inset shadows, enhancing the visual appeal of your input forms.

特性

• 可自定义的内嵌阴影，以获得时尚现代的外观。
• 完全支持TextFormField功能，包括验证。
• 支持前缀、后缀、标签和提示文本。
• 支持安全文本输入（用于密码字段）。
• 可扩展的文本字段，可调整边距和填充。
• 与现有Flutter表单轻松集成。

安装

在项目的pubspec.yaml文件中添加inset_field_shadow包：

dependencies:
  flutter:
    sdk: flutter
  inset_field_shadow: <latest-version>

然后运行以下命令来获取包：

flutter pub get

使用

以下是如何在Flutter项目中使用InsetFieldShadow小部件的示例：

InsetFieldShadow(
  margin: const EdgeInsets.all(12.0), // 设置外边距
  padding: const EdgeInsets.all(3.0), // 设置内边距
  controller: TextEditingController(), // 文本控制器
  hint: 'Enter your text', // 提示文本
  validator: (value) { // 验证函数
    if (value!.isEmpty) {
      return "This field is empty";
    }
    return null;
  },
  label: const Text('Label'), // 标签文本
  prefix: const Icon(Icons.text_fields), // 前缀图标
  suffix: const Icon(Icons.check), // 后缀图标
),

可定制选项

• label: 显示在文本字段内的Widget。
• hint: 当字段为空时的占位符文本。
• prefix: 显示在文本字段起始位置的图标或Widget。
• suffix: 显示在文本字段末尾的图标或Widget。
• keyboardType: 指定键盘类型（例如，文本、电子邮件等）。
• controller: 程序化管理文本输入。
• obscureText: 隐藏文本输入（用于密码）。
• onTap: 文本字段被点击时触发的回调。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用InsetFieldShadow：

import 'package:custom_text_field/inset_field_shadow.dart'; // 导入InsetFieldShadow包
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Inset Field Shadow Example',
      theme: ThemeData(
        useMaterial3: false,
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  HomeScreen({
    super.key,
  });

  final formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Inset Field Shadow Example'),
      ),
      body: Form(
        key: formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InsetFieldShadow(
              margin: const EdgeInsets.all(12.0),
              padding: const EdgeInsets.all(3.0),
              controller: TextEditingController(),
              hint: 'Enter your text',
              validator: (value) {
                if (value!.isEmpty) {
                  return "This field is empty";
                }
                return null;
              },
              label: const Text('Label'),
              prefix: const Icon(Icons.text_fields),
              suffix: const Icon(Icons.check),
            ),
            ElevatedButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {}
                },
                child: const Text("Validate")),
          ],
        ),
      ),
    );
  }
}