How To Change Flutter Textfield Font Size

In this tutorial, we will learn how to properly change Flutter textfield font size in the Flutter app. We will be understanding it using proper Flutter code examples.

We’ll change the font size of hint text as well as the font size of the input entered by the user.

Introduction: Flutter Textfield Font Size

Before understanding what Flutter textfield font size is, first understand what Flutter textfield is.

Flutter textfield takes inputs from the user. As an example, Flutter textfield may be utilized in the Flutter login form to take inputs of email and password from the user and other inputs as well. Flutter textfield is used to take input from the user and that data can then be used to perform some specific operations

Let’s now understand what Flutter textfield font size is. It’s the size of the text that is shown in the Flutter textfield. It can be a Flutter textfield hint text or the text that is given by the user. Let’s now understand it practically.

Change Font Size Of Hint Text

In the below code, we have customized the Flutter textfield font size of hint text. For that, we’ve first specified a hint text using the hint text constructor of the input decoration class which is passed to the decoration constructor of the textfield widget.

Now in order to change the font size, we’ve used the hint style constructor of the input decoration class. It takes a text style widget. By using this, we can change the color, font size, and other properties of text. In order to change the font size, we’ve to pass an integer/double value to the font size constructor of the text style widget.

For demonstration, we’ve only changed the font size and color of the hint text.

Small Flutter Textfield Font Size Of Hint Text

            hintText: 'Small hint text...',
            hintStyle: TextStyle(color: Colors.grey.shade400, fontSize: 13),

We can see that the font size of the hint text is now small. In this section, we’ve just specified the main part which is hint text and hint style constructor. Don’t worry, the complete source code will be provided in the end.

Large Font Size Of Hint Text

            hintText: 'Large hint text...',
            hintStyle: TextStyle(color: Colors.grey.shade400, fontSize: 20),

In this code, we can see that the font size of the hint text is now big. The reason is that we’ve given a value of 20 to the font size constructor of the text style widget which is passed to the hint style constructor.

Change Font Size Of Input Text

Now let’s jump into changing the Flutter textfield font size of the user’s input. To achieve this, we have to use the style constructor of the Flutter textfield. It takes a text style widget so we can change the properties of entered text using this widget.

For demonstration, we’ve customized the size of input text by passing an integer to the font size constructor of text style. We can pass a double(decimal) value as well.

style: TextStyle(fontSize: 23)

The above image shows an input text having a larger font size.

So this is how we can easily change the Flutter textfield font size. Hope you have learned a lot from this tutorial.

The complete source code is given in the below block.

Custom Flutter Textfield Font 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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 41.5),
        child: TextField(
          style: TextStyle(fontSize: 20),
          decoration: InputDecoration(
              hintText: 'This is Hint Text',
              hintStyle: TextStyle(fontSize: 18, color: Colors.grey)),
        ),
      )),
    ));
  }
}

Conclusion

In conclusion, we have learned how to customize Flutter textfield font size in the Flutter app. Please let me know your thoughts on this post.

We’d be delighted to see you visit our other articles on Flutter app development and Python programming. Thank you for reading this one.