How To Change Flutter Textformfield Suffix Icon Size

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

flutter textformfield suffix icon default size

The default Flutter textformfield suffix icon size can be seen in the image provided above.

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

flutter textformfield suffix icon custom size

 suffixIcon: Icon(
          Icons.visibility,
          size:29
        )

Example 2

flutter textformfield suffix icon change size

suffixIcon: Icon(
          Icons.visibility,
          size:20
        )

Example 3

flutter textformfield suffix icon size

 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

flutter textformfield suffix icon custom size

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.

How To Change Flutter Textformfield Suffix Icon Size – Easy Flutter Guide