material_text_fields 1.0.0

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

example/lib/main.dart

import 'package:example/theme/light_theme.dart';
import 'package:example/utils/constants.dart';
import 'package:flutter/material.dart';
import 'package:material_text_fields/labeled_text_field.dart';
import 'package:material_text_fields/material_text_fields.dart';
import 'package:material_text_fields/theme/material_text_field_theme.dart';
import 'package:material_text_fields/utils/form_validation.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Text Fields',
      theme: lightTheme,
      home: const MyHomePage(title: 'Material Text Fields'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _key = GlobalKey<FormState>();

  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: false,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Form(
          key: _key,
          child: SingleChildScrollView(
            child: Column(
              children: [
                const SizedBox(
                  height: 16,
                ),
                MaterialTextField(
                  keyboardType: TextInputType.emailAddress,
                  hint: "Email",
                  textInputAction: TextInputAction.next,
                  prefixIcon: Image.asset(ImagePath.icEmail),
                  controller: _emailController,
                  validator: FormValidation.emailTextField,
                ),
                const SizedBox(
                  height: 20,
                ),
                MaterialTextField(
                  keyboardType: TextInputType.text,
                  hint: "Full Name",
                  labelText: "Name",
                  theme: MaterialTextFieldTheme.filledOrOutlinedTextTheme(
                    enabledColor: Colors.grey,
                    focusedColor: Colors.green,
                    fillColor: Colors.transparent,
                  ),
                  textInputAction: TextInputAction.next,
                  prefixIcon: Image.asset(ImagePath.icEmail),
                  validator: FormValidation.requiredTextField,
                ),
                const SizedBox(
                  height: 20,
                ),
                MaterialTextField(
                  keyboardType: TextInputType.number,
                  hint: "age",
                  theme: MaterialTextFieldTheme.borderlessTextTheme(),
                  textInputAction: TextInputAction.next,
                  validator: FormValidation.requiredTextField,
                ),
                const SizedBox(
                  height: 20,
                ),
                LabeledTextField(
                  title: 'Password',
                  textField: MaterialTextField(
                    keyboardType: TextInputType.emailAddress,
                    hint: 'Password',
                    textInputAction: TextInputAction.done,
                    obscureText: true,
                    theme: MaterialTextFieldTheme.filledOrOutlinedTextTheme(
                      fillColor: Colors.red.withAlpha(50),
                      radius: 80,
                    ),
                    prefixIcon: Image.asset(ImagePath.icLock),
                    suffixIcon: const Icon(Icons.visibility),
                    controller: _passwordController,
                    validator: FormValidation.requiredTextField,
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                ElevatedButton(
                  onPressed: onSubmitBtnPressed,
                  child: const Text('Submit'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  onSubmitBtnPressed() {
    if (_key.currentState?.validate() == true) {
      // perform some task.
    }
  }
}