Add YaruChoiceChipBar

example/lib/example_page_items.dart

@@ -7,6 +7,7 @@ import 'pages/autocomplete_page.dart';
 import 'pages/banner_page.dart';
 import 'pages/carousel_page.dart';
 import 'pages/checkbox_page.dart';
+import 'pages/choice_chip_bar_page.dart';
 import 'pages/clip_page.dart';
 import 'pages/color_disk_page.dart';
 import 'pages/dialog_page.dart';
@@ -77,6 +78,13 @@ final examplePageItems = <PageItem>[
         ? const Icon(YaruIcons.checkbox_checked_filled)
         : const Icon(YaruIcons.checkbox_checked),
   ),
+  PageItem(
+    title: 'YaruChoiceChipBar',
+    snippetUrl:
+        'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/filter_pills_page.dart',
+    iconBuilder: (context, selected) => const Icon(YaruIcons.paper_clip),
+    pageBuilder: (_) => const ChoiceChipBarPage(),
+  ),
   PageItem(
     title: 'YaruClip',
     snippetUrl:

example/lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:connectivity_plus/connectivity_plus.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:ubuntu_service/ubuntu_service.dart';
 import 'package:yaru/yaru.dart';
@@ -36,6 +37,14 @@ class Home extends StatelessWidget {
           highContrastTheme: yaruHighContrastLight,
           highContrastDarkTheme: yaruHighContrastDark,
           home: Example.create(context),
+          scrollBehavior: const MaterialScrollBehavior().copyWith(
+            dragDevices: {
+              PointerDeviceKind.mouse,
+              PointerDeviceKind.touch,
+              PointerDeviceKind.stylus,
+              PointerDeviceKind.unknown
+            },
+          ),
         );
       },
     );

example/lib/pages/choice_chip_bar_page.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class ChoiceChipBarPage extends StatefulWidget {
+  const ChoiceChipBarPage({super.key});
+
+  @override
+  State<ChoiceChipBarPage> createState() => _ChoiceChipBarPageState();
+}
+
+class _ChoiceChipBarPageState extends State<ChoiceChipBarPage> {
+  final _labels = [
+    for (var i = 0; i < 15; i++) 'Choice $i',
+  ];
+
+  late List<bool> _isSelected;
+
+  @override
+  void initState() {
+    super.initState();
+    _isSelected = List.generate(_labels.length, (index) => false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: Column(
+          children: [
+            YaruChoiceChipBar(
+              wrap: false,
+              labels: _labels.map(Text.new).toList(),
+              isSelected: _isSelected,
+              onSelected: (index) => setState(() {
+                _isSelected[index] = !_isSelected[index];
+              }),
+            ),
+            Expanded(
+              child: ListView(
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
+                children: [
+                  for (int i = 0; i < _labels.length; i++)
+                    if (_isSelected[i])
+                      Text(
+                        _labels[i],
+                        style: const TextStyle(
+                          fontSize: 30,
+                        ),
+                      )
+                ],
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/src/widgets/yaru_choice_chip_bar.dart

@@ -0,0 +1,123 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class YaruChoiceChipBar extends StatefulWidget {
+  const YaruChoiceChipBar({
+    super.key,
+    this.wrapScrollDirection = Axis.horizontal,
+    required this.labels,
+    required this.onSelected,
+    required this.isSelected,
+    this.wrap = false,
+    this.spacing = 10.0,
+    this.duration = const Duration(milliseconds: 200),
+    this.animationStep = 100.0,
+  }) : assert(labels.length == isSelected.length);
+
+  final Axis wrapScrollDirection;
+  final bool wrap;
+  final double spacing;
+  final Duration duration;
+  final double animationStep;
+
+  final List<Widget> labels;
+  final List<bool> isSelected;
+
+  final void Function(int index) onSelected;
+
+  @override
+  State<YaruChoiceChipBar> createState() => _YaruChoiceChipBarState();
+}
+
+class _YaruChoiceChipBarState extends State<YaruChoiceChipBar> {
+  late ScrollController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = ScrollController();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final children = [
+      for (int index = 0; index < widget.labels.length; index++)
+        if (widget.isSelected[index])
+          ChoiceChip(
+            label: widget.labels[index],
+            selected: widget.isSelected[index],
+            onSelected: (v) => widget.onSelected(index),
+          ),
+      for (int index = 0; index < widget.labels.length; index++)
+        if (!widget.isSelected[index])
+          ChoiceChip(
+            label: widget.labels[index],
+            selected: widget.isSelected[index],
+            onSelected: (v) => widget.onSelected(index),
+          )
+    ];
+
+    if (widget.wrap) {
+      return Wrap(
+        spacing: widget.spacing,
+        runSpacing: widget.spacing,
+        direction: widget.wrapScrollDirection,
+        children: children,
+      );
+    } else {
+      return SizedBox(
+        height: 60,
+        child: Row(
+          children: [
+            YaruIconButton(
+              icon: const Icon(YaruIcons.go_previous),
+              onPressed: () => _controller.animateTo(
+                _controller.position.pixels - widget.animationStep,
+                duration: widget.duration,
+                curve: Curves.bounceIn,
+              ),
+            ),
+            SizedBox(
+              width: widget.spacing,
+            ),
+            Expanded(
+              child: ListView(
+                scrollDirection: Axis.horizontal,
+                controller: _controller,
+                children: children
+                    .map(
+                      (e) => Padding(
+                        padding: EdgeInsets.only(
+                          right: widget.spacing,
+                        ),
+                        child: e,
+                      ),
+                    )
+                    .toList(),
+              ),
+            ),
+            SizedBox(
+              width: widget.spacing,
+            ),
+            YaruIconButton(
+              icon: const Icon(YaruIcons.go_next),
+              onPressed: () => _controller.animateTo(
+                _controller.position.pixels + widget.animationStep,
+                duration: widget.duration,
+                curve: Curves.bounceIn,
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+  }
+}

lib/widgets.dart

@@ -17,6 +17,7 @@ export 'src/widgets/yaru_check_button.dart';
 export 'src/widgets/yaru_checkbox.dart';
 export 'src/widgets/yaru_checkbox_list_tile.dart';
 export 'src/widgets/yaru_checkbox_theme.dart';
+export 'src/widgets/yaru_choice_chip_bar.dart';
 export 'src/widgets/yaru_circular_progress_indicator.dart';
 export 'src/widgets/yaru_close_button.dart';
 export 'src/widgets/yaru_color_disk.dart';