How To Change Flutter Textformfield Cursor Height – Easy Flutter Code Example

In this tutorial, we’ll learn how to easily implement Flutter textformfield cursor height by using a proper practical Flutter example code.

Introduction: Flutter Textformfield Cursor Height

Before customizing Flutter textformfield cursor height, first understand what Flutter textformfield cursor is. Flutter textformfield cursor specifies the current position/location where the input will be inserted in the Flutter textformfield.

Don’t worry, I will now start implementing it using a proper example so you have a better understanding of what that cursor means and how to change cursor height of Flutter textformfield.

Default Flutter Textformfield Cursor Height

Let’s see what the default cursor height of textformfield is. For that, we don’t have to specify anything, just implement the Flutter textformfield. See the below code:

TextFormField()

flutter textformfield default cursor height

As you can see, I haven’t specified anything else other than just a Flutter textformfield to see what the default Flutter textformfield cursor height is.

In the above image, we can see the default cursor height of Flutter textformfield and its shown only when the Flutter textformfield is focused.

Let’s now practically discuss how to change Flutter textformfield cursor height.

Change Flutter Textformfield Cursor Height

For that, you have to use the cursor height constructor of the Flutter textformfield. It takes a double(decimal) value but passing it an integer value will also work just fine. See below code:

cursorHeight: 10

flutter textformfield custom cursor height

We can see that the Flutter textformfield cursor height is now changed. It will only work if the textformfield is empty. The cursor size will come back to its original position as soon as we start typing something in textformfield.

So in that case, we’ll have to use style constructor of Flutter textformfield widget. After that, we’ve use the height constructor of text style class. See below code:

TextFormField(
                style: TextStyle(height: 2)
              )

We can see the Flutter textformfield cursor height is now changed.

Hope you now have complete understanding of how to change Flutter textformfield cursor height.

Below section includes the complete source code in which cursor height of Flutter textformfield widget is customized.

Custom Flutter Textformfield Cursor Height Source Code

flutter textformfield cursor height

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: 40),
              child: TextFormField(
                style: TextStyle(height: 2),
               // cursorHeight: 20  also try this if it works for you         
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield cursor height. 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.

Introduction: Flutter Textformfield Cursor Height

Default Flutter Textformfield Cursor Height

Change Flutter Textformfield Cursor Height

Custom Flutter Textformfield Cursor Height Source Code

Conclusion

Leave a Comment Cancel Reply