Unverified Commit b28bdabc authored by rami-a's avatar rami-a Committed by GitHub

Minor UI tweaks to Cards demo based on internal feedback (#28215)

* Minor UI tweaks to Cards demo based on internal feedback

* Analyzer

* Tweak ink ripple opacity

* Address PR feedback
parent b73dd0e8
...@@ -135,7 +135,10 @@ class TappableTravelDestinationItem extends StatelessWidget { ...@@ -135,7 +135,10 @@ class TappableTravelDestinationItem extends StatelessWidget {
onTap: () { onTap: () {
print('Card was tapped'); print('Card was tapped');
}, },
splashColor: Theme.of(context).colorScheme.primary.withAlpha(30), // Generally, material cards use onSurface with 12% opacity for the pressed state.
splashColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.12),
// Generally, material cards do not have a highlight overlay.
highlightColor: Colors.transparent,
child: TravelDestinationContent(destination: destination), child: TravelDestinationContent(destination: destination),
), ),
), ),
...@@ -167,6 +170,8 @@ class _SelectableTravelDestinationItemState extends State<SelectableTravelDestin ...@@ -167,6 +170,8 @@ class _SelectableTravelDestinationItemState extends State<SelectableTravelDestin
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final ColorScheme colorScheme = Theme.of(context).colorScheme;
return SafeArea( return SafeArea(
top: false, top: false,
bottom: false, bottom: false,
...@@ -188,27 +193,32 @@ class _SelectableTravelDestinationItemState extends State<SelectableTravelDestin ...@@ -188,27 +193,32 @@ class _SelectableTravelDestinationItemState extends State<SelectableTravelDestin
_isSelected = !_isSelected; _isSelected = !_isSelected;
}); });
}, },
splashColor: Theme.of(context).colorScheme.primary.withAlpha(30), // Generally, material cards use onSurface with 12% opacity for the pressed state.
splashColor: colorScheme.onSurface.withOpacity(0.12),
// Generally, material cards do not have a highlight overlay.
highlightColor: Colors.transparent,
child: Stack( child: Stack(
children: <Widget>[ children: <Widget>[
Container( Container(
color: _isSelected color: _isSelected
? Theme.of(context).colorScheme.primary.withAlpha(41) // Generally, material cards use primary with 8% opacity for the selected state.
// See: https://material.io/design/interaction/states.html#anatomy
? colorScheme.primary.withOpacity(0.08)
: Colors.transparent, : Colors.transparent,
), ),
TravelDestinationContent(destination: widget.destination), TravelDestinationContent(destination: widget.destination),
Align( Align(
alignment: Alignment.topRight, alignment: Alignment.topRight,
child: Padding( child: Padding(
padding: const EdgeInsets.all(4.0), padding: const EdgeInsets.all(8.0),
child: Icon( child: Icon(
Icons.check_circle, Icons.check_circle,
color: _isSelected ? Colors.white : Colors.transparent, color: _isSelected ? colorScheme.primary : Colors.transparent,
), ),
) )
), ),
], ],
) ),
), ),
), ),
), ),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment