In this tutorial, we’ll learn how to properly customize Flutter textformfield height by using practical Flutter code examples.
Introduction: Flutter Textformfield Height
Flutter textformfield height, as the name suggests, it is the height of the Flutter textformfield means the vertical space that the Flutter textformfield will cover. Let’s now set our Flutter textformfield height using a practical Flutter code.
Default Flutter Textformfield Height
Let’s see the default Flutter textformfield height. For that, we have to implement a simple Flutter textformfield. See the below code:
TextFormField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.green.shade100
),
)
Using isDense
Using is dense constructor of the input decoration class minimize the vertical space of the Flutter textformfield which means Flutter textformfield with less height. Is dense takes a Boolean value, by default it is false, making it true will decrease the Flutter textformfield height as seen in the below image.
isDense: true
Using isCollapsed
Is collapsed constructor of the input decoration class also takes a Boolean value, it makes the Flutter textformfield height same with the input, by default it is false, making it true will trigger its effect on Flutter textformfield height as seen in the below image.
isCollapsed: true
Changing Flutter Textformfield Height Using Content Padding
Let’s see how we can change the Flutter textformfield height with custom value. For that you have to use the content padding constructor of the input decoration class. See the code below for this:
contentPadding: EdgeInsets.all(28)
Custom Flutter Textformfield 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: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(28),
filled: true,
fillColor: Colors.green.shade100),
)
],
))),
));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield height. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
