In this tutorial, we’ll learn what Flutter textformfield isCollapsed is and how to customize it by using a practical Flutter code example.
Introduction: Flutter Textformfield IsCollapsed
IsCollapsed is used to remove the vertical space/height of Flutter textformfield widget. Let’s first see how Flutter textformfield looks with default isCollapsed value. After that, we’ll customize it practically.
Default Flutter Textformfield IsCollapsed
In order to see that, we’ve to implement a textformfield with a custom background color so we can see its default height. We’ll also specify a hint text for more detailed visualization. See below code:
TextFormField( decoration: InputDecoration( filled: true, fillColor: Colors.blue, hintText: 'Default iscollapsed value', hintStyle: TextStyle(color: Colors.white)), )
Custom Flutter Textformfield IsCollapsed
For that, we’ve to use the isCollapsed constructor of input decoration class. It takes a Boolean(true/false) value and by default, its false. For demonstration, lets pass true to it and see what changes will occur in Flutter textformfield. See below code:
TextFormField( decoration: InputDecoration( isCollapsed: true, filled: true, fillColor: Colors.blue, hintText: 'Custom iscollapsed value', hintStyle: TextStyle(color: Colors.white)), )
Feel free to ask if you still have any questions regarding the implementation of isCollapsed property in Flutter textformfield widget. I’ll be more than happy to answer all your questions.
The complete source code of custom Flutter textformfield isCollapsed implementation is given in the next section.
Customized Flutter Textformfield IsCollapsed 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: 30),
child: TextFormField(
decoration: InputDecoration(
isCollapsed: true,
filled: true,
fillColor: Colors.blue,
hintText: 'Custom iscollapsed value',
hintStyle: TextStyle(color: Colors.white)),
),
))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of what Flutter textformfield isCollapsed is and how to customize it. I’ll be looking forward 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.
