From 2e3a90c410c67da4e4a7c0ca794c0d01cd719258 Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Sat, 17 Jun 2023 16:20:05 +0200 Subject: [PATCH 1/3] Improve the animation and the accessibility of the `ExplanationWidget` --- .../lib/pages/product/explanation_widget.dart | 90 +++++++++++++------ 1 file changed, 63 insertions(+), 27 deletions(-) diff --git a/packages/smooth_app/lib/pages/product/explanation_widget.dart b/packages/smooth_app/lib/pages/product/explanation_widget.dart index 0529b6b9a12..ff6d8501ffb 100644 --- a/packages/smooth_app/lib/pages/product/explanation_widget.dart +++ b/packages/smooth_app/lib/pages/product/explanation_widget.dart @@ -15,47 +15,83 @@ class _ExplanationWidgetState extends State { @override Widget build(BuildContext context) { - if (!_expanded) { - return _wrapListTitle( - ListTile( - title: Text( - widget.explanations, - maxLines: 1, - overflow: TextOverflow.ellipsis, + return Semantics( + value: widget.explanations, + child: InkWell( + excludeFromSemantics: true, + onTap: () => setState(() => _expanded = !_expanded), + child: AnimatedCrossFade( + duration: const Duration(milliseconds: 200), + crossFadeState: + _expanded ? CrossFadeState.showFirst : CrossFadeState.showSecond, + firstChild: _ExpandedExplanation( + explanations: widget.explanations, + ), + secondChild: _CollapsedExplanation( + explanations: widget.explanations, ), - trailing: const Icon(Icons.info_outline), ), - onTap: () => setState(() => _expanded = true), - ); - } + ), + ); + } +} + +class _CollapsedExplanation extends StatelessWidget { + const _CollapsedExplanation({ + required this.explanations, + super.key, + }); + + final String explanations; + + @override + Widget build(BuildContext context) { + return ListTile( + title: Text( + explanations, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + trailing: const Icon(Icons.info_outline), + ); + } +} + +class _ExpandedExplanation extends StatelessWidget { + const _ExpandedExplanation({ + required this.explanations, + super.key, + }); + + final String explanations; + + @override + Widget build(BuildContext context) { final List result = []; - final List split = widget.explanations.split('\n'); + final List split = explanations.split('\n'); + bool first = true; for (final String item in split) { if (first) { first = false; result.add( - _wrapListTitle( - ListTile( - title: Text(item), - trailing: const Icon(Icons.expand_less), + ListTile( + title: Text(item), + // There is no collapse icon, so we just flip the expand one + trailing: const RotatedBox( + quarterTurns: 2, + child: Icon(Icons.expand_circle_down_outlined), ), - onTap: () => setState(() => _expanded = false), ), ); } else { result.add(ListTile(title: Text(item))); } } - return Column(children: result); - } - Widget _wrapListTitle(final ListTile child, {VoidCallback? onTap}) => - Material( - type: MaterialType.transparency, - child: InkWell( - onTap: onTap, - child: child, - ), - ); + return Column( + mainAxisSize: MainAxisSize.min, + children: result, + ); + } } From 7a68732337ac32d6b1c0ddae6c5c274111df597d Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Sat, 17 Jun 2023 16:27:27 +0200 Subject: [PATCH 2/3] A small fix for a11n --- .../lib/pages/product/explanation_widget.dart | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/smooth_app/lib/pages/product/explanation_widget.dart b/packages/smooth_app/lib/pages/product/explanation_widget.dart index ff6d8501ffb..dfeddeaa30d 100644 --- a/packages/smooth_app/lib/pages/product/explanation_widget.dart +++ b/packages/smooth_app/lib/pages/product/explanation_widget.dart @@ -17,18 +17,21 @@ class _ExplanationWidgetState extends State { Widget build(BuildContext context) { return Semantics( value: widget.explanations, - child: InkWell( - excludeFromSemantics: true, - onTap: () => setState(() => _expanded = !_expanded), - child: AnimatedCrossFade( - duration: const Duration(milliseconds: 200), - crossFadeState: - _expanded ? CrossFadeState.showFirst : CrossFadeState.showSecond, - firstChild: _ExpandedExplanation( - explanations: widget.explanations, - ), - secondChild: _CollapsedExplanation( - explanations: widget.explanations, + header: true, + child: BlockSemantics( + child: InkWell( + onTap: () => setState(() => _expanded = !_expanded), + child: AnimatedCrossFade( + duration: const Duration(milliseconds: 200), + crossFadeState: _expanded + ? CrossFadeState.showFirst + : CrossFadeState.showSecond, + firstChild: _ExpandedExplanation( + explanations: widget.explanations, + ), + secondChild: _CollapsedExplanation( + explanations: widget.explanations, + ), ), ), ), From b5b8e1662e9bd16a5badd4caac49653a1737c503 Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Sat, 17 Jun 2023 16:28:00 +0200 Subject: [PATCH 3/3] Remove the unused Keys --- packages/smooth_app/lib/pages/product/explanation_widget.dart | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/smooth_app/lib/pages/product/explanation_widget.dart b/packages/smooth_app/lib/pages/product/explanation_widget.dart index dfeddeaa30d..4627018c314 100644 --- a/packages/smooth_app/lib/pages/product/explanation_widget.dart +++ b/packages/smooth_app/lib/pages/product/explanation_widget.dart @@ -42,7 +42,6 @@ class _ExplanationWidgetState extends State { class _CollapsedExplanation extends StatelessWidget { const _CollapsedExplanation({ required this.explanations, - super.key, }); final String explanations; @@ -63,7 +62,6 @@ class _CollapsedExplanation extends StatelessWidget { class _ExpandedExplanation extends StatelessWidget { const _ExpandedExplanation({ required this.explanations, - super.key, }); final String explanations;