Kishor Kc
Posted on April 16, 2023
Namaste Everyone
I hope that you are doing well
Have you ever thought about making a custom widget to make your code more straightforward? If not, allow me to guide you through the process and show you how it can reduce redundancy in your code.
In this post, I will be sharing a custom widget that you can create. Custom widgets are great for making your code reusable and avoiding duplicate code.
Below is a snippet of a Login UI Page where you can see the repetitive code of TextField. However, the email and password TextField widgets have different controller names, obscureText, and hintText values.
// pages/login.page.dart
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
late final TextEditingController _email;
late final TextEditingController _password;
@override
void initState() {
super.initState();
_email = TextEditingController();
_password = TextEditingController();
}
@override
void dispose() {
super.dispose();
_email.dispose();
_password.dispose();
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Login',
style: TextStyle(
fontSize: Theme.of(context).textTheme.headlineSmall!.fontSize,
),
),
SizedBox(
height: size.height * 0.01,
),
TextFormField(
controller: _email,
obscureText: false,
decoration: const InputDecoration(
hintText: 'Enter your email..',
hintStyle: TextStyle(
color: Colors.grey,
),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
),
),
SizedBox(
height: size.height * 0.01,
),
TextFormField(
controller: _password,
obscureText: true,
decoration: const InputDecoration(
hintText: 'Enter your password..',
hintStyle: TextStyle(
color: Colors.grey,
),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
),
),
SizedBox(
height: size.height * 0.025,
),
ElevatedButton(
onPressed: () {},
child: const Text('Login'),
),
SizedBox(
height: size.height * 0.06,
),
],
),
),
);
}
}
After examining a lengthy code snippet of a Login UI Page, how do you feel?
Take a deep breath and don't worry.
Let me pause for a moment to think about how you could potentially simplify your code and design a custom widget for a TextFormField.
Don't worry if you're not sure, I'm here to share with you the steps you can take to create a custom widget.
// widgets/custom_textfield.dart
class CustomTextField extends StatelessWidget {
final TextEditingController controller;
final String hintText;
final bool obscureText;
const CustomTextField({
super.key,
required this.controller,
required this.hintText,
this.obscureText = false,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: TextFormField(
controller: controller,
obscureText: obscureText,
decoration: InputDecoration(
hintText: hintText,
hintStyle: const TextStyle(
color: Colors.grey,
),
border: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
),
),
);
}
}
That's great! So you have created the CustomTextField widget. Do you know how to utilize the CustomTextField widget that you have created?
Also, regarding the snippet of CustomTextField widget, it's good to know that you can use it on any UI page wherever a form is needed.
// pages/login.page.dart
CustomTextField(
controller: _email,
hintText: 'Enter your email..',
),
CustomTextField(
controller: _password,
hintText: 'Enter your password..',
obscureText: isVisible,
),
Bonus
We can create the another custom widget of Text.
// widgets/custom_text.dart
class CustomText extends StatelessWidget {
final String text;
final double? fontSize;
final Color? color;
final FontWeight? fontWeight;
const CustomText(
{super.key,
required this.text,
this.fontSize,
this.fontWeight,
this.color});
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
fontSize: fontSize,
fontWeight: fontWeight,
color: color,
),
);
}
}
Once you have created the CustomText widget, it can be utilized wherever it is required in your code.
// pages/homepage.dart
CustomText(
text: 'example',
fontWeight: FontWeight.w800,
fontSize: Theme.of(context)
.textTheme
.titleMedium!
.fontSize,
),
I hope you have found it helpful and enjoyable to learn how to create a custom widget in Flutter.
Thank you.
Posted on April 16, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
