apptomate_custom_text_field 0.0.4

A highly customizable text input field with support for various input types, validation, masking, and advanced styling options.

example/lib/main.dart

import 'package:apptomate_custom_text_field/apptomate_custom_text_field.dart';
import 'package:example/phone_masked_countroller.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _CustomTextFieldWidgetState extends State<MyHomePage> {
  TextEditingController emailController = TextEditingController();
  TextEditingController aboutController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  TextEditingController phoneController = MaskedTextController(mask: '[phone]');

  FocusNode emailFocus = FocusNode();
  FocusNode aboutFocus = FocusNode();
  FocusNode passwordFocus = FocusNode();
  FocusNode phoneNumberFocus = FocusNode();
  bool _isObscured = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _body(),
    );
  }

  Widget _body() {
    return SafeArea(
      child: GestureDetector(
        onTap: () {
          emailFocus.unfocus();
          FocusScope.of(context).unfocus();
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            CustomTextFormField(
              margin: const EdgeInsets.only(top: 5, left: 24, right: 24),
              hintText: "Email Address",
              onTap: () {},
              label: "Email",
              autofillHints: const [AutofillHints.email],
              obscureText: false,
              textCapitalization: TextCapitalization.none,
              textInputType: TextInputType.emailAddress,
              actionKeyboard: TextInputAction.next,
              functionValidate: () {},
              controller: emailController,
              focusNode: emailFocus,
              onSubmitField: (val) {},
              filledColor: Colors.white,
              isFilled: true,
              validator: (value) {
                return null;
              },
              enabled: true,
              textStyle: textFieldStyle,
              borderRadius: 0,
              errorBorder: textBoxOutLineLineErrorBorder,
              enabledBorder: textBoxOutLineLineBorderEnabledStyle,
              disabledBorder: textBoxOutLineLineBorderDisabledStyle,
              hintStyle: textFieldHintStyle,
              onChanged: (value) => null,
            ),
            CustomTextFormField(
              margin: const EdgeInsets.only(top: 12, left: 24, right: 24),
              hintText: "Password",
              autofillHints: [AutofillHints.password],
              onTap: () {},
              maxLines: 1,
              padding:
                  EdgeInsets.only(top: 15, bottom: 15, left: 12, right: 12),
              obscureText: _isObscured,
              //prefixIcon: const Icon(Icons.password),
              textInputType: TextInputType.text,
              actionKeyboard: TextInputAction.done,
              controller: passwordController,
              focusNode: passwordFocus,
              onSubmitField: (val) {},
              filledColor: Colors.white,
              isFilled: true,
              enabled: true,
              validator: (value) => null,
              textStyle: textFieldStyle,
              borderRadius: 0,
              enabledBorder: textBoxOutLineLineBorderEnabledStyle,
              disabledBorder: textBoxOutLineLineBorderDisabledStyle,
              hintStyle: textFieldHintStyle,
              onChanged: (value) => null,
              errorBorder: textBoxOutLineLineErrorBorder,
              suffixIcon: IconButton(
                icon:
                    Icon(_isObscured ? Icons.visibility_off : Icons.visibility),
                onPressed: () {
                  setState(() {
                    _isObscured = !_isObscured;
                  });
                },
              ),
            ),
            CustomTextFormField(
              margin: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
              hintText: "Phone Number",
              onTap: () {},
              autofillHints: const [AutofillHints.telephoneNumber],
              obscureText: false,
              textInputType: TextInputType.number,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.digitsOnly
              ],
              actionKeyboard: TextInputAction.done,
              functionValidate: () {},
              controller: phoneController,
              focusNode: phoneNumberFocus,
              onSubmitField: (val) {},
              filledColor: Colors.white,
              isFilled: true,
              validator: (value) {
                return null;
              },
              textStyle: textFieldStyle,
              borderRadius: 0,
              maxLength: 14,
              isShowCounter: true,
              errorBorder: textBoxOutLineLineErrorBorder,
              enabledBorder: textBoxOutLineLineBorderEnabledStyle,
              disabledBorder: textBoxOutLineLineBorderDisabledStyle,
              hintStyle: textFieldHintStyle,
              onChanged: (value) => null,
            ),
            CustomTextFormField(
              margin: const EdgeInsets.symmetric(
                horizontal: 24,
              ),
              hintText: "Tell us  about yourself",
              onTap: () {
                print("Field Tapped");
              },
              obscureText: false,
              textInputType: TextInputType.text,
              actionKeyboard: TextInputAction.done,
              controller: aboutController,
              focusNode: aboutFocus,
              onSubmitField: (val) {},
              filledColor: Colors.white,
              isFilled: true,
              validator: (value) {
                return null;
              },
              textStyle: textFieldStyle,
              enabled: true,
              maxLines: 3,
              borderRadius: 0,
              errorBorder: textBoxOutLineLineErrorBorder,
              enabledBorder: textBoxOutLineLineBorderEnabledStyle,
              disabledBorder: textBoxOutLineLineBorderDisabledStyle,
              hintStyle: textFieldHintStyle,
              onChanged: (value) => null,
            ),
          ],
        ),
      ),
    );
  }

  final textBoxOutLineLineBorderDisabledStyle = OutlineInputBorder(
    borderRadius: BorderRadius.circular(6),
    borderSide: const BorderSide(
      color: Colors.black,
      width: 1.0,
    ),
  );
  final textBoxOutLineLineBorderEnabledStyle = OutlineInputBorder(
      borderRadius: BorderRadius.circular(6),
      borderSide: const BorderSide(
        color: Colors.grey,
        width: 1.0,
      ));

  final textBoxOutLineLineErrorBorder = OutlineInputBorder(
    borderRadius: BorderRadius.circular(6),
    borderSide: const BorderSide(
      color: Colors.red,
      width: 1.0,
    ),
  );

  showHide() {
    if (mounted) {
      setState(() {
        _isObscured = !_isObscured;
      });
    }
  }

  TextStyle textFieldHintStyle =
      TextStyle(fontSize: 16, color: Colors.grey, fontWeight: FontWeight.w400);
  TextStyle textFieldStyle =
      TextStyle(fontSize: 16, color: Colors.black, fontWeight: FontWeight.w400);
}