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

Answer 1

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

Answer 2

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.

Answer 3

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')