패키지 상세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, 웹, macOS, Windows, Linux 등 다양한 플랫폼에서 일관되고 시각적으로 매력적인 인터페이스를 제공합니다. 다양한 입력 유형, 검증 및 스타일링 옵션을 지원하여 반응형이고 접근성 있는 폼을 만들기에 이상적입니다. Dart로 작성되어 Flutter 애플리케이션에 자연스럽게 통합되며, devcrew.io에서 유지 관리됩니다.

사용 사례

폼 입력
사용자 등록
검색 바
연락처 양식
로그인 화면
데이터 수집

주요 기능

사용자 정의 가능한 외관
크로스 플랫폼 호환성
내장 검증
Material Design 준수
간편한 통합
반응형 레이아웃

적합한 대상

양식 중심 앱을 개발하는 개발자
UI 일관성을 우선시하는 팀
다중 플랫폼 지원이 필요한 프로젝트
접근성 있는 텍스트 입력이 필요한 앱
빠른 프로토타이핑

고려 사항

Flutter SDK가 필요합니다
마테리얼 디자인 미학에 국한됨
추가 검증 로직이 필요할 수 있습니다
외부 패키지 유지보수에 의존
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,
       ),
    );