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.
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';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'),
)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
)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.
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
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,
),
);
Here is an example of filled text field with outlined border (enable and focus border)
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: 30,
contentPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
fillColor: Colors.grey.withAlpha(30),
suffixIconColor: Colors.red,
prefixIconColor: Colors.blue,
enabledColor: Colors.grey,
focusedColor: Colors.green
),
);
Here is an example of Outlined text field
MaterialTextField(
keyboardType: TextInputType.emailAddress,
hint: 'Email',
labelText: 'Email',
textInputAction: TextInputAction.next,
prefixIcon: const Icon(Icons.email_outlined),
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: 8,
contentPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
fillColor: Colors.transparent,
prefixIconColor: Colors.green,
enabledColor: Colors.grey,
focusedColor: Colors.green,
floatingLabelStyle: const TextStyle(color: Colors.green),
width: 1.5,
labelStyle: const TextStyle(fontSize: 16, color: Colors.black),
);
Here is an example of Underline/default text field
MaterialTextField(
keyboardType: TextInputType.emailAddress,
hint: 'Email',
textInputAction: TextInputAction.next,
suffixIcon: const Icon(Icons.email_outlined),
controller: _emailTextController,
validator: FormValidation.emailTextField,
)If you want to apply theming on underline/default field, Use this MaterialTextFieldTheme.borderlessTextTheme function.
ThemeData(
inputDecorationTheme: BorderlessTextTheme(
errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
prefixIconColor: Colors.green,
enabledColor: Colors.grey,
focusedColor: Colors.green,
floatingLabelStyle: const TextStyle(color: Colors.green),
width: 1,
);
Example of labeled text field
LabeledTextField(
title: 'Password',
labelSpacing: 8,
titleStyling: const TextStyle(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w700,
),
child: MaterialTextField(
keyboardType: TextInputType.emailAddress,
hint: 'Password',
textInputAction: TextInputAction.done,
obscureText: true,
theme: FilledOrOutlinedTextTheme(
fillColor: Colors.green.withAlpha(50),
radius: 12,
),
prefixIcon: Image.asset('assets/images/ic_lock.png'),
suffixIcon: const Icon(Icons.visibility),
controller: _passwordTextController,
validator: FormValidation.requiredTextField,
),
);
You can specify the styling directly on the widget
MaterialTextField(
keyboardType: TextInputType.text,
hint: 'Full Name',
labelText: 'Name',
theme: FilledOrOutlinedTextTheme(
enabledColor: Colors.grey,
focusedColor: Colors.green,
fillColor: Colors.transparent,
),
textInputAction: TextInputAction.next,
prefixIcon: Image.asset('assets/images/ic_email.png'),
validator: FormValidation.requiredTextField,
);
Contributions, issues, and feature requests are welcome!
Give a star if this project helped you.
Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Code copyright 2023–2024 DevCrew I/O. Code released under the MIT license.