How To Implement Flutter Textfield IsDense – Easy Flutter Example Code

In this tutorial, we’ll learn what Flutter textfield isDense is and how to customize it by using a practical Flutter example code.

Introduction: Flutter Textfield IsDense

IsDense property is used to increase/decrease the vertical space of Flutter textfield widget. Let’s first visualize Flutter textfield with default isDense value. After that, we’ll customize it practically.

Default Flutter Textfield IsDense

For that, we’ve to implement a textfield with a custom background color so we can see the changes in its height after isDense property is customized. We’ll also specify a hint text for more detailed visualization. See below code:

TextField(
        decoration: InputDecoration(
            filled: true,
            fillColor: Colors.blue,
            hintText: 'Default isDense property',
            hintStyle: TextStyle(color: Colors.white)),
      )

This is the Flutter textfield widget with default isDense value. Let’s now customize it using isDense property.

Custom Flutter Textfield IsDense

In order to customize it, we’ve to use the isDense constructor of input decoration class. This constructor takes a Boolean(true/false) value. By default, its value is false. Let’s change it to true and see if the height of Flutter textfield is customized by it or not. See below code:

TextField(
        decoration: InputDecoration(
            isDense: true,        // is dense constructor
            filled: true,
            fillColor: Colors.blue,
            hintText: 'Custom isDense property',
            hintStyle: TextStyle(color: Colors.white)),
      )

We can see that the height of textfield is now decreased. So by passing true to Flutter textfield isDense constructor, we can easily decrease its height.

Feel free to ask if you still have any questions regarding the implementation of isDense property in Flutter textfield widget. I’ll be more than happy to answer all.

The complete source code of custom Flutter textfield isDense implementation is provided in the next section.

Customized Flutter Textfield IsDense 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: TextField(
        decoration: InputDecoration(
            isDense: true,
            filled: true,
            fillColor: Colors.blue,
            hintText: 'Custom isDense property',
            hintStyle: TextStyle(color: Colors.white)),
      ),
    ))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of what Flutter textfield isDense is and how to customize it. I’ll be looking forward to receive your valuable 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.

Introduction: Flutter Textfield IsDense

Default Flutter Textfield IsDense

Custom Flutter Textfield IsDense

Customized Flutter Textfield IsDense Source Code

Conclusion

Leave a Comment Cancel Reply