Improved example app

example/lib/src/screens/home/config_view/forms/side/side.dart

@@ -39,7 +39,7 @@ class _ContentPanels extends StatelessWidget {
   Widget build(BuildContext context) => Padding(
         padding: const EdgeInsets.only(right: 16, top: 16),
         child: SizedBox(
-          width: (constraints.maxWidth / 3).clamp(515, 560),
+          width: (constraints.maxWidth / 3).clamp(440, 560),
           child: Column(
             children: [
               Container(
@@ -61,13 +61,15 @@ class _ContentPanels extends StatelessWidget {
                   ),
                   width: double.infinity,
                   height: double.infinity,
-                  child: const CustomScrollView(
+                  child: CustomScrollView(
                     slivers: [
                       SliverPadding(
-                        padding: EdgeInsets.only(top: 16),
-                        sliver: StoresList(useCompactLayout: false),
+                        padding: const EdgeInsets.only(top: 16),
+                        sliver: StoresList(
+                          useCompactLayout: constraints.maxWidth / 3 < 500,
+                        ),
                       ),
-                      SliverToBoxAdapter(child: SizedBox(height: 16)),
+                      const SliverToBoxAdapter(child: SizedBox(height: 16)),
                     ],
                   ),
                 ),

example/lib/src/screens/home/config_view/panels/stores/components/export_stores/button.dart

@@ -49,10 +49,9 @@ class ExportStoresButton extends StatelessWidget {
             const SizedBox(height: 24),
             Text(
               'Within the example app, for simplicity, each store contains '
-              'tiles from a single URL template. This is not a limitation '
-              'with FMTC.\nAdditionally, FMTC supports changing the '
-              'read/write behaviour for all unspecified stores, but this '
-              'is not represented wihtin this app.',
+              'tiles from a single URL template. Additionally, only one tile '
+              'layer with a single URL template can be used at any one time. '
+              'These are not limitations with FMTC.',
               textAlign: TextAlign.center,
               style: Theme.of(context).textTheme.labelSmall,
             ),

example/lib/src/screens/home/config_view/panels/stores/components/new_store_button.dart

@@ -37,10 +37,9 @@ class NewStoreButton extends StatelessWidget {
             const SizedBox(height: 24),
             Text(
               'Within the example app, for simplicity, each store contains '
-              'tiles from a single URL template. This is not a limitation '
-              'with FMTC.\nAdditionally, FMTC supports changing the '
-              'read/write behaviour for all unspecified stores, but this '
-              'is not represented wihtin this app.',
+              'tiles from a single URL template. Additionally, only one tile '
+              'layer with a single URL template can be used at any one time. '
+              'These are not limitations with FMTC.',
               textAlign: TextAlign.center,
               style: Theme.of(context).textTheme.labelSmall,
             ),

example/lib/src/screens/home/config_view/panels/stores/components/no_stores.dart

@@ -53,10 +53,9 @@ class NoStores extends StatelessWidget {
                 const SizedBox(height: 32),
                 Text(
                   'Within the example app, for simplicity, each store contains '
-                  'tiles from a single URL template. This is not a limitation '
-                  'with FMTC.\nAdditionally, FMTC supports changing the '
-                  'read/write behaviour for all unspecified stores, but this '
-                  'is not represented wihtin this app.',
+                  'tiles from a single URL template. Additionally, only one '
+                  'tile layer with a single URL template can be used at any '
+                  'one time. These are not limitations with FMTC.',
                   textAlign: TextAlign.center,
                   style: Theme.of(context).textTheme.labelSmall,
                 ),

example/lib/src/screens/home/config_view/panels/stores/components/store_tiles/browse_store_strategy_selector/browse_store_strategy_selector.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map_tile_caching/flutter_map_tile_caching.dart';
+import 'package:provider/provider.dart';
+
+import '../../../../../../../../shared/misc/internal_store_read_write_behaviour.dart';
+import '../../../../../../../../shared/state/general_provider.dart';
+
+part 'checkbox.dart';
+part 'dropdown.dart';
+
+class BrowseStoreStrategySelector extends StatelessWidget {
+  const BrowseStoreStrategySelector({
+    super.key,
+    required this.storeName,
+    required this.enabled,
+    this.inheritable = true,
+    required this.useCompactLayout,
+  });
+
+  final String storeName;
+  final bool enabled;
+  final bool inheritable;
+  final bool useCompactLayout;
+
+  static const _unspecifiedSelectorColor = Colors.pinkAccent;
+
+  @override
+  Widget build(BuildContext context) {
+    final currentStrategy =
+        context.select<GeneralProvider, InternalBrowseStoreStrategy?>(
+      (provider) => provider.currentStores[storeName],
+    );
+    final unspecifiedStrategy =
+        context.select<GeneralProvider, InternalBrowseStoreStrategy?>(
+      (provider) => provider.currentStores['(unspecified)'],
+    );
+    final inheritableStrategy = inheritable
+        ? context.select<GeneralProvider, BrowseStoreStrategy?>(
+            (provider) => provider.inheritableBrowseStoreStrategy,
+          )
+        : null;
+
+    final resolvedCurrentStrategy = currentStrategy == null
+        ? inheritableStrategy
+        : currentStrategy.toBrowseStoreStrategy(inheritableStrategy);
+    final isUsingUnselectedStrategy = resolvedCurrentStrategy == null &&
+        unspecifiedStrategy != InternalBrowseStoreStrategy.disable &&
+        enabled;
+
+    // ignore: avoid_positional_boolean_parameters
+    void changedInheritCheckbox(bool? value) {
+      final provider = context.read<GeneralProvider>();
+
+      provider
+        ..currentStores[storeName] = value!
+            ? InternalBrowseStoreStrategy.inherit
+            : InternalBrowseStoreStrategy.fromBrowseStoreStrategy(
+                provider.inheritableBrowseStoreStrategy,
+              )
+        ..changedCurrentStores();
+    }
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (inheritable) ...[
+          Checkbox.adaptive(
+            value: currentStrategy == InternalBrowseStoreStrategy.inherit ||
+                currentStrategy == null,
+            onChanged: enabled ? changedInheritCheckbox : null,
+            materialTapTargetSize: MaterialTapTargetSize.padded,
+            visualDensity: VisualDensity.comfortable,
+          ),
+          const VerticalDivider(width: 2),
+        ],
+        if (useCompactLayout)
+          _BrowseStoreStrategySelectorDropdown(
+            storeName: storeName,
+            currentStrategy: resolvedCurrentStrategy,
+            enabled: enabled,
+            isUnspecifiedSelector: storeName == '(unspecified)',
+            isUsingUnselectedStrategy: isUsingUnselectedStrategy,
+          )
+        else
+          Stack(
+            children: [
+              Transform.translate(
+                offset: const Offset(2, 0),
+                child: AnimatedContainer(
+                  duration: const Duration(milliseconds: 100),
+                  decoration: BoxDecoration(
+                    color: BrowseStoreStrategySelector._unspecifiedSelectorColor
+                        .withOpacity(0.75),
+                    borderRadius: BorderRadius.circular(99),
+                  ),
+                  width: isUsingUnselectedStrategy
+                      ? switch (unspecifiedStrategy) {
+                          InternalBrowseStoreStrategy.read => 40,
+                          InternalBrowseStoreStrategy.readUpdate => 88,
+                          InternalBrowseStoreStrategy.readUpdateCreate => 130,
+                          _ => 0,
+                        }
+                      : 0,
+                ),
+              ),
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  ...BrowseStoreStrategy.values.map(
+                    (e) => _BrowseStoreStrategySelectorCheckbox(
+                      strategyOption: e,
+                      storeName: storeName,
+                      currentStrategy: resolvedCurrentStrategy,
+                      enabled: enabled,
+                      isUnspecifiedSelector: storeName == '(unspecified)',
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+      ],
+    );
+  }
+}