In this tutorial, we’ll learn what Flutter textfield isCollapsed is and how to customize it by using a practical Flutter code example.
Introduction: Flutter Textfield IsCollapsed
IsCollapsed is used to remove the vertical space/height of Flutter textfield widget. Let’s first see how Flutter textfield looks with default isCollapsed value. After that, we’ll customize it practically.
Default Flutter Textfield IsCollapsed
In order to see that, we’ve to implement a textfield 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:
TextField( decoration: InputDecoration( filled: true, fillColor: Colors.blue, hintText: 'Default iscollapsed value', hintStyle: TextStyle(color: Colors.white)), )
Custom Flutter Textfield 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 textfield. See below code:
TextField( 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 textfield widget. I’ll be more than happy to answer all your questions.
The complete source code of custom Flutter textfield isCollapsed implementation is given in the next section.
Customized Flutter Textfield 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: TextField(
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 textfield 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.
