Flutter textfield height customization. In this article, I will be discussing about how to change Flutter textfield height. I will implement the Flutter textfield height customization step by step so you don’t have any queries left after reading this post. So let’s jump right into implementing the customization of Flutter textfield height.
What is Flutter Textfield Height?
Flutter textfield height, as the name suggests, it is the height of the Flutter textfield means the vertical space that the Flutter textfield will cover. Let’s now set our Flutter textfield height using a practical Flutter code.
Default Flutter Textfield Height
Let’s see the default Flutter textfield height. For that, we have to implement a simple Flutter textfield. See the below code:
TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey.shade200
),
)
Using isDense
Using is dense constructor of the input decoration class minimize the vertical space of the Flutter textfield which means less Flutter textfield height. Is dense takes a boolean value, by default it is false, making it true will decrease the Flutter textfield 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 textfield height same with the input, by default it is false, making it true will trigger its effect on Flutter textfield height as seen in the below image.
isCollapsed: true
Changing Flutter Textfield Height Using Content Padding
Let’s see how we can change the Flutter textfield 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(30)
Custom Flutter Textfield 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(
style: TextStyle(color: Colors.purple),
cursorColor: Colors.purple,
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.purple.withOpacity(.08),
prefixIcon: Icon(
Icons.person,
color: Colors.purple,
),
contentPadding: EdgeInsets.all(26),
labelText: 'Enter your name',
labelStyle:
TextStyle(color: Colors.purple.withOpacity(.8)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
topLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
topLeft: Radius.circular(0)))),
)
],
))),
));
}
}Conclusion
In conclusion, hope you now have a complete understanding of how to customize Flutter textfield height. I would love to have your feedback on it. I also have other articles on Flutter app development, Flutter animations, Flutter widgets, Flutter templates and many more. Thanks for reading this post.
