Skip to content

Conversation

@Hixie
Copy link
Contributor

@Hixie Hixie commented Jan 4, 2018

This provides a way to draw colors, images, and general decorations on Material widgets, without interfering with InkWells that are further descendants of the widget.

This thus provides a cleaner way to solve the issue of FlatButtons and InkWells not working when placed over Image widgets than the old hack of introducing a transparency Material.

Fixes #3782.

Also, some fixes to documentation, and remove a redundant property on the Image widget.

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still working through this, just an update

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

paper?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

heh, i still think of it as "quantum paper"...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed -> material

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Container and DecoratedBox aren't necessarily opaque, so the unqualified parenthetical statement is a little confusing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replaced with "maybe using a ..."

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a nice short name. It's also a bit of a misnomer if we're going to say that splashes and ripples are drawn with "ink". A longer more horrible but more apt name would be MaterialAncestorDecorator.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as we discussed, i agree that the name is a bit sketchy but i think we want this to be more attractive than Container or BoxDecoration or even Image.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

... because in that case ink well and ink response descendants will draw their splashes on the otherwise transparent material

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

Copy link
Contributor

@HansMuller HansMuller Jan 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we want DecoratedBox.image and Container.image.

Maybe if we had BoxDecoration.image then one could just write new Ink(decoration: new BoxDecoration.image(...))

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't you think we want DecoratedBox.image and Container.image? I mean, I don't know if we do, but maybe we do, if this works out well here...

The problem with only having BoxDecoration.image is that it's still pretty verbose, c.f.:

  new Ink.image(
    image: new AssetImage('cat.jpeg'),
    fit: BoxFit.cover,
    width: 300.0,
    height: 200.0,
 )

  new Ink(
    decoration: new BoxDecoration.image(
      image: new AssetImage('cat.jpeg'),
      fit: BoxFit.cover,
    ),
    width: 300.0,
    height: 200.0,
 )

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMHO we'd want DecoratedBox.image and Container.image constructors for the sake symmetry (because that makes the APIs easier to understand) and we wouldn't want Ink.image, et al because less API is more.

IMHO BoxDecoration.image balances the API weight than the other 3 constructors, but I defer to you.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we might want DecoratedBox.image and Container.image, I just think we should see how Ink.image goes before doing it. :-)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

video_player provide a Texture, not a Image.
Do you have a solution?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens when a Material widget has more than one Ink descendant?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added some prose about this

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scaffold creates a Material widget, so don't most transitions occur "inside Material"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup. I clarified this a bit to say that it's specifically a problem if you move ink features around.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the advice we want to provide is: don't allow the layout to be defined by the image's actual size. Either constrain the size of the image or specify it explicitly with width and height.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about this:

  /// Either the [width] and [height] arguments should be specified, or the                                                             
  /// widget should be placed in a context that sets tight layout constraints.                                                          
  /// Otherwise, the image dimensions will change as the image is loaded, which                                                         
  /// will result in ugly layout changes.                                                                                               ```

@Hixie
Copy link
Contributor Author

Hixie commented Jan 6, 2018

Updated per comments, PTAL.

@Hixie Hixie force-pushed the ink_decoration branch 2 times, most recently from a5f66c9 to d56374e Compare January 9, 2018 03:33
@HansMuller
Copy link
Contributor

LGTM. There's merging to be done because of the ripple changes (sorry).

@Hixie
Copy link
Contributor Author

Hixie commented Jan 10, 2018

Merged. Will land on green. Thanks for the review.

This provides a way to draw colors, images, and general decorations on Material widgets, without interfering with InkWells that are further descendants of the widget.

This thus provides a cleaner way to solve the issue of FlatButtons and InkWells not working when placed over Image widgets than the old hack of introducing a transparency Material.

Fixes flutter#3782.

Also, some fixes to documentation, and remove a redundant property on the Image widget.
@Hixie Hixie merged commit 09270dc into flutter:master Jan 11, 2018
@Hixie Hixie deleted the ink_decoration branch January 11, 2018 00:42
DaveShuckerow pushed a commit to DaveShuckerow/flutter that referenced this pull request May 14, 2018
This provides a way to draw colors, images, and general decorations on Material widgets, without interfering with InkWells that are further descendants of the widget.

This thus provides a cleaner way to solve the issue of FlatButtons and InkWells not working when placed over Image widgets than the old hack of introducing a transparency Material.

Fixes flutter#3782.

Also, some fixes to documentation, and remove a redundant property on the Image widget.
@zoechi zoechi added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 26, 2019
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

InkWell and FlatButton do not ripple when inside a container with opaque background

5 participants