flutter/examples/api/lib/material/carousel/carousel.0.dart
Qun Cheng 6e5f39b5d9
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.
2024-06-05 21:03:21 +00:00

78 lines
1.9 KiB
Dart

// 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,
),
),
);
}
}