Closed
Description
Problem arose from a user asking me how to create a button with a gradient. The button was made using a piece of material with an Inkwell inside of it.
Something like this
Material(
child: InkWell(
onTap: () {},
child: Container(
width: 105.0,
height: 55.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(0.0, -1.0),
end: Alignment(0.0, 0.6),
colors: <Color>[
Colors.purple,
Color(0x00ef5f50),
],
),
),
child: Center(child: Text('Button Text')),
),
)),
));The inkwell only shows up with very specific colors being used on the gradient. In the example above, the inkwell actually shows in the animation, however, if I use a darker bottom color like Colors.red the inkwell does not show.
It is almost as though the paint just covers the inkwell completely depending on what color is used which is not the expected behavior
Steps to Reproduce
- Create a button that looks like this:
Material(
child: InkWell(
onTap: () {},
child: Container(
width: 105.0,
height: 55.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(0.0, -1.0),
end: Alignment(0.0, 0.6),
colors: <Color>[
Colors.purple,
Color(0x00ef5f50),
],
),
),
child: Center(child: Text('Button Text')),
),
)),
));2, Change the bottom color to Color.white or Color.red.
3. You'll notice that the inkwell does not respond to user clicks anymore even if you make the splash color really dark.
Logs
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v0.5.2-pre.42, on Microsoft Windows [Version 10.0.17134.81], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[√] Android Studio (version 3.0)
[√] Android Studio (version 3.1)
[√] IntelliJ IDEA Ultimate Edition (version 2017.3)
[√] IntelliJ IDEA Ultimate Edition (version 2018.1)
Metadata
Metadata
Assignees
Labels
No labels