Add itemClipBehavior property for CarouselView's children (#175324)
Resolves #175218
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
If you need help, consider asking for advice on the #hackers-new channel
on [Discord].
**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.
<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
diff --git a/packages/flutter/lib/src/material/carousel.dart b/packages/flutter/lib/src/material/carousel.dart
index ae5cdd5..c8c18dd 100644
--- a/packages/flutter/lib/src/material/carousel.dart
+++ b/packages/flutter/lib/src/material/carousel.dart
@@ -134,6 +134,7 @@
this.backgroundColor,
this.elevation,
this.shape,
+ this.itemClipBehavior,
this.overlayColor,
this.itemSnapping = false,
this.shrinkExtent = 0.0,
@@ -194,6 +195,7 @@
this.backgroundColor,
this.elevation,
this.shape,
+ this.itemClipBehavior,
this.overlayColor,
this.itemSnapping = false,
this.shrinkExtent = 0.0,
@@ -230,6 +232,14 @@
/// of 28.0.
final ShapeBorder? shape;
+ /// The clip behavior for each carousel item.
+ ///
+ /// The item content will be clipped (or not) according to this option.
+ /// Refer to the [Clip] enum for more details on the different clip options.
+ ///
+ /// Defaults to [Clip.antiAlias].
+ final Clip? itemClipBehavior;
+
/// The highlight color to indicate the carousel items are in pressed, hovered
/// or focused states.
///
@@ -415,6 +425,8 @@
widget.shape ??
carouselTheme.shape ??
const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(28.0)));
+ final Clip effectiveItemClipBehavior =
+ widget.itemClipBehavior ?? carouselTheme.itemClipBehavior ?? Clip.antiAlias;
final WidgetStateProperty<Color?> effectiveOverlayColor =
widget.overlayColor ??
carouselTheme.overlayColor ??
@@ -453,7 +465,7 @@
return Padding(
padding: effectivePadding,
child: Material(
- clipBehavior: Clip.antiAlias,
+ clipBehavior: effectiveItemClipBehavior,
color: effectiveBackgroundColor,
elevation: effectiveElevation,
shape: effectiveShape,
diff --git a/packages/flutter/lib/src/material/carousel_theme.dart b/packages/flutter/lib/src/material/carousel_theme.dart
index 20b8075..ddcaa11 100644
--- a/packages/flutter/lib/src/material/carousel_theme.dart
+++ b/packages/flutter/lib/src/material/carousel_theme.dart
@@ -39,6 +39,7 @@
this.overlayColor,
this.shape,
this.padding,
+ this.itemClipBehavior,
});
/// The amount of space to surround each carousel item with.
@@ -63,6 +64,14 @@
/// Overrides the default value for [CarouselView.shape].
final OutlinedBorder? shape;
+ /// The clip behavior for each carousel item.
+ ///
+ /// The item content will be clipped (or not) according to this option.
+ /// Refer to the [Clip] enum for more details on the different clip options.
+ ///
+ /// Overrides the default value for [CarouselView.itemClipBehavior].
+ final Clip? itemClipBehavior;
+
/// The highlight color to indicate the carousel items are in pressed, hovered
/// or focused states.
///
@@ -77,6 +86,7 @@
OutlinedBorder? shape,
WidgetStateProperty<Color?>? overlayColor,
EdgeInsets? padding,
+ Clip? itemClipBehavior,
}) {
return CarouselViewThemeData(
backgroundColor: backgroundColor ?? this.backgroundColor,
@@ -84,6 +94,7 @@
shape: shape ?? this.shape,
overlayColor: overlayColor ?? this.overlayColor,
padding: padding ?? this.padding,
+ itemClipBehavior: itemClipBehavior ?? this.itemClipBehavior,
);
}
@@ -105,11 +116,13 @@
Color.lerp,
),
padding: EdgeInsets.lerp(a?.padding, b?.padding, t),
+ itemClipBehavior: t < 0.5 ? a?.itemClipBehavior : b?.itemClipBehavior,
);
}
@override
- int get hashCode => Object.hash(backgroundColor, elevation, shape, overlayColor, padding);
+ int get hashCode =>
+ Object.hash(backgroundColor, elevation, shape, overlayColor, padding, itemClipBehavior);
@override
bool operator ==(Object other) {
@@ -124,7 +137,8 @@
other.elevation == elevation &&
other.shape == shape &&
other.overlayColor == overlayColor &&
- other.padding == padding;
+ other.padding == padding &&
+ other.itemClipBehavior == itemClipBehavior;
}
@override
@@ -141,6 +155,7 @@
),
);
properties.add(DiagnosticsProperty<EdgeInsets>('padding', padding, defaultValue: null));
+ properties.add(EnumProperty<Clip>('itemClipBehavior', itemClipBehavior, defaultValue: null));
}
}
diff --git a/packages/flutter/test/material/carousel_test.dart b/packages/flutter/test/material/carousel_test.dart
index ef0a0e9..2c9d35b 100644
--- a/packages/flutter/test/material/carousel_test.dart
+++ b/packages/flutter/test/material/carousel_test.dart
@@ -1890,6 +1890,154 @@
}
});
});
+
+ group('CarouselView item clipBehavior', () {
+ testWidgets('CarouselView Item clipBehavior defaults to Clip.antiAlias', (
+ WidgetTester tester,
+ ) async {
+ await tester.pumpWidget(
+ MaterialApp(
+ home: Scaffold(
+ body: CarouselView(
+ itemExtent: 350,
+ children: List<Widget>.generate(3, (int index) {
+ return Text('Item $index');
+ }),
+ ),
+ ),
+ ),
+ );
+
+ final Material material = tester.firstWidget<Material>(
+ find.ancestor(of: find.text('Item 0'), matching: find.byType(Material)),
+ );
+
+ expect(material.clipBehavior, Clip.antiAlias);
+ });
+
+ testWidgets('CarouselView.weighted Item clipBehavior defaults to Clip.antiAlias', (
+ WidgetTester tester,
+ ) async {
+ await tester.pumpWidget(
+ MaterialApp(
+ home: Scaffold(
+ body: CarouselView.weighted(
+ flexWeights: const <int>[1, 1, 1],
+ children: List<Widget>.generate(3, (int index) {
+ return Text('Item $index');
+ }),
+ ),
+ ),
+ ),
+ );
+
+ final Material material = tester.firstWidget<Material>(
+ find.ancestor(of: find.text('Item 0'), matching: find.byType(Material)),
+ );
+
+ expect(material.clipBehavior, Clip.antiAlias);
+ });
+
+ testWidgets('CarouselView Item clipBehavior respects theme', (WidgetTester tester) async {
+ final ThemeData theme = ThemeData(
+ carouselViewTheme: const CarouselViewThemeData(itemClipBehavior: Clip.hardEdge),
+ );
+ await tester.pumpWidget(
+ MaterialApp(
+ theme: theme,
+ home: Scaffold(
+ body: CarouselView(
+ itemExtent: 350,
+ children: List<Widget>.generate(3, (int index) {
+ return Text('Item $index');
+ }),
+ ),
+ ),
+ ),
+ );
+
+ final Material material = tester.firstWidget<Material>(
+ find.ancestor(of: find.text('Item 0'), matching: find.byType(Material)),
+ );
+
+ expect(material.clipBehavior, Clip.hardEdge);
+ });
+
+ testWidgets('CarouselView.weighted item clipBehavior respects theme', (
+ WidgetTester tester,
+ ) async {
+ final ThemeData theme = ThemeData(
+ carouselViewTheme: const CarouselViewThemeData(itemClipBehavior: Clip.hardEdge),
+ );
+ await tester.pumpWidget(
+ MaterialApp(
+ theme: theme,
+ home: Scaffold(
+ body: CarouselView.weighted(
+ flexWeights: const <int>[1, 1, 1],
+ children: List<Widget>.generate(3, (int index) {
+ return Text('Item $index');
+ }),
+ ),
+ ),
+ ),
+ );
+
+ final Material material = tester.firstWidget<Material>(
+ find.ancestor(of: find.text('Item 0'), matching: find.byType(Material)),
+ );
+
+ expect(material.clipBehavior, Clip.hardEdge);
+ });
+ });
+
+ testWidgets('CarouselView item clipBehavior respects custom itemClipBehavior', (
+ WidgetTester tester,
+ ) async {
+ await tester.pumpWidget(
+ MaterialApp(
+ home: Scaffold(
+ body: CarouselView(
+ itemExtent: 350,
+ itemClipBehavior: Clip.hardEdge,
+ children: List<Widget>.generate(3, (int index) {
+ return Text('Item $index');
+ }),
+ ),
+ ),
+ ),
+ );
+
+ final Material material = tester.firstWidget<Material>(
+ find.ancestor(of: find.text('Item 0'), matching: find.byType(Material)),
+ );
+
+ expect(material.clipBehavior, Clip.hardEdge);
+ });
+
+ testWidgets('CarouselView.weighted item clipBehavior respects custom itemClipBehavior', (
+ WidgetTester tester,
+ ) async {
+ await tester.pumpWidget(
+ MaterialApp(
+ home: Scaffold(
+ body: CarouselView.weighted(
+ flexWeights: const <int>[1, 1, 1],
+ itemClipBehavior: Clip.hardEdge,
+ children: List<Widget>.generate(3, (int index) {
+ return Text('Item $index');
+ }),
+ ),
+ ),
+ ),
+ );
+
+ final Material material = tester.firstWidget<Material>(
+ find.ancestor(of: find.text('Item 0'), matching: find.byType(Material)),
+ );
+
+ expect(material.clipBehavior, Clip.hardEdge);
+ });
}
Finder getItem(int index) {
diff --git a/packages/flutter/test/material/carousel_theme_test.dart b/packages/flutter/test/material/carousel_theme_test.dart
index 3f927fa..c0b0234 100644
--- a/packages/flutter/test/material/carousel_theme_test.dart
+++ b/packages/flutter/test/material/carousel_theme_test.dart
@@ -22,6 +22,7 @@
expect(carouselViewTheme.overlayColor, null);
expect(carouselViewTheme.padding, null);
expect(carouselViewTheme.shape, null);
+ expect(carouselViewTheme.itemClipBehavior, null);
});
testWidgets('Default CarouselViewThemeData debugFillProperties', (WidgetTester tester) async {
@@ -44,6 +45,7 @@
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(),
overlayColor: MaterialStatePropertyAll<Color>(Colors.red),
+ itemClipBehavior: Clip.hardEdge,
).debugFillProperties(builder);
final List<String> description = builder.properties
@@ -57,6 +59,7 @@
'shape: RoundedRectangleBorder(BorderSide(width: 0.0, style: none), BorderRadius.zero)',
'overlayColor: WidgetStatePropertyAll(${Colors.red})',
'padding: EdgeInsets.zero',
+ 'itemClipBehavior: hardEdge',
]);
});
@@ -97,8 +100,8 @@
expect(material.elevation, carouselViewTheme.elevation);
expect(material.shape, carouselViewTheme.shape);
expect(material.borderRadius, null);
- expect(material.clipBehavior, Clip.antiAlias);
expect(inkWell.overlayColor, carouselViewTheme.overlayColor);
+ expect(material.clipBehavior, carouselViewTheme.itemClipBehavior);
});
testWidgets('Widgets properties override theme', (WidgetTester tester) async {
@@ -110,6 +113,8 @@
borderRadius: BorderRadius.all(Radius.circular(10)),
);
const WidgetStateProperty<Color?> overlayColor = MaterialStatePropertyAll<Color>(Colors.green);
+ const Clip itemClipBehavior = Clip.hardEdge;
+
await tester.pumpWidget(
MaterialApp(
theme: ThemeData(carouselViewTheme: carouselViewTheme),
@@ -122,6 +127,7 @@
shape: shape,
overlayColor: overlayColor,
itemExtent: 100,
+ itemClipBehavior: itemClipBehavior,
children: <Widget>[SizedBox(width: 100, height: 100)],
),
),
@@ -150,6 +156,7 @@
expect(material.elevation, elevation);
expect(material.shape, shape);
expect(inkWell.overlayColor, overlayColor);
+ expect(material.clipBehavior, Clip.hardEdge);
});
testWidgets('CarouselViewTheme can override Theme.carouselViewTheme', (
@@ -160,6 +167,7 @@
const double globalElevation = 5.0;
const EdgeInsets globalPadding = EdgeInsets.all(10.0);
const OutlinedBorder globalShape = RoundedRectangleBorder();
+ const Clip globalItemClipBehavior = Clip.hardEdge;
const Color localBackgroundColor = Color(0xffff0000);
const Color localOverlayColor = Color(0xffffffff);
@@ -168,6 +176,7 @@
const OutlinedBorder localShape = RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
);
+ const Clip localItemClipBehavior = Clip.antiAlias;
await tester.pumpWidget(
MaterialApp(
@@ -178,6 +187,7 @@
elevation: globalElevation,
padding: globalPadding,
shape: globalShape,
+ itemClipBehavior: globalItemClipBehavior,
),
),
home: const Scaffold(
@@ -189,6 +199,7 @@
elevation: localElevation,
padding: localPadding,
shape: localShape,
+ itemClipBehavior: localItemClipBehavior,
),
child: CarouselView(
itemExtent: 100,
@@ -220,6 +231,7 @@
expect(material.elevation, localElevation);
expect(material.shape, localShape);
expect(inkWell.overlayColor?.resolve(<WidgetState>{}), localOverlayColor);
+ expect(material.clipBehavior, localItemClipBehavior);
});
}
@@ -229,6 +241,7 @@
const EdgeInsets padding = EdgeInsets.all(10.0);
const OutlinedBorder shape = RoundedRectangleBorder();
const WidgetStateProperty<Color?> overlayColor = MaterialStatePropertyAll<Color>(Colors.red);
+ const Clip itemClipBehavior = Clip.hardEdge;
return const CarouselViewThemeData(
backgroundColor: backgroundColor,
@@ -236,5 +249,6 @@
padding: padding,
shape: shape,
overlayColor: overlayColor,
+ itemClipBehavior: itemClipBehavior,
);
}
