mobile responsiveness

Nimblesite · Sep 22, 2024 · a2491c6 · a2491c6
1 parent b184189
commit a2491c6
Showing 1 changed file with 80 additions and 50 deletions.
diff --git a/charts_flutter/example/lib/picker/tag_item_selector.dart b/charts_flutter/example/lib/picker/tag_item_selector.dart
@@ -30,61 +30,91 @@ class TagItemSelector<T extends TaggedItem> extends StatefulWidget {
 
 class _TagItemSelectorState<T extends TaggedItem>
     extends State<TagItemSelector<T>> {
-  void _toggleTag(TagDefinition tag) {
-    setState(() {
-      if (widget.selectedTags.value.contains(tag)) {
-        widget.selectedTags.value.remove(tag);
-      } else {
-        widget.selectedTags.value.add(tag);
-      }
-    });
-  }
+  void _toggleTag(TagDefinition tag) => setState(() {
+        if (widget.selectedTags.value.contains(tag)) {
+          widget.selectedTags.value.remove(tag);
+        } else {
+          widget.selectedTags.value.add(tag);
+        }
+      });
+
+  Widget _buildTagChips(bool isPhoneScreen) => SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Row(
+          children: widget.allTags
+              .map(
+                (tag) => Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  child: Tooltip(
+                    message: tag.blurb,
+                    child: FilterChip(
+                      label: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Icon(tag.icon),
+                          const SizedBox(width: 8),
+                          Text(tag.display),
+                        ],
+                      ),
+                      selected: widget.selectedTags.value.contains(tag),
+                      onSelected: (_) => _toggleTag(tag),
+                    ),
+                  ),
+                ),
+              )
+              .toList(),
+        ),
+      );
+
+  Widget _buildItemGrid(bool isPhoneScreen) => widget.selectedTags.value.isEmpty
+      ? const SizedBox.shrink()
+      : AnimatedItemGrid<T>(
+          items: widget.items(widget.selectedTags.value),
+          selectedTags: widget.selectedTags,
+          builder: (context, item) => SizedBox(
+            width: isPhoneScreen ? double.infinity : null,
+            child: widget.builder(context, item),
+          ),
+        );
 
   @override
-  Widget build(BuildContext context) => Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Padding(
-            padding: const EdgeInsets.all(8),
-            child: Wrap(
-              runAlignment: WrapAlignment.center,
-              alignment: WrapAlignment.center,
-              spacing: 8,
-              runSpacing: 8,
-              children: widget.allTags
-                  .map(
-                    (tag) => Tooltip(
-                      message: tag.blurb,
-                      child: FilterChip(
-                        label: Row(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            Icon(tag.icon),
-                            const SizedBox(width: 8),
-                            Text(tag.display),
-                          ],
+  Widget build(BuildContext context) => LayoutBuilder(
+        builder: (context, constraints) {
+          final isPhoneScreen = constraints.maxWidth < 600;
+
+          return isPhoneScreen
+              ? Column(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 8),
+                      child: _buildTagChips(isPhoneScreen),
+                    ),
+                    Expanded(
+                      child: SingleChildScrollView(
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 16),
+                          child: _buildItemGrid(isPhoneScreen),
                         ),
-                        selected: widget.selectedTags.value.contains(tag),
-                        onSelected: (_) => _toggleTag(tag),
                       ),
                     ),
-                  )
-                  .toList(),
-            ),
-          ),
-          Expanded(
-            child: Center(
-              child: SingleChildScrollView(
-                child: widget.selectedTags.value.isEmpty
-                    ? const SizedBox.shrink()
-                    : AnimatedItemGrid<T>(
-                        items: widget.items(widget.selectedTags.value),
-                        selectedTags: widget.selectedTags,
-                        builder: widget.builder,
+                  ],
+                )
+              : Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.all(8),
+                      child: _buildTagChips(isPhoneScreen),
+                    ),
+                    Expanded(
+                      child: Center(
+                        child: SingleChildScrollView(
+                          child: _buildItemGrid(isPhoneScreen),
+                        ),
                       ),
-              ),
-            ),
-          ),
-        ],
+                    ),
+                  ],
+                );
+        },
       );
 }