Skip to content

Commit 6e5f39b

Browse files
authored
Create CarouselView widget - Part 1 (#148094)
This PR is to create an ["uncontained" Carousel](https://m3.material.io/components/carousel/specs#477de3a1-c9df-4742-baf3-bcd5eeb3764c). https://github.com/flutter/flutter/assets/36861262/947e6b2c-219f-4c8b-aba1-4a1a010221a7 The rest of the layouts can be achieved by using `Carousel.weighted`: QuncCccccc/flutter#2. The branch of `Caorusel.weighted` PR is based on this PR for relatively easer review. Will request reviews for the part 2 PR once this one is successfully merged in master.
1 parent 1cf6178 commit 6e5f39b

File tree

5 files changed

+1308
-0
lines changed

5 files changed

+1308
-0
lines changed
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
7+
/// Flutter code sample for [Carousel].
8+
9+
void main() => runApp(const CarouselExampleApp());
10+
11+
class CarouselExampleApp extends StatelessWidget {
12+
const CarouselExampleApp({super.key});
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return MaterialApp(
17+
debugShowCheckedModeBanner: false,
18+
home: Scaffold(
19+
appBar: AppBar(
20+
title: const Text('Carousel Sample'),
21+
),
22+
body: const CarouselExample(),
23+
),
24+
);
25+
}
26+
}
27+
28+
class CarouselExample extends StatefulWidget {
29+
const CarouselExample({super.key});
30+
31+
@override
32+
State<CarouselExample> createState() => _CarouselExampleState();
33+
}
34+
35+
class _CarouselExampleState extends State<CarouselExample> {
36+
@override
37+
Widget build(BuildContext context) {
38+
return Center(
39+
child: ConstrainedBox(
40+
constraints: const BoxConstraints(maxHeight: 200),
41+
child: CarouselView(
42+
itemExtent: 330,
43+
shrinkExtent: 200,
44+
children: List<Widget>.generate(20, (int index) {
45+
return UncontainedLayoutCard(index: index, label: 'Item $index');
46+
}),
47+
),
48+
),
49+
);
50+
}
51+
}
52+
53+
class UncontainedLayoutCard extends StatelessWidget {
54+
const UncontainedLayoutCard({
55+
super.key,
56+
required this.index,
57+
required this.label,
58+
});
59+
60+
final int index;
61+
final String label;
62+
63+
@override
64+
Widget build(BuildContext context) {
65+
return ColoredBox(
66+
color: Colors.primaries[index % Colors.primaries.length].withOpacity(0.5),
67+
child: Center(
68+
child: Text(
69+
label,
70+
style: const TextStyle(color: Colors.white, fontSize: 20),
71+
overflow: TextOverflow.clip,
72+
softWrap: false,
73+
),
74+
),
75+
);
76+
}
77+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter_api_samples/material/carousel/carousel.0.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Carousel Smoke Test', (WidgetTester tester) async {
11+
await tester.pumpWidget(
12+
const example.CarouselExampleApp(),
13+
);
14+
expect(find.byType(CarouselView), findsOneWidget);
15+
16+
expect(find.widgetWithText(example.UncontainedLayoutCard, 'Item 0'), findsOneWidget);
17+
expect(find.widgetWithText(example.UncontainedLayoutCard, 'Item 1'), findsOneWidget);
18+
});
19+
}

packages/flutter/lib/material.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export 'src/material/button_theme.dart';
4646
export 'src/material/calendar_date_picker.dart';
4747
export 'src/material/card.dart';
4848
export 'src/material/card_theme.dart';
49+
export 'src/material/carousel.dart';
4950
export 'src/material/checkbox.dart';
5051
export 'src/material/checkbox_list_tile.dart';
5152
export 'src/material/checkbox_theme.dart';

0 commit comments

Comments
 (0)