In this tutorial, we’ll learn how to easily implement Flutter textfield cursor height by using a proper practical Flutter example code.
Introduction: Flutter Textfield Cursor Height
Before customizing Flutter textfield cursor height, first understand what Flutter textfield cursor is. Flutter textfield cursor specifies the current position/location where the input will be inserted in the Flutter textfield.
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 textfield.
Default Flutter Textfield Cursor Height
Let’s see what the default cursor height of textfield is. For that, we don’t have to specify anything, just implement the Flutter textfield. See the below code:
TextField()
Change Flutter Textfield Cursor Height
For that, you have to use the cursor height constructor of the Flutter textfield. It takes a double(decimal) value but passing it an integer value will also work just fine. See below code:
cursorHeight: 10
TextField( style: TextStyle(height: 2) )
Custom Flutter Textfield Cursor Height 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: 40),
child: TextField(
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 textfield 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.
