TextField decoration InputDecoration.collapsed has extra padding in new flutter versions.

Currently running on the latest beta branch while waiting on some of the fixes to enter stable. Beta v1.10.7 has the working format/padding our app has always had for our TextField InputDecoration.collapsed.

In the newer beta versions it has extra padding. I've tried adjusting the padding and was able to remove some of it by adjusting the container. I also tried an InputBorder with contentPadding as well, but ultimately I cannot make my original TextField in the new version.

In the latest beta version it looks like this:

Code for the TextField below..

Container(
                  constraints: BoxConstraints(minHeight: 32.0, maxHeight: 108.0),
                  margin: EdgeInsets.symmetric(vertical: 6.0),
                  padding: EdgeInsets.symmetric(vertical: 6.0, horizontal: 4.0),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey[300]),
                    borderRadius: BorderRadius.circular(12.0),
                    shape: BoxShape.rectangle,
                  ),
                  child: TextField(
                    textCapitalization: TextCapitalization.sentences,
                    style: TextStyle(color: Colors.black, fontSize: 16.0),
                    controller: textEditingController,
                    decoration: InputDecoration.collapsed(
                      hintText: 'Type your message...',
                      hintStyle: TextStyle(color: Colors.grey),
                    ),
                    maxLines: null,
                  ),
                ),

I'm seeing similar behavior as well.

pretty emergency!.
if we can't trust Textfield reliability so what is it saying about flutter.
please fix it

#44726 will resolve this problem.

Not working

Not working

Set InputDecoration property isDense to true solves my problem. Maybe You have another problem.

@MiloHwb

This is caused by #42449, which increased the height of TextFields by 8px in order to make them meet the Material guidelines for minimum interactive size.

You'll have to adjust your vertical padding to account for the height change, and if the field is still too tall even with no padding, use isDense as mentioned by @MiloHwb.

Let me know if there still seems to be something wrong and I'll reopen.

@justinmc

@justinmc, InputDecoration.collapsed doesn't set isDense to true (and you cannot set it) so the contentPadding has no effect. InputDecoration.collapsed is definitely not working the way it used to.

You're right, sorry I missed that. It looks like we'll need to come up with a way for .collapsed fields to be smaller than the minimum interactive size (48px). I see three options:

Ignore kMinInteractiveSize when isCollapsed is true.
Hard code isDense to true in InputDecoration.collapsed.
Allow the user to pass isDense to InputDecoration.collapsed.

Does anyone have an opinion? Would anyone ever want to set isDense and isCollapsed independently?

Here's an app that reproduces the problem. Left is before #42449 was merged, right is after.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red.withOpacity(0.2),
              child: TextField(
                decoration: InputDecoration.collapsed(
                  hintText: 'Type your message...',
                ),
              ),
            ),
          ],
        ),
      ),
    ),
    );
  }
}

RE: Would anyone ever want to set isDense and isCollapsed independently?
I think that would only lead to confusion.

+1 for "Hard code isDense to true in InputDecoration.collapsed."

It came up that this is also causing the image in the collapsed example in the InputDecoration docs to be incorrect. Fixing this issue should make the code in the example create a dense input like in the image.

@aaronvargas

@aaronvargas @dgriffith0 And anyone else with this problem. Would you be able to accomplish your goals without using .collapsed at all, and instead using things like contentPadding directly?

See this DartPad as an example: https://dartpad.dartlang.org/660380b25a3561b7d97123cecd73e51c

We are considering removing .collapsed to avoid confusion between it and isDense and visualDensity (see #51438). Opinions are welcome!

Looking into this, there are a couple usability issues…

When you use the standard constructor you can add MORE ContentPadding all you want but cannot remove it (unless you add the isDense: true). That’s a bit of hidden knowledge in itself that make is seem like a bug that you can’t reduce the padding. But it’s not entirely true, since you CAN reduce the Left/Right padding to zero…
isDense: Is part of the Material Spec ("Dense spacing"), with detailed padding information, so it should adhere to that. But instead when you set it to true, then you are allowed to set the content padding to whatever you like.

I think that we should add a new InputDecoration.dense() that doesn’t take a content padding so that you are restricted to guidelines.

Deprecate isDense in standard constructor since it has confusing side affects.

Allow ContentPadding in Standard constructor to override ALL defaults and ignore isDense (breaking change - slightly)

Keeping .collapsed() constructor would be less important since you could now use the Standard constructor and just specify ContentPadding to 0, and omit isDense. But I would keep it since it has a very concise use and explanation.

@justinmc

@justinmc, InputDecoration.collapsed doesn't set isDense to true (and you cannot set it) so the contentPadding has no effect. InputDecoration.collapsed is definitely not working the way it used to.

you can set it by calling InputDecoration.collapsed(...).copyWith(isDense: true).

@jenshor

@jenshor Thank you, this worked perfectly for me.

@aaronvargas

I've proposed a solution in #55911, I'd be grateful if anyone interested in this issue could take a look!

Here's a quick recap of the problem and my solution:

In #42449, I made the default height of a TextField 48px instead of 40px in order to match the Material spec. This was done in the actual size calculations of InputDecorator because it needs to work even if, say, the fontSize is very small. It couldn't have been done simply by adjusting the default padding.

In that PR, isDense was used as an escape hatch for this behavior, so that if you wanted to create a TextField smaller than 48px, you could do so by setting isDense to true. This created the problem that the original issue explains, where it's not easy to set isDense on a .collapsed field, so collapsed fields remain padded. Also, as explained by @aaronvargas, it's not intuitive that the trick to get small vertical padding to be respected is to use isDense.

My proposed solution is to respect contentPadding whenever it is explicitly set. Since .collapsed sets it to zero, collapsed fields correctly have no padding. This also avoids the trickiness of needing to set isDense to get a field smaller than 48px.

My idea of respecting given contentPadding ended up breaking some things, so I went with a simpler solution. Now, isCollapsed allows heights that are smaller than kMinInteractiveSize (48px). This still fixes the regression.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

TextField decoration InputDecoration.collapsed has extra padding in new flutter versions. #46160

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextField decoration InputDecoration.collapsed has extra padding in new flutter versions. #46160

Description

Activity

joshuaferguson commented on Dec 5, 2019

flareso commented on Dec 12, 2019

MiloHwb commented on Dec 12, 2019

flareso commented on Dec 12, 2019

MiloHwb commented on Dec 13, 2019

justinmc commented on Dec 17, 2019

aaronvargas commented on Dec 24, 2019

justinmc commented on Dec 26, 2019

aaronvargas commented on Dec 28, 2019

justinmc commented on Feb 20, 2020

justinmc commented on Feb 26, 2020

aaronvargas commented on Mar 8, 2020

jenshor commented on Apr 5, 2020

cosm9747 commented on Apr 9, 2020

justinmc commented on Apr 28, 2020

justinmc commented on May 7, 2020

lock commented on May 21, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions