🍈
CarouselView classを使ってみた
Note(ノート)
CarouselView classなるWidgetを見てライブラリを使用しなくてもカルーセルを再現できるようなので気になり試してみました。ListViewでも同じことはできてそうだったが。
公式のコードが長かったので少し修正して使ってみた。
main.dart
import 'package:flutter/material.dart';
void main() => runApp(const CarouselExampleApp());
class CarouselExampleApp extends StatelessWidget {
const CarouselExampleApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const CarouselExample(),
);
}
}
class CarouselExample extends StatefulWidget {
const CarouselExample({super.key});
State<CarouselExample> createState() => _CarouselExampleState();
}
class _CarouselExampleState extends State<CarouselExample> {
final CarouselController controller = CarouselController(initialItem: 0);
void dispose() {
controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text('シンプルカルーセル'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200,
child: CarouselView(
controller: controller,
itemSnapping: true,
itemExtent: 300,
children: List<Widget>.generate(
5,
(index) => Container(
margin: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
color: Colors.blue.shade300,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'スライド ${index + 1}',
style: const TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
),
),
),
),
const SizedBox(height: 20),
],
),
);
}
}
Que（きっかけ）
Flutter公式のYouTube動画が気になっていて試してみたいと思った。他には、公式のサンプルが読みずらく簡単な使用例を短く書いてみたいと思った。長いですよね。UIは綺麗で魅力的だった🍸
example
import 'package:flutter/material.dart';
/// Flutter code sample for [CarouselView].
void main() => runApp(const CarouselExampleApp());
class CarouselExampleApp extends StatelessWidget {
const CarouselExampleApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: const Icon(Icons.cast),
title: const Text('Flutter TV'),
actions: const <Widget>[
Padding(
padding: EdgeInsetsDirectional.only(end: 16.0),
child: CircleAvatar(child: Icon(Icons.account_circle)),
),
],
),
body: const CarouselExample(),
),
);
}
}
class CarouselExample extends StatefulWidget {
const CarouselExample({super.key});
State<CarouselExample> createState() => _CarouselExampleState();
}
class _CarouselExampleState extends State<CarouselExample> {
final CarouselController controller = CarouselController(initialItem: 1);
void dispose() {
controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
final double height = MediaQuery.sizeOf(context).height;
return ListView(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(maxHeight: height / 2),
child: CarouselView.weighted(
controller: controller,
itemSnapping: true,
flexWeights: const <int>[1, 7, 1],
children: ImageInfo.values.map((ImageInfo image) {
return HeroLayoutCard(imageInfo: image);
}).toList(),
),
),
const SizedBox(height: 20),
const Padding(
padding: EdgeInsetsDirectional.only(top: 8.0, start: 8.0),
child: Text('Multi-browse layout'),
),
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 50),
child: CarouselView.weighted(
flexWeights: const <int>[1, 2, 3, 2, 1],
consumeMaxWeight: false,
children: List<Widget>.generate(20, (int index) {
return ColoredBox(
color: Colors.primaries[index % Colors.primaries.length]
.withAlpha(100),
child: const SizedBox.expand(),
);
}),
),
),
const SizedBox(height: 20),
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: CarouselView.weighted(
flexWeights: const <int>[3, 3, 3, 2, 1],
consumeMaxWeight: false,
children: CardInfo.values.map((CardInfo info) {
return ColoredBox(
color: info.backgroundColor,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(info.icon, color: info.color, size: 32.0),
Text(info.label,
style: const TextStyle(fontWeight: FontWeight.bold),
overflow: TextOverflow.clip,
softWrap: false),
],
),
),
);
}).toList()),
),
const SizedBox(height: 20),
const Padding(
padding: EdgeInsetsDirectional.only(top: 8.0, start: 8.0),
child: Text('Uncontained layout'),
),
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: CarouselView(
itemExtent: 330,
shrinkExtent: 200,
children: List<Widget>.generate(20, (int index) {
return UncontainedLayoutCard(index: index, label: 'Show $index');
}),
),
)
],
);
}
}
class HeroLayoutCard extends StatelessWidget {
const HeroLayoutCard({
super.key,
required this.imageInfo,
});
final ImageInfo imageInfo;
Widget build(BuildContext context) {
final double width = MediaQuery.sizeOf(context).width;
return Stack(
alignment: AlignmentDirectional.bottomStart,
children: <Widget>[
ClipRect(
child: OverflowBox(
maxWidth: width * 7 / 8,
minWidth: width * 7 / 8,
child: Image(
fit: BoxFit.cover,
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/material/${imageInfo.url}'),
),
),
),
Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
imageInfo.title,
overflow: TextOverflow.clip,
softWrap: false,
style: Theme.of(context)
.textTheme
.headlineLarge
?.copyWith(color: Colors.white),
),
const SizedBox(height: 10),
Text(
imageInfo.subtitle,
overflow: TextOverflow.clip,
softWrap: false,
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(color: Colors.white),
)
],
),
),
]);
}
}
class UncontainedLayoutCard extends StatelessWidget {
const UncontainedLayoutCard({
super.key,
required this.index,
required this.label,
});
final int index;
final String label;
Widget build(BuildContext context) {
return ColoredBox(
color: Colors.primaries[index % Colors.primaries.length].withAlpha(100),
child: Center(
child: Text(
label,
style: const TextStyle(color: Colors.white, fontSize: 20),
overflow: TextOverflow.clip,
softWrap: false,
),
),
);
}
}
enum CardInfo {
camera('Cameras', Icons.video_call, Color(0xff2354C7), Color(0xffECEFFD)),
lighting('Lighting', Icons.lightbulb, Color(0xff806C2A), Color(0xffFAEEDF)),
climate('Climate', Icons.thermostat, Color(0xffA44D2A), Color(0xffFAEDE7)),
wifi('Wifi', Icons.wifi, Color(0xff417345), Color(0xffE5F4E0)),
media('Media', Icons.library_music, Color(0xff2556C8), Color(0xffECEFFD)),
security(
'Security', Icons.crisis_alert, Color(0xff794C01), Color(0xffFAEEDF)),
safety(
'Safety', Icons.medical_services, Color(0xff2251C5), Color(0xffECEFFD)),
more('', Icons.add, Color(0xff201D1C), Color(0xffE3DFD8));
const CardInfo(this.label, this.icon, this.color, this.backgroundColor);
final String label;
final IconData icon;
final Color color;
final Color backgroundColor;
}
enum ImageInfo {
image0('The Flow', 'Sponsored | Season 1 Now Streaming',
'content_based_color_scheme_1.png'),
image1('Through the Pane', 'Sponsored | Season 1 Now Streaming',
'content_based_color_scheme_2.png'),
image2('Iridescence', 'Sponsored | Season 1 Now Streaming',
'content_based_color_scheme_3.png'),
image3('Sea Change', 'Sponsored | Season 1 Now Streaming',
'content_based_color_scheme_4.png'),
image4('Blue Symphony', 'Sponsored | Season 1 Now Streaming',
'content_based_color_scheme_5.png'),
image5('When It Rains', 'Sponsored | Season 1 Now Streaming',
'content_based_color_scheme_6.png');
const ImageInfo(this.title, this.subtitle, this.url);
final String title;
final String subtitle;
final String url;
}
Summary（要約）
公式の上の方を翻訳してみた。情報がまとまっていそう。
マテリアルデザインのカルーセルウィジェットです。
CarouselViewはスクロール可能なアイテムのリストを表示し、各アイテムは選択したレイアウトに基づいて動的にサイズを変更できます。
Material Design 3では、4つのカルーセルレイアウトが導入されました：
- マルチ・ブラウズ： このレイアウトは、一度に少なくとも1つの大、中、小のカルーセル・アイテムを表示します。このレイアウトはCarouselView.weightedによってサポートされています。
- Uncontained (デフォルト)： このレイアウトは、コンテナの端までスクロールするアイテムを表示します。このレイアウトはCarouselViewでサポートされています。
- Hero: このレイアウトは、一度に少なくとも1つの大きなアイテムと1つの小さなアイテムを表示します。このレイアウトは、CarouselView.weightedでサポートされています。
- フルスクリーン： このレイアウトは、一度に端から端まで1つの大きなアイテムを表示し、垂直にスクロールします。フルスクリーンレイアウトは両方のコンストラクタでサポートできます。
デフォルトのコンストラクタは、コンテナなしのレイアウトモデルを実装しています。これは、コンテナの端までスクロールするアイテムを表示し、すべての子要素が均一なサイズであるListViewに似た振る舞いをします。CarouselView.weightedは動的なアイテムのサイズ設定を可能にします。各アイテムには、ビューポートのどの部分を占めるかを決定するウェイトが割り当てられます。このコンストラクタは、マルチブラウズやヒーローのようなレイアウトを作成するのに役立ちます。フルスクリーンレイアウトにするには、CarouselView を使用する場合は itemExtent をスクリーンサイズに設定し、CarouselView.weighted を使用する場合は flexWeights を配列内の整数が1つになるように設定します。
Discussion