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`: https://github.com/QuncCccccc/flutter/pull/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.
This commit is contained in:
Qun Cheng
2024-06-05 21:03:21 +00:00
committed by GitHub
parent 1cf617812b
commit 6e5f39b5d9
5 changed files with 1308 additions and 0 deletions

View File

@@ -0,0 +1,77 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
/// Flutter code sample for [Carousel].
void main() => runApp(const CarouselExampleApp());
class CarouselExampleApp extends StatelessWidget {
const CarouselExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Carousel Sample'),
),
body: const CarouselExample(),
),
);
}
}
class CarouselExample extends StatefulWidget {
const CarouselExample({super.key});
@override
State<CarouselExample> createState() => _CarouselExampleState();
}
class _CarouselExampleState extends State<CarouselExample> {
@override
Widget build(BuildContext context) {
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: CarouselView(
itemExtent: 330,
shrinkExtent: 200,
children: List<Widget>.generate(20, (int index) {
return UncontainedLayoutCard(index: index, label: 'Item $index');
}),
),
),
);
}
}
class UncontainedLayoutCard extends StatelessWidget {
const UncontainedLayoutCard({
super.key,
required this.index,
required this.label,
});
final int index;
final String label;
@override
Widget build(BuildContext context) {
return ColoredBox(
color: Colors.primaries[index % Colors.primaries.length].withOpacity(0.5),
child: Center(
child: Text(
label,
style: const TextStyle(color: Colors.white, fontSize: 20),
overflow: TextOverflow.clip,
softWrap: false,
),
),
);
}
}

View File

@@ -0,0 +1,19 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter_api_samples/material/carousel/carousel.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Carousel Smoke Test', (WidgetTester tester) async {
await tester.pumpWidget(
const example.CarouselExampleApp(),
);
expect(find.byType(CarouselView), findsOneWidget);
expect(find.widgetWithText(example.UncontainedLayoutCard, 'Item 0'), findsOneWidget);
expect(find.widgetWithText(example.UncontainedLayoutCard, 'Item 1'), findsOneWidget);
});
}