插件详情v1.0.6

material_text_fields

Material 文本字段是 Dart 中用于文本输入值的可自定义小部件。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 51
喜欢数: 23
Pub 分数: 160

安装插件

flutter pub add material_text_fields

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Material Text Fields 是一个可自定义的 Flutter 小部件，专为表单中的高效文本输入而设计，遵循 Material Design 原则。它在 Android、iOS、Web、macOS、Windows 和 Linux 等平台上提供一致且视觉上吸引人的界面。该小部件支持多种输入类型、验证和样式选项，非常适合创建响应式且可访问的表单。使用 Dart 编写，可无缝集成到 Flutter 应用中，并由 devcrew.io 维护。

适合场景

表单输入
用户注册
搜索栏
联系表单
登录界面
数据收集

主要特点

可自定义外观
跨平台兼容性
内置验证
符合 Material Design 规范
轻松集成
响应式布局

适合对象

开发表单密集型应用的开发者
注重UI一致性的团队
需要多平台支持的项目
需要可访问文本输入的应用程序
快速原型设计

使用建议

需要 Flutter SDK
仅限 Material Design 美学
可能需要额外的验证逻辑
依赖外部包的维护
不适用于非 Material UI

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Material Text Field

Material Text Field is a customizable widget for text input values in Dart. You can define the styling of the text field in your app's theme file or create multiple text fields with different styling. You can easily create text input fields with customizable styling and behaviors.

Installation

To use Material Text Field in your Dart project, add the following dependency to your "pubspec.yaml" file

dependencies:
material_text_fields: ^<latest-version>

Then run flutter pub get to install the package.

In your library add the following import

import 'package:material_text_fields/material_text_fields.dart';

Usage

To use Material Text Field in your Flutter app, import the package and create a new instance of the MaterialTextField widget

           MaterialTextField(
              keyboardType: TextInputType.emailAddress,
              hint: 'Email',
              textInputAction: TextInputAction.next,
              prefixIcon: Image.asset('assets/images/ic_email.png'),
              controller: _emailTextController,   // TextEditingController _emailTextController = TextEditingController()
              validator: FormValidation.emailTextField,
            )

You can create multiple text fields with different styling with providing "theme" attribute.

            MaterialTextField(
              keyboardType: TextInputType.text,
              labelText: 'Name',
              theme: FilledOrOutlinedTextTheme(
                enabledColor: Colors.grey,
                focusedColor: Colors.green,
                fillColor: Colors.transparent,
                // You can use all properties of FilledOrOutlinedTextTheme
                // to decor text field
              ),
              prefixIcon: Image.asset('assets/images/ic_email.png'),
            )

Advance Usage

With all possible params

             MaterialTextField(
                keyboardType: TextInputType.emailAddress,
                hint: 'Email',
                textInputAction: TextInputAction.next,
                prefixIcon: Image.asset('assets/images/ic_lock.png'),
                controller: _emailTextController,
                validator: FormValidation.emailTextField,
                onChanged: (text) {
                  print('First text field: $text');
                },
                suffixIcon: Image.asset('assets/images/ic_lock.png'),
                enabled: false,
                obscureText: true,
                style: const TextStyle(fontSize: 16, color: Colors.black),
                labelText: 'Password',
                theme: FilledOrOutlinedTextTheme(
                  enabledColor: Colors.grey,
                  focusedColor: Colors.green,
                  fillColor: Colors.transparent,
                ) // you can use theme param to differ this text field from app level theming
              )

Theming

To define the styling of the text field, you can either use the app-level theme file or specify the styling directly on the widget.

App-level theme

You can use MaterialTextFieldTheme class for text field theming. This Theme class which define theming for Filled/Outlined and underline text field theming. You can use this class for text field theming

Example 1 (Filled Text Field)

Here is an example of filled field

    MaterialTextField(
        keyboardType: TextInputType.emailAddress,
        hint: 'Email',
        textInputAction: TextInputAction.next,
        prefixIcon: const Icon(Icons.email_outlined),
        suffixIcon: const Icon(Icons.check),
        controller: _emailTextController,
        validator: FormValidation.emailTextField,
      )

To define the text field style in your app-level theme file, add the following code to your ThemeData:

    ThemeData(
     inputDecorationTheme: FilledOrOutlinedTextTheme(
      radius: 16,
      contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
      errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
      fillColor: Colors.red.withAlpha(50),
      suffixIconColor: Colors.green,
      prefixIconColor: Colors.blue,
       ),
    );