Create custom textformfield

Question

I am trying to create custom textformfield so I can easily style only in one place. But currently I am stuck on how to pass validation and save process. Can someone give me a working example of custom widget textformfield that I can use? I have been searching it for whole day and cannot find one. Thank you for help.

Example here is on raised button:

import 'package:flutter/material.dart';
import 'package:wkndr/resources/constants.dart';

class CustomButton extends StatelessWidget {
  CustomButton({@required this.text, @required this.onPressed});

  final String text;
  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: colorPrimary,
      child: Text(text, style: TextStyle(fontSize: 17.0, color: colorWhite)),
      onPressed: onPressed,
      shape: new RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(30.0)),
    );
  }
}

Calling custom raised button:

final _signUpButton = Container(
      child: CustomButton(
          text: sign_up,
          onPressed: () {
            _signUp();
          }),
    );

[This](https://stackoverflow.com/q/54848639/1367159) might help. — Sukhi, Aug 10 '19 at 14:46

Ankit Mahadik · Accepted Answer · 2019-08-10T13:09:32.447

Instead of making custom textformfield you can make common InputDecoration for styling

class CommonStyle{
  static InputDecoration textFieldStyle({String labelTextStr="",String hintTextStr=""}) {return InputDecoration(
    contentPadding: EdgeInsets.all(12),
    labelText: labelTextStr,
    hintText:hintTextStr,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  );}
}

Example:-

TextFormField(
        controller: usernameController,
        keyboardType: TextInputType.text,
        textInputAction: TextInputAction.next,
        focusNode: userFocus,
        onFieldSubmitted: (_) {
          FocusScope.of(context).requestFocus(passFocus);
        },
        validator: (value) => emptyValidation(value),
        decoration: CommonStyle.textFieldStyle(labelTextStr:"Username",hintTextStr:"Enter Username"),
      )

score 11 · Answer 2 · answered May 19 '20 at 14:49

You can define InputDecorationTheme in your app theme to set global style for text fields.

MaterialApp(
  title: title,
  theme: ThemeData(
    brightness: Brightness.dark,
    ...
    inputDecorationTheme: InputDecorationTheme(
        fillColor: Colors.blue,
        filled: true,
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.white)),
        border: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.blue)),
        hintStyle: TextStyle(color: Colors.white.withAlpha(80)),
    ),
  )
);

You can also change theme properties for a particular widget using Theme widget:

Theme(
  data: Theme.of(context).copyWith(inputDecorationTheme: /*new decoration theme here*/),
  child: Scaffold(
    body: ...,
  ),
);

See more information about themes in Flutter docs.

This is a clean way. I thought about creating a class that iherits with the desired decorations. But this approach is the best! Thanks — Anoop Thiruonam, Jun 07 '21 at 13:03

score 2 · Answer 3 · answered Dec 24 '19 at 14:17

You can try custom TextFormField. You can make easily common TextFormField for customizing TextFormField. You can try like this.

Step 1: First create one dart class i.e EditTextUtils
Step 2: Create a function or method i.e getCustomEditTextArea

class EditTextUtils {
  TextFormField getCustomEditTextArea(
      {String labelValue = "",
      String hintValue = "",
      bool validation,
      TextEditingController controller,
      TextInputType keyboardType = TextInputType.text,
      TextStyle textStyle,
      String validationErrorMsg}) {
    TextFormField textFormField = TextFormField(
      keyboardType: keyboardType,
      style: textStyle,
      controller: controller,
      validator: (String value) {
        if (validation) {
          if (value.isEmpty) {
            return validationErrorMsg;
          }
        }
      },
      decoration: InputDecoration(
          labelText: labelValue,
          hintText: hintValue,
          labelStyle: textStyle,
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0))),
    );
    return textFormField;
  }
}

Example: You can try like this

EditTextUtils().getCustomEditTextArea(
                    labelValue: 'label',
                    hintValue: 'hint',
                    validation: true,
                    controller: controller_name,
                    keyboardType: TextInputType.number,
                    textStyle: textStyle,
                    validationErrorMsg: 'error_msg')

ajaybadole · Answer 4 · 2023-04-16T08:51:36.333

class AppTextFormField extends StatelessWidget {
 final TextEditingController? ctrl;
 final String? hintText;
 final TextInputType? keyboardType;
 final Function? validator;
 final FocusNode? focusNode;
 final Function? onFieldSubmitted;

 const AppTextFormField(
  {Key? key,
  this.ctrl,
  this.hintText,
  this.keyboardType,
  this.onFieldSubmitted,
  this.focusNode,
  this.validator})
  : super(key: key);

@override
Widget build(BuildContext context) {
 return TextFormField(
  controller: ctrl,
  keyboardType: keyboardType,
  focusNode: focusNode,
  onFieldSubmitted: (value) => onFieldSubmitted!(value),
  validator: (input) => validator!(input),
  decoration: InputDecoration(
      hintText: hintText,
      label: Text(hintText.toString()),
      hintStyle: const TextStyle(color: Colors.grey),
      labelStyle: const TextStyle(color: Colors.black),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: const BorderSide(color: Colors.black),
      ),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.grey))),
   );
 }}

Initialize TextEditingController and Focus Node and check the link for global focus node https://stackoverflow.com/a/76026218/13619612 — ajaybadole, Apr 16 '23 at 07:29

Create custom textformfield

4 Answers4