Skip to content

Commit 9574d58

Browse files
authored
Fix shape and collapsedShape isn't applied to ExpansionTile's splash ink (#141777)
This updates the previous attempt flutter/flutter#135855 and removes the complications when testing M3 ink sparkle effect. Thanks to this [PR](flutter/flutter#138757) by @Piinks fixes [ExpansionTile InkSplash doesn't respect Shape's borderRadius](flutter/flutter#125779) fixes [`ExpansionTile.backgroundColor` & `ExpansionTile.collapsedBackgroundColor` removes splash effect](flutter/flutter#107113) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: Example(), ); } } class Example extends StatelessWidget { const Example({super.key}); @OverRide Widget build(BuildContext context) { return const Scaffold( body: Center( child: Padding( padding: EdgeInsets.symmetric(horizontal: 24.0), child: ExpansionTile( collapsedBackgroundColor: Color(0x25ff0000), backgroundColor: Color(0x250000ff), collapsedShape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(30.0)), side: BorderSide(color: Colors.black, width: 2.0), ), shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(30.0)), side: BorderSide(color: Colors.black, width: 2.0), ), clipBehavior: Clip.hardEdge, title: Text('Expansion Tile'), children: <Widget>[ FlutterLogo(size: 50), FlutterLogo(size: 50), FlutterLogo(size: 50), FlutterLogo(size: 50), ], ), )), ); } } ``` </details> ### Before <img width="789" alt="Screenshot 2024-01-18 at 18 16 15" src="https://github.com/flutter/flutter/assets/48603081/8c6a6f1e-6986-4acf-8dec-e223a682c0d7"> <img width="789" alt="Screenshot 2024-01-18 at 18 16 44" src="https://github.com/flutter/flutter/assets/48603081/f55f6a26-2128-48a1-b24d-3c14e4f6ecdc"> ### After <img width="789" alt="Screenshot 2024-01-18 at 18 20 27" src="https://github.com/flutter/flutter/assets/48603081/7ec8b888-7319-460d-8488-9cd44c9246a6"> <img width="789" alt="Screenshot 2024-01-18 at 18 20 53" src="https://github.com/flutter/flutter/assets/48603081/80d66d5b-7eb2-4f47-ab4d-d7f469a731fa">
1 parent 634b326 commit 9574d58

File tree

3 files changed

+270
-104
lines changed

3 files changed

+270
-104
lines changed

packages/flutter/lib/src/material/expansion_tile.dart

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -475,8 +475,11 @@ class ExpansionTile extends StatefulWidget {
475475

476476
/// {@macro flutter.material.Material.clipBehavior}
477477
///
478+
/// If this is not null and a custom collapsed or expanded shape is provided,
479+
/// the value of [clipBehavior] will be used to clip the expansion tile.
480+
///
478481
/// If this property is null, the [ExpansionTileThemeData.clipBehavior] is used. If that
479-
/// is also null, a [Clip.none] is used
482+
/// is also null, defaults to [Clip.antiAlias].
480483
///
481484
/// See also:
482485
///
@@ -656,11 +659,12 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
656659
Widget _buildChildren(BuildContext context, Widget? child) {
657660
final ThemeData theme = Theme.of(context);
658661
final ExpansionTileThemeData expansionTileTheme = ExpansionTileTheme.of(context);
662+
final Color backgroundColor = _backgroundColor.value ?? expansionTileTheme.backgroundColor ?? Colors.transparent;
659663
final ShapeBorder expansionTileBorder = _border.value ?? const Border(
660-
top: BorderSide(color: Colors.transparent),
661-
bottom: BorderSide(color: Colors.transparent),
662-
);
663-
final Clip clipBehavior = widget.clipBehavior ?? expansionTileTheme.clipBehavior ?? Clip.none;
664+
top: BorderSide(color: Colors.transparent),
665+
bottom: BorderSide(color: Colors.transparent),
666+
);
667+
final Clip clipBehavior = widget.clipBehavior ?? expansionTileTheme.clipBehavior ?? Clip.antiAlias;
664668
final MaterialLocalizations localizations = MaterialLocalizations.of(context);
665669
final String onTapHint = _isExpanded
666670
? localizations.expansionTileExpandedTapHint
@@ -679,12 +683,13 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
679683
break;
680684
}
681685

682-
return Container(
683-
clipBehavior: clipBehavior,
684-
decoration: ShapeDecoration(
685-
color: _backgroundColor.value ?? expansionTileTheme.backgroundColor ?? Colors.transparent,
686-
shape: expansionTileBorder,
687-
),
686+
final Decoration decoration = ShapeDecoration(
687+
color: backgroundColor,
688+
shape: expansionTileBorder,
689+
);
690+
691+
final Widget tile = Padding(
692+
padding: decoration.padding,
688693
child: Column(
689694
mainAxisSize: MainAxisSize.min,
690695
children: <Widget>[
@@ -720,6 +725,23 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
720725
],
721726
),
722727
);
728+
729+
final bool isShapeProvided = widget.shape != null || expansionTileTheme.shape != null
730+
|| widget.collapsedShape != null || expansionTileTheme.collapsedShape != null;
731+
732+
if (isShapeProvided) {
733+
return Material(
734+
clipBehavior: clipBehavior,
735+
color: backgroundColor,
736+
shape: expansionTileBorder,
737+
child: tile,
738+
);
739+
}
740+
741+
return DecoratedBox(
742+
decoration: decoration,
743+
child: tile,
744+
);
723745
}
724746

725747
@override

0 commit comments

Comments
 (0)