Skip to content

Commit

Permalink
Fix shape and collapsedShape isn't applied to ExpansionTile's s…
Browse files Browse the repository at this point in the history
…plash 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">
  • Loading branch information
TahaTesser authored Jan 22, 2024
1 parent 634b326 commit 9574d58
Show file tree
Hide file tree
Showing 3 changed files with 270 additions and 104 deletions.
44 changes: 33 additions & 11 deletions packages/flutter/lib/src/material/expansion_tile.dart
Original file line number Diff line number Diff line change
Expand Up @@ -475,8 +475,11 @@ class ExpansionTile extends StatefulWidget {

/// {@macro flutter.material.Material.clipBehavior}
///
/// If this is not null and a custom collapsed or expanded shape is provided,
/// the value of [clipBehavior] will be used to clip the expansion tile.
///
/// If this property is null, the [ExpansionTileThemeData.clipBehavior] is used. If that
/// is also null, a [Clip.none] is used
/// is also null, defaults to [Clip.antiAlias].
///
/// See also:
///
Expand Down Expand Up @@ -656,11 +659,12 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
Widget _buildChildren(BuildContext context, Widget? child) {
final ThemeData theme = Theme.of(context);
final ExpansionTileThemeData expansionTileTheme = ExpansionTileTheme.of(context);
final Color backgroundColor = _backgroundColor.value ?? expansionTileTheme.backgroundColor ?? Colors.transparent;
final ShapeBorder expansionTileBorder = _border.value ?? const Border(
top: BorderSide(color: Colors.transparent),
bottom: BorderSide(color: Colors.transparent),
);
final Clip clipBehavior = widget.clipBehavior ?? expansionTileTheme.clipBehavior ?? Clip.none;
top: BorderSide(color: Colors.transparent),
bottom: BorderSide(color: Colors.transparent),
);
final Clip clipBehavior = widget.clipBehavior ?? expansionTileTheme.clipBehavior ?? Clip.antiAlias;
final MaterialLocalizations localizations = MaterialLocalizations.of(context);
final String onTapHint = _isExpanded
? localizations.expansionTileExpandedTapHint
Expand All @@ -679,12 +683,13 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
break;
}

return Container(
clipBehavior: clipBehavior,
decoration: ShapeDecoration(
color: _backgroundColor.value ?? expansionTileTheme.backgroundColor ?? Colors.transparent,
shape: expansionTileBorder,
),
final Decoration decoration = ShapeDecoration(
color: backgroundColor,
shape: expansionTileBorder,
);

final Widget tile = Padding(
padding: decoration.padding,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expand Down Expand Up @@ -720,6 +725,23 @@ class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProvider
],
),
);

final bool isShapeProvided = widget.shape != null || expansionTileTheme.shape != null
|| widget.collapsedShape != null || expansionTileTheme.collapsedShape != null;

if (isShapeProvided) {
return Material(
clipBehavior: clipBehavior,
color: backgroundColor,
shape: expansionTileBorder,
child: tile,
);
}

return DecoratedBox(
decoration: decoration,
child: tile,
);
}

@override
Expand Down
Loading

0 comments on commit 9574d58

Please sign in to comment.