Create custom textformfield - flutter

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