Flutter表单输入插件input_form_field的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter表单输入插件input_form_field的使用

插件简介

input_form_field 是一个围绕默认 TextFormField 小部件的包装器，支持所有Flutter支持的平台。它提供了许多增强功能，如标签文本不会与边框重叠、默认的空值验证、动态高度支持、密码可见性处理等。

更新日志 (0.0.4)

  • 移除 disabledBorder 参数，现在由 BorderType.none 处理。
  • 移除 默认56px高度，支持动态高度。
  • 移除 isPasswordField 参数，新增 Password 类型，支持自定义显示/隐藏图标。
  • 修复 密码显示/隐藏UI逻辑。

功能特性

  • 标签文本不会与边框重叠。
  • 支持默认的空值验证 (isNullOrEmpty)。
  • 支持底部外边距。
  • 支持动态高度。
  • 简化的密码可见性处理。
  • 主题支持。
  • 支持所有平台。

安装

请从 pub.dev 安装最新版本。

使用方法

在Dart代码中引入 input_form_field：

import 'package:input_form_field/input_form_field.dart';

示例代码

以下是一个完整的示例demo，展示了如何使用 input_form_field 插件创建不同类型的输入字段。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Input Form Field Example",
      home: DemoScreen(),
    );
  }
}

class DemoScreen extends StatelessWidget {
  DemoScreen({Key? key}) : super(key: key);
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Demo")),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              /// 基本输入字段
              InputFormField(
                textEditingController: _controller,
                bottomMargin: 10,
              ),

              /// 自定义顶部标签
              InputFormField(
                textEditingController: _controller,
                label: const Padding(
                  padding: EdgeInsets.only(bottom: 5),
                  child: Text("Custom Label"),
                ),
                borderRadius: BorderRadius.zero,
                fillColor: Colors.grey.shade300,
                bottomMargin: 10,
                borderType: BorderType.none,
              ),

              /// 标准 - 外边框
              InputFormField(
                textEditingController: _controller,
                labelText: "Standard - Outlined Border",
                hintText: "Hint Text",
                bottomMargin: 10, // 可选
              ),

              /// 无边框 - 填充背景
              InputFormField(
                textEditingController: _controller,
                labelText: "No Border - Filled",
                hintText: "Hint Text",
                fillColor: Colors.black12,
                borderType: BorderType.none,
                bottomMargin: 10, // 可选
              ),

              /// 默认密码字段
              InputFormField(
                textEditingController: _controller,
                labelText: "Default Password",
                hintText: "*****",
                password: EnabledPassword(),
                bottomMargin: 10, // 可选
              ),

              /// 自定义默认密码字段
              InputFormField(
                textEditingController: _controller,
                labelText: "Custom Default Password",
                hintText: "*****",
                obscuringCharacter: "*",
                password: EnabledPassword(
                  showPasswordIcon: const Icon(
                    Icons.add,
                    color: Colors.amber,
                  ),
                  hidePasswordIcon: const Icon(
                    Icons.visibility_off_sharp,
                    color: Colors.amber,
                  ),
                ),
                bottomMargin: 10, // 可选
              ),

              /// 自定义样式1
              InputFormField(
                textEditingController: _controller,
                labelText: "Custom",
                labelTextStyle: const TextStyle(fontSize: 25),
                hintText: "Hint Text",
                hintTextStyle: const TextStyle(fontSize: 18),
                borderColor: Colors.deepOrange,
                borderRadius: BorderRadius.circular(10),
                bottomMargin: 10,
                // 可选
                floatingLabelBehavior: FloatingLabelBehavior.always,
              ),

              /// 自定义样式2
              InputFormField(
                textEditingController: _controller,
                labelText: "Custom 2",
                labelTextStyle: const TextStyle(color: Colors.deepOrange),
                hintText: "Hint Text",
                hintTextStyle: const TextStyle(color: Colors.deepOrangeAccent),
                borderType: BorderType.outlined,
                borderColor: Colors.deepOrange,
                bottomMargin: 10,
                // 可选
                borderRadius: BorderRadius.circular(10),
              ),

              /// 自定义样式3 (带前缀图标)
              InputFormField(
                textEditingController: _controller,
                prefix: const Icon(Icons.mail),
                labelText: "Email",
                hintText: "abc@email.com",
                borderType: BorderType.outlined,
                bottomMargin: 10, // 可选
              ),

              /// 自定义样式4 (带前后缀图标)
              InputFormField(
                textEditingController: _controller,
                prefix: const Icon(Icons.mail),
                labelText: "Email",
                hintText: "abc@email.com",
                suffix: const Icon(Icons.info),
                borderType: BorderType.outlined,
                bottomMargin: 10, // 可选
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter表单输入插件input_form_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter表单输入插件input_form_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 input_form_field 插件的 Flutter 代码示例。input_form_field 插件并不是一个官方插件，但假设它提供了一些自定义的表单输入字段，我们可以基于常见的表单输入字段编写一个类似的示例代码。

在 Flutter 中，通常我们会使用 TextField 组件来创建表单输入字段。然而，为了模拟一个自定义的 input_form_field 插件的使用，我们可以创建一个自定义的表单字段组件。

假设我们有一个自定义的表单字段组件 CustomInputField，它的用法类似于 TextField。以下是如何实现和使用这个组件的代码示例：

1. 创建自定义输入字段组件 custom_input_field.dart

import 'package:flutter/material.dart';

class CustomInputField extends StatefulWidget {
  final String label;
  final ValueChanged<String> onChanged;
  final String initialValue;

  const CustomInputField({
    Key? key,
    required this.label,
    required this.onChanged,
    this.initialValue = '',
  }) : super(key: key);

  @override
  _CustomInputFieldState createState() => _CustomInputFieldState();
}

class _CustomInputFieldState extends State<CustomInputField> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.initialValue);
    _controller.addListener(() {
      widget.onChanged(_controller.text);
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(widget.label),
        SizedBox(height: 8),
        TextField(
          controller: _controller,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
          ),
        ),
      ],
    );
  }
}

2. 使用自定义输入字段组件 main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _email = '';
  String _password = '';

  void _submitForm() {
    print('Email: $_email');
    print('Password: $_password');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            CustomInputField(
              label: 'Email',
              onChanged: (value) => setState(() => _email = value),
            ),
            SizedBox(height: 16),
            CustomInputField(
              label: 'Password',
              onChanged: (value) => setState(() => _password = value),
              initialValue: _password, // In a real app, avoid setting password initially
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: _submitForm,
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. custom_input_field.dart：我们创建了一个自定义的 CustomInputField 组件，它接受一个标签、一个值改变回调和一个初始值。内部使用 TextField 来显示输入框，并通过 TextEditingController 管理文本输入。

  2. main.dart：在主应用程序中，我们使用 CustomInputField 来创建两个输入字段：一个用于电子邮件，一个用于密码。当用户输入文本时，onChanged 回调会更新状态中的相应变量。最后，我们有一个提交按钮，点击后会打印出输入的电子邮件和密码。

这个示例展示了如何创建一个自定义的表单输入字段组件并在 Flutter 应用程序中使用它。虽然这不是一个真正的 input_form_field 插件的示例，但它演示了类似的概念和用法。如果你有一个具体的 input_form_field 插件，并希望获得更具体的代码示例，请提供更多关于该插件的信息。

回到顶部