Paketdetailsv1.0.6

material_text_fields

Das Material-Textfeld ist ein anpassbarer Widget für Texteingabewerte in Dart.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 51
Likes: 23
Pub-Punkte: 160

Paket installieren

flutter pub add material_text_fields

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Material Text Fields ist ein anpassbarer Flutter-Widget, der für eine effiziente Texteingabe in Formularen entwickelt wurde und den Material-Design-Prinzipien folgt. Er bietet eine konsistente und visuell ansprechende Oberfläche auf Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Der Widget unterstützt verschiedene Eingabetypen, Validierung und Stiloptionen und ist daher ideal zum Erstellen von reaktionsfähigen und barrierefreien Formularen geeignet. Mit Dart erstellt, integriert er sich nahtlos in Flutter-Anwendungen und wird von devcrew.io gepflegt.

Anwendungsfälle

Formularingaben
Benutzerregistrierung
Suchleisten
Kontaktformulare
Anmeldebildschirme
Datenbeschaffung

Hauptmerkmale

Anpassbare Erscheinung
Plattformübergreifende Kompatibilität
Eingebaute Überprüfung
Material Design-Konformität
Einfache Integration
Reaktives Layout

Geeignet für

Entwickler, die formularintensive Apps erstellen
Teams, die UI-Konsistenz priorisieren
Projekte, die Mehrplattformunterstützung erfordern
Apps, die zugängliche Texteingaben benötigen
Schnellprototypen

Hinweise

Erfordert Flutter SDK
Beschränkt auf Material-Design-Aesthetik
Könnte zusätzliche Überprüfungslogik erfordern
Abhängig von der Wartung externer Pakete
Nicht geeignet für nicht-Material-Oberflächen

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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