In this tutorial, we’ll learn how to easily change Flutter textformfield suffix icon size by using a proper practical Flutter example code.
Introduction: Flutter Textformfield Suffix Icon Size
Suffix icon comes on the right side of Flutter textformfield widget. Let’s first see its default size, then we’ll customize it using a practical Flutter example code.
Default Size: Flutter Textformfield Suffix Icon
In order to see that, we’ve created a simple Flutter textformfield widget. We’ve passed a Flutter icon widget to the suffix icon constructor.
We also have wrapped this textformfield with a Flutter padding widget to create a horizontal distance between textformfield and screen borders(available in the complete source code in the end). See below code for practical implementation:
TextFormField( decoration: InputDecoration( suffixIcon: Icon( Icons.visibility, ), ))
Change Flutter Textformfield Suffix Icon Size (Multiple Examples)
In the above code, we can see that Flutter icon widget is passed to suffix icon constructor of input decoration class. We’ll make use of size constructor of the this icon widget to change the size of suffix 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 icon widget. See below examples:
Example 1
suffixIcon: Icon( Icons.visibility, size:29 )
Example 2
suffixIcon: Icon( Icons.visibility, size:20 )
Example 3
suffixIcon: Icon( Icons.visibility, size:10 )
We can see in the above image that size of suffix icon is changed successfully.
So this is how you can easily customize Flutter textformfield suffix icon size in your own Flutter apps as well.
Feel free to ask if you still have any questions regarding the customization of suffix icon size. I’ll be more than happy to answer all your questions.
The complete source code of customized Flutter textformfield suffix icon size is given in the below section.
Customized Flutter Textformfield Suffix 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(
suffixIcon: Icon(
Icons.visibility,
size:29
),
)),
))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield suffix icon size. I’ll be delighted to receive your 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.
