Extend InputDecoration with prefix/suffix padding #19514

christian-muertz · 2018-07-18T15:39:18Z

Allows to make some space between the suffix/prefix text and the text entered into the text field.
(fixes #19460 @HansMuller)

googlebot · 2018-07-18T15:39:21Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

What to do if you already signed the CLA

Individual signers

It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
The email used to register you as an authorized contributor must also be attached to your GitHub account.

christian-muertz · 2018-07-18T15:47:55Z

I signed it!

googlebot · 2018-07-18T15:47:57Z

CLAs look good, thanks!

HansMuller · 2018-07-18T17:46:17Z

This looks reasonable however It might be simpler to just expose prefix/suffix widgets as an alternative to prefixText and suffixText. The input decorator internals (see _RenderDecorator etc) are already set up that way. Supporting widget values is more consistent with Flutter's overall approach and it scales better than adding more properties like this.

HansMuller · 2018-07-18T17:51:30Z

I'm afraid this issue has come up frequently; just hasn't been addressed yet. See also:

christian-muertz · 2018-07-18T18:19:48Z

Yep thought about this too, but if we remove prefixText and suffixText it might break some apps.

What about exposing prefix and suffix too and only use prefixText and suffixText when no prefix/suffix is set?

christian-muertz · 2018-07-18T18:32:56Z

What about replacing prefixIcon, prefixText, ... with only prefix? Having so many options for specifying the prefix is confusing.

HansMuller · 2018-07-18T19:04:51Z

What about exposing prefix and suffix too and only use prefixText and suffixText when no prefix/suffix is set?

Sound good. We should assert if both attributes, say prefix and prefixText, are specified.

We can't get rid of prefixText and suffixText because backwards compatibility. Likewise, we can't replace prefixText and prefixIcon with just prefix. Ofcourse if we were starting over, that would make sense.

christian-muertz · 2018-07-18T19:06:52Z

Alright, will work on it tomorrow

christian-muertz · 2018-07-19T09:39:44Z

Ok replaced the padding parameters with prefix and suffix.

We should assert if both attributes, say prefix and prefixText, are specified.

Yep, when both prefix and prefixText is declared an assertion error is thrown. Same applies for suffix and suffixText.

HansMuller

This is looking pretty good. It will need tests.

HansMuller · 2018-07-19T13:51:53Z

packages/flutter/lib/src/material/input_decorator.dart

-    final Widget prefix = decoration.prefixText == null ? null :
-      new AnimatedOpacity(
+    final Widget prefix = decoration.prefix == null && decoration.prefixText == null ? null
+        : new AnimatedOpacity(


The 2-space indentation got clobbered here and below.

HansMuller · 2018-07-19T13:54:32Z

packages/flutter/lib/src/material/input_decorator.dart

@@ -1833,6 +1833,10 @@ class InputDecoration {
  /// no border is drawn.
  ///
  /// The [enabled] argument must not be null.
+  ///
+  /// Only [prefix] or [prefixText] can be declared.


Only one of [prefix] and [prefixText] can be specified.

HansMuller · 2018-07-19T13:55:01Z

packages/flutter/lib/src/material/input_decorator.dart

@@ -1833,6 +1833,10 @@ class InputDecoration {
  /// no border is drawn.
  ///
  /// The [enabled] argument must not be null.
+  ///
+  /// Only [prefix] or [prefixText] can be declared.
+  /// Declaring both ends with an error.


We generally don't include statements like this in the docs.

HansMuller · 2018-07-19T14:08:54Z

packages/flutter/lib/src/material/input_decorator.dart

-    final Widget prefix = decoration.prefixText == null ? null :
-      new AnimatedOpacity(
+    final Widget prefix = decoration.prefix == null && decoration.prefixText == null ? null
+        : new AnimatedOpacity(


It would be nice to honor the prefix textStyle here. I'd suggest defining a trivial private widget like _AffixText that deals with suffix and prefix and their AnimatedOpacity:

new _AffixText( text: prefixText, chlid: prefix, style: decoration.prefixStyle ?? hintStyle, labelIsFloating: widget._labelIsFloating, )

Where _AffixText either builds a DefaultTextStyle that contains child or a new Text widget with the specified style.

HansMuller · 2018-07-19T14:10:37Z

packages/flutter/lib/src/material/input_decorator.dart

-    final Widget suffix = decoration.suffixText == null ? null :
-      new AnimatedOpacity(
+    final Widget suffix = decoration.suffix == null && decoration.suffixText == null ? null
+        : new AnimatedOpacity(


You could use _AffixText here as well.

HansMuller · 2018-07-19T14:33:25Z

packages/flutter/lib/src/material/input_decorator.dart

@@ -2258,34 +2291,40 @@ class InputDecoration {

  @override
  int get hashCode {
+    // split into multiple hashValues calls
+    // because the hashValues function only takes up to 20 fields...
    return hashValues(


This statement can be left as it is - two calls to hashValues(). Just move a few of the parameters to the second call up into the first parameter list.

HansMuller · 2018-07-19T14:34:55Z

packages/flutter/lib/src/material/input_decorator.dart

@@ -2035,6 +2046,14 @@ class InputDecoration {
  /// See [Icon], [ImageIcon].
  final Widget prefixIcon;

+  /// Optional widget to place on the line before the input.
+  /// Can be for example used to add some padding to the [prefixText] or to


Can be for example => Can be

HansMuller · 2018-07-19T14:35:06Z

packages/flutter/lib/src/material/input_decorator.dart

@@ -2074,6 +2093,14 @@ class InputDecoration {
  /// See [Icon], [ImageIcon].
  final Widget suffixIcon;

+  /// Optional widget to place on the line after the input.
+  /// Can be for example used to add some padding to the [suffixText] or to


Can be for example => Can be

HansMuller · 2018-07-19T14:38:47Z

packages/flutter/lib/src/material/input_decorator.dart

@@ -2035,6 +2046,14 @@ class InputDecoration {
  /// See [Icon], [ImageIcon].
  final Widget prefixIcon;

+  /// Optional widget to place on the line before the input.


It's worth explaining that the prefix widget's baseline will be lined up with the input baseline.

HansMuller · 2018-07-19T14:39:18Z

packages/flutter/lib/src/material/input_decorator.dart

@@ -2074,6 +2093,14 @@ class InputDecoration {
  /// See [Icon], [ImageIcon].
  final Widget suffixIcon;

+  /// Optional widget to place on the line after the input.


It's worth explaining that the suffix widget's baseline will be lined up with the input's baseline.

christian-muertz · 2018-07-19T14:56:39Z

Thanks! I really appreciate your advice. I am struggling a bit with my english but i will try my best in future commits 😅

christian-muertz · 2018-07-19T16:20:41Z

I am not that familiar with testing flutter widgets but I will try it.

HansMuller · 2018-07-19T17:49:55Z

packages/flutter/lib/src/material/input_decorator.dart

+      new _AffixText(
+        labelIsFloating: widget._labelIsFloating,
+        text: decoration.prefixText,
+        style: decoration.prefixStyle,


style shoudl be decoration.prefixStyle ?? hintStyle, as before

HansMuller · 2018-07-19T17:50:25Z

packages/flutter/lib/src/material/input_decorator.dart

+      new _AffixText(
+        labelIsFloating: widget._labelIsFloating,
+        text: decoration.suffixText,
+        style: decoration.suffixStyle,


style should be decoration.suffixStyle ?? hintStyle, as before

ups fixed it

christian-muertz · 2018-08-02T16:16:43Z

Is it ok if i rebase and squash?

HansMuller · 2018-08-03T15:29:27Z

Is it ok if i rebase and squash?
Sure

HansMuller

The test looks good. I will land this PR once you've finished with the squash/rebase.

LGTM

christian-muertz · 2018-08-03T15:43:40Z

Here we go

HansMuller · 2018-08-03T15:54:55Z

Can you fix up the analyzer errors? Const is no longer needed in subexpressions of a const expression.

christian-muertz · 2018-08-03T16:34:05Z

Yep all checks pass :D

googlebot added the cla: no label Jul 18, 2018

googlebot added cla: yes and removed cla: no labels Jul 18, 2018

HansMuller reviewed Jul 19, 2018

View reviewed changes

HansMuller approved these changes Aug 3, 2018

View reviewed changes

Christian Mürtz added 2 commits August 3, 2018 17:42

Add Christian Muertz to the AUTHORS list

e28683e

Add InputDecorator prefix and suffix widget

16ac200

Add tests for the InputDecorator prefix and suffix widget

79c865a

HansMuller merged commit ad16374 into flutter:master Aug 3, 2018

christian-muertz deleted the input_decoration_prefix branch August 3, 2018 16:53

zoechi mentioned this pull request Jan 28, 2019

InputDecorator should allow a widget in the prefix area. #12747

Closed

github-actions bot locked as resolved and limited conversation to collaborators Aug 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extend InputDecoration with prefix/suffix padding #19514

Extend InputDecoration with prefix/suffix padding #19514

christian-muertz commented Jul 18, 2018 •

edited

Loading

googlebot commented Jul 18, 2018

christian-muertz commented Jul 18, 2018

googlebot commented Jul 18, 2018

HansMuller commented Jul 18, 2018

HansMuller commented Jul 18, 2018

christian-muertz commented Jul 18, 2018

christian-muertz commented Jul 18, 2018

HansMuller commented Jul 18, 2018

christian-muertz commented Jul 18, 2018 •

edited

Loading

christian-muertz commented Jul 19, 2018

HansMuller left a comment

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018 •

edited

Loading

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018

HansMuller Jul 19, 2018

christian-muertz commented Jul 19, 2018

christian-muertz commented Jul 19, 2018 •

edited

Loading

HansMuller Jul 19, 2018

christian-muertz Jul 19, 2018

HansMuller Jul 19, 2018

christian-muertz Jul 19, 2018

christian-muertz commented Aug 2, 2018

HansMuller commented Aug 3, 2018

HansMuller left a comment

christian-muertz commented Aug 3, 2018

HansMuller commented Aug 3, 2018

christian-muertz commented Aug 3, 2018 •

edited

Loading

Extend InputDecoration with prefix/suffix padding #19514

Extend InputDecoration with prefix/suffix padding #19514

Conversation

christian-muertz commented Jul 18, 2018 • edited Loading

googlebot commented Jul 18, 2018

What to do if you already signed the CLA

Individual signers

Corporate signers

christian-muertz commented Jul 18, 2018

googlebot commented Jul 18, 2018

HansMuller commented Jul 18, 2018

HansMuller commented Jul 18, 2018

christian-muertz commented Jul 18, 2018

christian-muertz commented Jul 18, 2018

HansMuller commented Jul 18, 2018

christian-muertz commented Jul 18, 2018 • edited Loading

christian-muertz commented Jul 19, 2018

HansMuller left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HansMuller Jul 19, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

christian-muertz commented Jul 19, 2018

christian-muertz commented Jul 19, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

christian-muertz commented Aug 2, 2018

HansMuller commented Aug 3, 2018

HansMuller left a comment

Choose a reason for hiding this comment

christian-muertz commented Aug 3, 2018

HansMuller commented Aug 3, 2018

christian-muertz commented Aug 3, 2018 • edited Loading

christian-muertz commented Jul 18, 2018 •

edited

Loading

christian-muertz commented Jul 18, 2018 •

edited

Loading

HansMuller Jul 19, 2018 •

edited

Loading

christian-muertz commented Jul 19, 2018 •

edited

Loading

christian-muertz commented Aug 3, 2018 •

edited

Loading