Skip to content

Instantly share code, notes, and snippets.

@AngDrew
Created April 3, 2021 10:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AngDrew/3fa0ca513936b0774cf4af773cb47954 to your computer and use it in GitHub Desktop.
Save AngDrew/3fa0ca513936b0774cf4af773cb47954 to your computer and use it in GitHub Desktop.
Highly customizable TextField
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../resources/r.dart';
class MyTextField extends StatefulWidget {
const MyTextField(
this.label,
this.onChange, {
this.iconData,
this.isPassword = false,
this.inputType,
this.onFinish,
this.isOutlined = true,
this.suffixText,
this.isBoldStyle,
this.errorMessage,
this.onTap,
});
final String label;
final IconData iconData;
final void Function(String) onChange;
final void Function() onFinish;
final void Function() onTap;
final bool isPassword;
final TextInputType inputType;
final bool isOutlined;
final String suffixText;
final bool isBoldStyle;
final String errorMessage;
@override
_MyTextFieldState createState() => _MyTextFieldState();
}
class _MyTextFieldState extends State<MyTextField> {
@override
void initState() {
super.initState();
isObscured = widget.isPassword;
}
bool isObscured;
@override
Widget build(BuildContext context) {
return TextField(
decoration: InputDecoration(
border: widget.isOutlined
? OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
)
: UnderlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
icon: widget.iconData != null
? Icon(
widget.iconData,
color: primary,
size: 24,
)
: null,
suffixIcon: widget.isPassword
? SizedBox(
height: 48,
width: 48,
child: Center(
child: IconButton(
icon: Icon(
isObscured ? Icons.visibility_off : Icons.visibility,
),
onPressed: () => setState(() {
isObscured = !isObscured;
}),
),
),
)
: widget.suffixText != null
? SizedBox(
height: 48,
width: 48,
child: Center(
child: Text(
widget.suffixText,
style: R.styles.scriptFont.copyWith(
color: greyColor,
),
),
),
)
: null,
labelText: widget.label,
labelStyle: R.styles.normalFont.copyWith(
color: greyColor,
fontWeight: FontWeight.normal,
),
errorText: widget.errorMessage,
errorStyle: R.styles.normalFont.copyWith(
color: redColor,
fontWeight: FontWeight.normal,
),
isDense: true,
contentPadding: widget.isOutlined
? null
: const EdgeInsets.only(
top: 0,
bottom: 8,
right: 0,
left: 0,
),
),
textAlignVertical: TextAlignVertical.center,
cursorColor: fontColor,
style: widget.isBoldStyle != null
? R.styles.normalFont.copyWith(fontWeight: FontWeight.bold)
: R.styles.normalFont,
obscureText: isObscured,
keyboardType: widget.isPassword
? TextInputType.visiblePassword
: widget.inputType ?? TextInputType.text,
textInputAction:
widget.onFinish != null ? TextInputAction.done : TextInputAction.next,
onEditingComplete: widget.onFinish != null
? () {
FocusScope.of(context).unfocus();
widget.onFinish();
}
: FocusScope.of(context).nextFocus,
onChanged: widget.onChange,
onTap: widget.onTap,
);
}
}
@AngDrew
Copy link
Author

AngDrew commented Apr 3, 2021

NOTE: you need to change the style by yourself! (Color, TextStyle, EdgeInsetsGeometry, etc.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment