How To Change Flutter Textformfield Font Size?

flutter textformfield font size

Flutter textformfield font size customization. In this article, I will explain and implement the customization of Flutter textformfield font size. I will explain Flutter textformfield font size step by step using a proper Flutter code example so it will be easy for you to understand how to change Flutter textformfield font size.

What is Flutter Textformfield Font Size?

Flutter textformfield font size is the size of the input text that the user input in the Flutter textformfield. We can make the font size of text bigger or smaller, let’s now understand how to change Flutter textformfield font size using am easy Flutter code example.

Default Flutter Textformfield Font Size

To see the default Flutter textformfield font size, let’s just define a simple Flutter textformfield. See the below code:

TextFormField()

flutter textformfield default font size

As you can see in the above image, this is the default Flutter textformfield font size. I have inputted some value to demonstrate how the default font size of inputted text is in Flutter textformfield.

Change Flutter Textformfield Font Size

Let’s now change the Flutter textformfield font size. For that we have to use the style constructor of the Flutter textformfield. Passing the text style class to that constructor and using the font size constructor of the text style class, we can change the Flutter textformfield font size. See the below code:

TextFormField(
          style: TextStyle(fontSize: 20),
              )
flutter textformfield change font size
As you can see in the above image, we have set the font size to 20 just to demonstrate that we have changed the Flutter textformfield font size and is working properly.
Now you have a complete understanding of how to change the font size of Flutter textformfield . Hope you like this post, comment if your still have any queries regarding Flutter textformfield font size. Now as a treat, I have designed a beautiful Flutter textformfield design for you in which Flutter textformfield font size is also customized. Hope you will like it. The source code is given in the next section.

Custom Flutter textformfield Design Source Code

flutter textformfield font 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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: TextFormField(
                  style: TextStyle(color: Colors.grey, fontSize: 20),
                  cursorColor: Colors.purple,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.green.withOpacity(.1),
                    hintText: 'This is hint text',
                    hintStyle: TextStyle(color: Colors.grey),
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.grey,
                    ),
                    border: InputBorder.none,
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.green),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(topRight: Radius.circular(0))),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.green),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(topRight: Radius.circular(0))),
                    contentPadding: EdgeInsets.all(23),
                  )))),
    ));
  }
}

Conclusion

In conclusion, hope now your concept is clear on how to change Flutter textformfield font size in Flutter textformfield. I would love to have your feedback on this post and I would highly encourage you to visit my other posts on Flutter widgets, Flutter animations, Flutter beautiful templates and many others more, links to some of these posts are listed below. Thanks for reading.

Leave a Comment

Your email address will not be published.