Skip to content

Add Decoration to ButtonStyleButton's styling #130335

@williamhjcho

Description

@williamhjcho

Is there an existing issue for this?

Use case

Hello 👋

For our specific use case, we wanted to add a (radial) gradient background to the button.

What we tried

Using the button's child property required us to both remove the button's paddings (otherwise it doesn't touch the button's edges) and to expand it internally (which was causing layout issues).

What we had to do to make it work

  • Copied the whole ButtonStyleButton implementation,
  • replaced this ConstrainedBox for a Container
  • Created a subclass of ButtonStyle with an added final MaterialStateProperty<Decoration?>? decoration property (when the button is disabled, the gradient changes color as well)
  • added a resolved effectiveDecoration & insert it to the Container above

Proposal

The existing ButtonStyleButton & ButtonStyle already allow many configuration options.

Suggested proposals would be to add a dedicated Gradient property, or to be more generic and use a Decoration property instead.
One important note on my solution: since the Container is above Material, which handles the clipping behavior, the Decoration might also need special handling to the resolved shape.
One simple way would be just to check for an existing resolved decoration and do conditional widget wrapping(s)?

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions