Skip to content

Commit c305f1f

Browse files
brahim-guaalibrahim-guaali
authored
Fix DecoratedSliver sample to avoid antialiasing gap (flutter#179848)
## Description The DecoratedSliver sample was showing an antialiasing gap between two adjacent slivers when scrolling on desktop platforms (as reported in flutter#166822). The fix uses a single `DecoratedSliver` wrapping a `SliverMainAxisGroup` instead of two separate `DecoratedSliver` widgets. This eliminates the gap while still demonstrating the widget effectively. Fixes flutter#166822 ## 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]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] All existing and new tests are passing. [Contributor Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [![talabat.com contributions](https://img.shields.io/badge/talabat.com-contributions-FF5A00?style=flat&logo=flutter&logoColor=white)](https://www.talabat.com) [![Talabat Flutter PRs](https://img.shields.io/badge/Talabat_Flutter_PRs-10%20merged-97ca00?style=flat&logo=flutter&logoColor=white)](https://github.com/search?q=org%3Aflutter+talabat&type=pullrequests)
1 parent 50ab280 commit c305f1f

2 files changed

Lines changed: 89 additions & 82 deletions

File tree

‎examples/api/lib/widgets/sliver/decorated_sliver.0.dart‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -33,31 +33,6 @@ class SliverDecorationExample extends StatelessWidget {
3333
return CustomScrollView(
3434
slivers: <Widget>[
3535
DecoratedSliver(
36-
key: const ValueKey<String>('radial-gradient'),
37-
decoration: const BoxDecoration(
38-
gradient: RadialGradient(
39-
center: Alignment(-0.5, -0.6),
40-
radius: 0.15,
41-
colors: <Color>[Color(0xFFEEEEEE), Color(0xFF111133)],
42-
stops: <double>[0.4, 0.8],
43-
),
44-
),
45-
sliver: SliverList.list(
46-
children: <Widget>[
47-
SizedBox(
48-
height: 200.0,
49-
child: Center(
50-
child: Text(
51-
'A moon on a night sky',
52-
style: Theme.of(context).textTheme.titleLarge,
53-
),
54-
),
55-
),
56-
],
57-
),
58-
),
59-
DecoratedSliver(
60-
key: const ValueKey<String>('linear-gradient'),
6136
decoration: const BoxDecoration(
6237
gradient: LinearGradient(
6338
begin: Alignment.topCenter,
@@ -74,19 +49,42 @@ class SliverDecorationExample extends StatelessWidget {
7449
],
7550
),
7651
),
77-
sliver: SliverList.list(
78-
children: <Widget>[
79-
SizedBox(
80-
height: 500.0,
52+
sliver: SliverMainAxisGroup(
53+
slivers: <Widget>[
54+
SliverToBoxAdapter(
8155
child: Container(
82-
alignment: Alignment.topCenter,
83-
padding: const EdgeInsets.only(top: 56.0),
84-
child: Text(
85-
'A blue sky',
86-
style: Theme.of(context).textTheme.titleLarge,
56+
height: 200.0,
57+
decoration: const BoxDecoration(
58+
gradient: RadialGradient(
59+
center: Alignment(-0.5, -0.6),
60+
radius: 0.15,
61+
colors: <Color>[Color(0xFFEEEEEE), Color(0xFF111133)],
62+
stops: <double>[0.4, 0.8],
63+
),
64+
),
65+
child: Center(
66+
child: Text(
67+
'A moon on a night sky',
68+
style: Theme.of(context).textTheme.titleLarge,
69+
),
8770
),
8871
),
8972
),
73+
SliverList.list(
74+
children: <Widget>[
75+
SizedBox(
76+
height: 500.0,
77+
child: Container(
78+
alignment: Alignment.topCenter,
79+
padding: const EdgeInsets.only(top: 56.0),
80+
child: Text(
81+
'A blue sky',
82+
style: Theme.of(context).textTheme.titleLarge,
83+
),
84+
),
85+
),
86+
],
87+
),
9088
],
9189
),
9290
),

‎examples/api/test/widgets/sliver/decorated_sliver.0_test.dart‎

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -18,57 +18,66 @@ void main() {
1818
expect(blueSkyText, findsOneWidget);
1919
});
2020

21-
testWidgets(
22-
'Verify the sliver with key `radial-gradient` has a RadialGradient',
23-
(WidgetTester tester) async {
24-
await tester.pumpWidget(const example.SliverDecorationExampleApp());
21+
testWidgets('Verify the DecoratedSliver has a LinearGradient', (
22+
WidgetTester tester,
23+
) async {
24+
await tester.pumpWidget(const example.SliverDecorationExampleApp());
2525

26-
final DecoratedSliver radialDecoratedSliver = tester
27-
.widget<DecoratedSliver>(
28-
find.byKey(const ValueKey<String>('radial-gradient')),
29-
);
30-
expect(
31-
radialDecoratedSliver.decoration,
32-
const BoxDecoration(
33-
gradient: RadialGradient(
34-
center: Alignment(-0.5, -0.6),
35-
radius: 0.15,
36-
colors: <Color>[Color(0xFFEEEEEE), Color(0xFF111133)],
37-
stops: <double>[0.4, 0.8],
38-
),
26+
final DecoratedSliver decoratedSliver = tester.widget<DecoratedSliver>(
27+
find.byType(DecoratedSliver),
28+
);
29+
expect(
30+
decoratedSliver.decoration,
31+
const BoxDecoration(
32+
gradient: LinearGradient(
33+
begin: Alignment.topCenter,
34+
end: Alignment.bottomCenter,
35+
colors: <Color>[
36+
Color(0xFF111133),
37+
Color(0xFF1A237E),
38+
Color(0xFF283593),
39+
Color(0xFF3949AB),
40+
Color(0xFF3F51B5),
41+
Color(0xFF1976D2),
42+
Color(0xFF1E88E5),
43+
Color(0xFF42A5F5),
44+
],
3945
),
40-
);
41-
},
42-
);
46+
),
47+
);
48+
});
4349

44-
testWidgets(
45-
'Verify that the sliver with key `linear-gradient` has a LinearGradient',
46-
(WidgetTester tester) async {
47-
await tester.pumpWidget(const example.SliverDecorationExampleApp());
50+
testWidgets('Verify the moon section has a RadialGradient', (
51+
WidgetTester tester,
52+
) async {
53+
await tester.pumpWidget(const example.SliverDecorationExampleApp());
4854

49-
final DecoratedSliver linearDecoratedSliver = tester
50-
.widget<DecoratedSliver>(
51-
find.byKey(const ValueKey<String>('linear-gradient')),
52-
);
53-
expect(
54-
linearDecoratedSliver.decoration,
55-
const BoxDecoration(
56-
gradient: LinearGradient(
57-
begin: Alignment.topCenter,
58-
end: Alignment.bottomCenter,
59-
colors: <Color>[
60-
Color(0xFF111133),
61-
Color(0xFF1A237E),
62-
Color(0xFF283593),
63-
Color(0xFF3949AB),
64-
Color(0xFF3F51B5),
65-
Color(0xFF1976D2),
66-
Color(0xFF1E88E5),
67-
Color(0xFF42A5F5),
68-
],
69-
),
55+
final Container moonContainer = tester.widget<Container>(
56+
find
57+
.ancestor(
58+
of: find.text('A moon on a night sky'),
59+
matching: find.byType(Container),
60+
)
61+
.first,
62+
);
63+
expect(
64+
moonContainer.decoration,
65+
const BoxDecoration(
66+
gradient: RadialGradient(
67+
center: Alignment(-0.5, -0.6),
68+
radius: 0.15,
69+
colors: <Color>[Color(0xFFEEEEEE), Color(0xFF111133)],
70+
stops: <double>[0.4, 0.8],
7071
),
71-
);
72-
},
73-
);
72+
),
73+
);
74+
});
75+
76+
testWidgets('Verify that SliverMainAxisGroup is used to group the slivers', (
77+
WidgetTester tester,
78+
) async {
79+
await tester.pumpWidget(const example.SliverDecorationExampleApp());
80+
81+
expect(find.byType(SliverMainAxisGroup), findsOneWidget);
82+
});
7483
}

0 commit comments

Comments
 (0)