套件詳情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,
       ),
    );