feat: add a stack option to YaruChoiceChipBar

ubuntu · Jun 22, 2023 · b7f770d · b7f770d
1 parent e1b3725
commit b7f770d
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 46 deletions.
diff --git a/example/lib/pages/choice_chip_bar_page.dart b/example/lib/pages/choice_chip_bar_page.dart
@@ -29,7 +29,7 @@ class _ChoiceChipBarPageState extends State<ChoiceChipBarPage> {
         child: Column(
           children: [
             YaruChoiceChipBar(
-              wrap: false,
+              yaruChoiceChipBarStyle: YaruChoiceChipBarStyle.stack,
               labels: _labels.map(Text.new).toList(),
               isSelected: _isSelected,
               onSelected: (index) => setState(() {

diff --git a/lib/src/widgets/yaru_choice_chip_bar.dart b/lib/src/widgets/yaru_choice_chip_bar.dart
@@ -9,14 +9,14 @@ class YaruChoiceChipBar extends StatefulWidget {
     required this.labels,
     required this.onSelected,
     required this.isSelected,
-    this.wrap = false,
+    this.yaruChoiceChipBarStyle = YaruChoiceChipBarStyle.row,
     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 YaruChoiceChipBarStyle yaruChoiceChipBarStyle;
   final double spacing;
   final Duration duration;
   final double animationStep;
@@ -32,8 +32,8 @@ class YaruChoiceChipBar extends StatefulWidget {
 
 class _YaruChoiceChipBarState extends State<YaruChoiceChipBar> {
   late ScrollController _controller;
-  bool _enableBackButton = false;
-  bool _enableForwardButton = true;
+  bool _enableGoPreviousButton = false;
+  bool _enableGoNextButton = true;
 
   @override
   void initState() {
@@ -45,17 +45,17 @@ class _YaruChoiceChipBarState extends State<YaruChoiceChipBar> {
           final isLeft = _controller.position.pixels == 0;
           setState(() {
             if (isLeft) {
-              _enableForwardButton = true;
-              _enableBackButton = false;
+              _enableGoNextButton = true;
+              _enableGoPreviousButton = false;
             } else {
-              _enableForwardButton = false;
-              _enableBackButton = true;
+              _enableGoNextButton = false;
+              _enableGoPreviousButton = true;
             }
           });
         } else {
           setState(() {
-            _enableBackButton = true;
-            _enableForwardButton = true;
+            _enableGoPreviousButton = true;
+            _enableGoNextButton = true;
           });
         }
       });
@@ -69,6 +69,7 @@ class _YaruChoiceChipBarState extends State<YaruChoiceChipBar> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     final children = [
       for (int index = 0; index < widget.labels.length; index++)
         if (widget.isSelected[index])
@@ -86,63 +87,122 @@ class _YaruChoiceChipBarState extends State<YaruChoiceChipBar> {
           )
     ];
 
-    if (widget.wrap) {
+    final listView = ListView(
+      scrollDirection: Axis.horizontal,
+      controller: _controller,
+      children: children
+          .map(
+            (e) => Padding(
+              padding: EdgeInsets.only(
+                right: widget.spacing,
+              ),
+              child: e,
+            ),
+          )
+          .toList(),
+    );
+
+    final borderRadius = BorderRadius.circular(8);
+    final roundedRectangleBorder = RoundedRectangleBorder(
+      borderRadius: borderRadius,
+      side: BorderSide(
+        color: theme.colorScheme.outline,
+        width: 1,
+      ),
+    );
+
+    const size = 34.0;
+
+    final goPreviousButton = SizedBox(
+      height: size,
+      width: size,
+      child: Material(
+        shape: roundedRectangleBorder,
+        child: InkWell(
+          customBorder: roundedRectangleBorder,
+          onTap: _enableGoPreviousButton
+              ? () => _controller.animateTo(
+                    _controller.position.pixels - widget.animationStep,
+                    duration: widget.duration,
+                    curve: Curves.bounceIn,
+                  )
+              : null,
+          child: const Icon(YaruIcons.go_previous),
+        ),
+      ),
+    );
+
+    final goNextButton = SizedBox(
+      height: size,
+      width: size,
+      child: Material(
+        shape: roundedRectangleBorder,
+        child: InkWell(
+          customBorder: roundedRectangleBorder,
+          onTap: _enableGoNextButton
+              ? () => _controller.animateTo(
+                    _controller.position.pixels + widget.animationStep,
+                    duration: widget.duration,
+                    curve: Curves.bounceIn,
+                  )
+              : null,
+          child: const Icon(YaruIcons.go_next),
+        ),
+      ),
+    );
+
+    if (widget.yaruChoiceChipBarStyle == YaruChoiceChipBarStyle.wrap) {
       return Wrap(
         spacing: widget.spacing,
         runSpacing: widget.spacing,
         direction: widget.wrapScrollDirection,
         children: children,
       );
+    } else if (widget.yaruChoiceChipBarStyle == YaruChoiceChipBarStyle.stack) {
+      return SizedBox(
+        height: 60,
+        child: Stack(
+          alignment: Alignment.center,
+          children: [
+            listView,
+            if (_enableGoPreviousButton)
+              Positioned(
+                left: 0,
+                child: goPreviousButton,
+              ),
+            if (_enableGoNextButton)
+              Positioned(
+                right: 0,
+                child: goNextButton,
+              )
+          ],
+        ),
+      );
     } else {
       return SizedBox(
         height: 60,
         child: Row(
           children: [
-            YaruIconButton(
-              icon: const Icon(YaruIcons.go_previous),
-              onPressed: _enableBackButton
-                  ? () => _controller.animateTo(
-                        _controller.position.pixels - widget.animationStep,
-                        duration: widget.duration,
-                        curve: Curves.bounceIn,
-                      )
-                  : null,
-            ),
+            goPreviousButton,
             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(),
-              ),
+              child: listView,
             ),
             SizedBox(
               width: widget.spacing,
             ),
-            YaruIconButton(
-              icon: const Icon(YaruIcons.go_next),
-              onPressed: _enableForwardButton
-                  ? () => _controller.animateTo(
-                        _controller.position.pixels + widget.animationStep,
-                        duration: widget.duration,
-                        curve: Curves.bounceIn,
-                      )
-                  : null,
-            ),
+            goNextButton,
           ],
         ),
       );
     }
   }
 }
+
+enum YaruChoiceChipBarStyle {
+  wrap,
+  row,
+  stack;
+}