Detalhes do pacotev1.0.6

material_text_fields

O Campo de Texto Material é um widget personalizável para valores de entrada de texto em Dart.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 51
Curtidas: 23
Pontos Pub: 160

Instalar pacote

flutter pub add material_text_fields

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Material Text Fields é um widget personalizável do Flutter projetado para entrada eficiente de texto em formulários, seguindo os princípios do Material Design. Oferece uma interface consistente e visualmente atraente em plataformas como Android, iOS, Web, macOS, Windows e Linux. O widget suporta vários tipos de entrada, validação e opções de estilo, tornando-o ideal para criar formulários responsivos e acessíveis. Desenvolvido com Dart, integra-se perfeitamente em aplicações Flutter e é mantido pela devcrew.io.

Casos de uso

Entradas de formulário
Registro de usuário
Barras de pesquisa
Formulários de contato
Telas de login
Coleta de dados

Principais recursos

Aparência personalizável
Compatibilidade multiplataforma
Validação embutida
Conformidade com o Material Design
Integração fácil
Layout responsivo

Indicado para

Desenvolvedores construindo aplicativos com muitos formulários
Equipes que priorizam a consistência da interface
Projetos que exigem suporte multiplataforma
Aplicativos que precisam de entradas de texto acessíveis
Prototipagem rápida

Considerações

Requer Flutter SDK
Limitado à estética do Material Design
Pode ser necessário lógica de validação adicional
Depende do maintenance de pacotes externos
Não adequado para interfaces não Material

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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,
       ),
    );