Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove Space at the bottom of TextField in flutter?

Dialog

I can't figure out why there is space at the bottom of TextField between the text and the blue line.

Here is my code :

Future<Null> _selectNoteType (BuildContext context) async {

  switch (await showDialog<Null>(

      context: context,
      builder: (BuildContext context) {

        return new SimpleDialog(

          title: const Text('Select Note Type'),
          children: <Widget>[

            Padding(
              padding: const EdgeInsets.only(left: 8.0, right: 8.0),
              child: new TextField(
                keyboardType: TextInputType.text,
                maxLines: 1,
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 20.0
                ),
              ),
            ),

            new SimpleDialogOption(
                onPressed: () {},
                child: const Text('Text')
              ),

            new SimpleDialogOption(
              onPressed: () {},
              child: const Text('Checklist')
            ),
          ],
        );
      }
  )) {}
}
like image 889
Detained Developer Avatar asked Sep 30 '18 12:09

Detained Developer


People also ask

How do you get rid of the bottom line in a TextField Flutter?

To remove TextField underline/border in Flutter, you can simply set the border property to InputBorder. none. This will remove the underline for all states such as Focused, Enabled, Error, Disabled.

How do you remove padding in Flutter?

MediaQuery. removePadding, which uses this method to remove padding from the ambient MediaQuery. SafeArea, which both removes the padding from the MediaQuery and adds a Padding widget. removeViewInsets, the same thing but for viewInsets.

How to remove textfield text input bottom underline in flutter Android iOS?

TextField widget has a property decoration which has a sub property border: InputBorder.none .This property would Remove TextField Text Input Bottom Underline in Flutter Android iOS mobile app. The bottom underline shows us how much area in width Text Input is occupying on mobile screen. 1. Import material.dart package in your app’s main.dart file.

How to remove top and bottom space from listtile in flutter?

How to Remove Top and Bottom Space From ListTile In Flutter?? You can use the visualDensity property to reduce the space. The visualDensity value can be changed from -4.0 to 4.0. Lower the value, more compact the view. In your code put property dense: true inside the list tile

How do I remove the padding from a flutter widget?

As of flutter 1.17.5 (and still the same in 1.2X) to completely remove or manipulate the padding manually, first you must set isDense: true and then you can adjust the contentPadding as you wanted or apply padding on the parent widget instead.

How to clear the textfield when you press the button?

Whenever you enter something in the TextField and press the button, TextField would be cleared. Below is the output of the above implementation. Use Up/Down Arrow keys to increase or decrease volume.


2 Answers

In my case the TextField would still not collapse even after using InputDecoration.collapsed().

My version doesn't have any padding at all and takes the minimum size:

TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(0.0),
    isDense: true,
    border: InputBorder.none,
  ),
  minLines: 1,
  maxLines: 1,
);

Example preview

Live preview: https://dartpad.dev/3f9149a1c8f5eec352c796e7585e233c

like image 107
vovahost Avatar answered Oct 06 '22 19:10

vovahost


You can use a collapsed InputDecoration for the decoration: property of the TextField.

  Future<Null> _selectNoteType(BuildContext context) async {

    InputDecoration decoration = const InputDecoration.collapsed()
      ..applyDefaults(Theme.of(context).inputDecorationTheme);

    switch (await showDialog<Null>(
        context: context,
        builder: (BuildContext context) {
          return new SimpleDialog(
            title: const Text('Select Note Type'),
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                child: new TextField(
                  decoration: decoration,
                  keyboardType: TextInputType.text,
                  maxLines: 1,
                  style: new TextStyle(color: Colors.black, fontSize: 20.0),
                ),
              ),
              new SimpleDialogOption(
                  onPressed: () {}, child: const Text('Text')),
              new SimpleDialogOption(
                  onPressed: () {}, child: const Text('Checklist')),
            ],
          );
        })) {
    }
  }

But you must know the consequences of using a collapsed InputDecoration. From the documentation:

  /// Whether the decoration is the same size as the input field.
  ///
  /// A collapsed decoration cannot have [labelText], [errorText], an [icon].
  ///
  /// To create a collapsed input decoration, use [InputDecoration..collapsed].
  final bool isCollapsed;

And for the InputDecoration.collapse() constructor:

  /// Defines an [InputDecorator] that is the same size as the input field.
  ///
  /// This type of input decoration does not include a border by default.
  ///
  /// Sets the [isCollapsed] property to true.
  const InputDecoration.collapsed({
like image 38
chemamolins Avatar answered Oct 06 '22 20:10

chemamolins