In this tutorial, we’ll learn how to easily change Flutter textformfield prefix icon size by using multiple practical Flutter code examples.
Introduction: Flutter Textformfield Prefix Icon Size
Prefix icon comes on the left side of Flutter textformfield widget. Let’s first see its default size, then we’ll customize it using multiple practical examples.
Default Size: Prefix Icon
In order to see that, we’ve implemented a simple Flutter textformfield widget with a prefix icon. We also have wrapped this textformfield with a Flutter padding widget to create a horizontal distance between the screen border and textformfield(available in the complete source code in the end). See below code:
TextFormField( decoration: InputDecoration( prefixIcon: Icon( Icons.email, ), )
Change Flutter Textformfield Prefix Icon Size (Multiple Examples)
In the above code, we can see that Flutter icon widget is passed to prefix icon constructor of input decoration class. We’ll make use of size constructor of the this icon widget to change the size of prefix icon. This size constructor takes a double(decimal) value but passing it integer will also work just fine.
For demonstration, we’ve passed different values to size constructor of Flutter icon widget. See below examples:
Example 1
prefixIcon: Icon( Icons.email, size:35 )
Example 2
prefixIcon: Icon( Icons.email, size:24 )
Example 3
prefixIcon: Icon( Icons.email, size:15 )
We can see in the above image that size of prefix icon is changed successfully.
So this is how you can properly customize Flutter textformfield prefix icon size in your own Flutter apps as well.
Feel free to ask if you still have any questions regarding the implementation of prefix icon size. I’ll be more than happy to answer all your questions.
The complete source code of custom Flutter textformfield prefix icon size is given in the below section.
Customized Flutter Textformfield Prefix Icon Size Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 30),
child: TextFormField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.email,
size:35
),
)),
))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield prefix icon size. I’ll be delighted to have your valuable feedback on this post.
I’d love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
