How To Implement Flutter Textformfield IsCollapsed – Easy Flutter Example Code

flutter textformfield iscollapsed

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)),
      )
flutter textformfield default iscollapsed
This is how Flutter textformfield widget looks when isCollapsed value is not customized.

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)),
      )
flutter textformfield iscollapsed
We can see that the extra height of Flutter textformfield is completely removed. So this is how you can easily remove the height of Flutter textformfield by passing true to isCollapsed constructor.
We can also customize the height of textformfield using isDense constructor. Click here to understand how it can be practically implemented.

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

flutter textformfield iscollapsed

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.

Leave a Comment

Your email address will not be published.