kasy-cli 1.37.1 → 1.38.0

package/templates/firebase/lib/features/settings/ui/components/admin/admin_routes.dart

@@ -1,11 +1,21 @@
 import 'package:kasy_kit/features/subscriptions/ui/component/premium_page_factory.dart';
 
-/// Debug-only GoRouter paths (registered when [kDebugMode] is true).
+/// The four "Ferramentas" sub-screens are real admin SECTIONS: each is its own
+/// branch in the console's [StatefulShellRoute] (so the rail persists and it
+/// gets the standard header chrome) and is reached from the sidebar's
+/// "Ferramentas" submenu, not pushed. These paths are the branch locations —
+/// `adminSections()` reads them so the router and the rail can't drift.
 ///
-/// Pushed from the admin console (AdminPage); popping returns to it.
-const String adminRoutePaywalls = '/admin/paywalls';
+/// Send push and Paywalls are admin actions (production); Components and Debug
+/// are developer-only (their branches register only when [kDebugMode] is true).
+const String adminRouteSendPush = '/admin/tools/send-push';
+const String adminRoutePaywalls = '/admin/tools/paywalls';
+const String adminRouteComponents = '/admin/tools/components';
+const String adminRouteDebug = '/admin/tools/debug';
+
+/// Full-screen pushed routes (debug-only), reached from inside the Debug
+/// section as drill-downs (they cover the shell and pop back to it).
 const String adminRouteHomeWidgets = '/admin/home-widgets';
-const String adminRouteSendPush = '/admin/send-push';
 
 String adminRoutePremiumPreview(String variant) => '/admin/premium/$variant';
 

package/templates/firebase/lib/features/settings/ui/components/admin/send_push_notification_page.dart

@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:go_router/go_router.dart';
-import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_tabs.dart';
 import 'package:kasy_kit/components/kasy_text_area.dart';
 import 'package:kasy_kit/components/kasy_text_field.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
@@ -10,7 +9,6 @@ import 'package:kasy_kit/core/toast/toast_service.dart';
 import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
 import 'package:kasy_kit/features/notifications/api/notifications_api.dart';
 import 'package:kasy_kit/features/settings/ui/components/admin/send_push_notifier.dart';
-import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 
@@ -78,6 +76,21 @@ class _SendPushNotificationPageState
     setState(() => _emails.remove(email));
   }
 
+  /// Clears every field after a successful send. The screen is a console
+  /// section (reached from the sidebar), so there is nothing to pop — we reset
+  /// in place so the admin can fire another notification right away.
+  void _resetForm() {
+    _titleCtrl.clear();
+    _bodyCtrl.clear();
+    _imageCtrl.clear();
+    _routeCtrl.clear();
+    _emailCtrl.clear();
+    setState(() {
+      _emails.clear();
+      _sendToAll = false;
+    });
+  }
+
   bool get _canSend {
     if (_titleCtrl.text.trim().isEmpty) return false;
     if (_bodyCtrl.text.trim().isEmpty) return false;
@@ -128,159 +141,271 @@ class _SendPushNotificationPageState
         ref
             .read(toastProvider)
             .success(title: tr.send_push_title, text: tr.send_push_success);
-        context.pop();
+        _resetForm();
       }
     });
 
-    final Widget submitButton = _canSend
-        ? KasyButton(
-            label: tr.send_push_send_button,
-            expand: true,
-            isLoading: state is AsyncLoading,
-            onPressed: _send,
+    Widget buildSubmit({required bool expand}) {
+      final KasyButton button = KasyButton(
+        label: tr.send_push_send_button,
+        expand: expand,
+        isLoading: state is AsyncLoading,
+        onPressed: _canSend ? _send : null,
+      );
+      // Disabled: tapping explains what's missing instead of doing nothing.
+      return _canSend
+          ? button
+          : GestureDetector(onTap: _onSendAttempt, child: button);
+    }
+
+    // Recipients: a segmented audience selector (everyone / specific) over the
+    // e-mail list, instead of a lone switch — reads as a deliberate choice.
+    final Widget recipients = Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        KasyTabs(
+          tabs: [tr.send_push_audience_all, tr.send_push_audience_specific],
+          selectedIndex: _sendToAll ? 0 : 1,
+          onTabSelected: (i) => setState(() => _sendToAll = i == 0),
+          mode: KasyTabsMode.fill,
+        ),
+        const SizedBox(height: KasySpacing.md),
+        if (_sendToAll)
+          Text(
+            tr.send_push_audience_all_hint,
+            style: context.textTheme.bodySmall?.copyWith(
+              color: context.colors.muted,
+              height: 1.35,
+            ),
           )
-        : GestureDetector(
-            onTap: _onSendAttempt,
-            child: KasyButton(
-              label: tr.send_push_send_button,
-              expand: true,
-              onPressed: null,
+        else
+          _EmailsSection(
+            emails: _emails,
+            controller: _emailCtrl,
+            focusNode: _emailFocus,
+            onAdd: _addEmail,
+            onRemove: _removeEmail,
+            label: tr.send_push_email_label,
+            hint: tr.send_push_email_hint,
+          ),
+      ],
+    );
+
+    final Widget contentFields = Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        KasyTextField(
+          label: tr.send_push_title_label,
+          hint: tr.send_push_title_hint,
+          controller: _titleCtrl,
+          focusNode: _titleFocus,
+          maxLength: 64,
+          showRequiredIndicator: true,
+          textInputAction: TextInputAction.next,
+          onChanged: (_) => setState(() {}),
+          onEditingComplete: () => _bodyFocus.requestFocus(),
+        ),
+        const SizedBox(height: KasySpacing.md),
+        KasyTextArea(
+          label: tr.send_push_body_label,
+          hint: tr.send_push_body_hint,
+          controller: _bodyCtrl,
+          focusNode: _bodyFocus,
+          maxLength: 250,
+          showRequiredIndicator: true,
+          minLines: 3,
+          maxLines: 5,
+          onChanged: (_) => setState(() {}),
+        ),
+        const SizedBox(height: KasySpacing.md),
+        KasyTextField(
+          label: tr.send_push_image_label,
+          hint: tr.send_push_image_hint,
+          controller: _imageCtrl,
+          focusNode: _imageFocus,
+          onChanged: (_) => setState(() {}),
+          textInputAction: TextInputAction.next,
+          onEditingComplete: () => _routeFocus.requestFocus(),
+        ),
+      ],
+    );
+
+    final Widget advancedFields = KasyTextField(
+      label: tr.send_push_route_label,
+      hint: tr.send_push_route_hint,
+      controller: _routeCtrl,
+      focusNode: _routeFocus,
+      textInputAction: TextInputAction.done,
+      onEditingComplete: () => _routeFocus.unfocus(),
+    );
+
+    final Widget formColumn = Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        _FormSection(label: tr.send_push_section_recipients, child: recipients),
+        const SizedBox(height: KasySpacing.lg),
+        _FormSection(label: tr.send_push_section_content, child: contentFields),
+        const SizedBox(height: KasySpacing.lg),
+        _FormSection(label: tr.send_push_section_advanced, child: advancedFields),
+        // Send closes the form (route is optional), so the button flows right
+        // after the last section and scrolls with the content — not pinned.
+        const SizedBox(height: KasySpacing.lg),
+        buildSubmit(expand: true),
+      ],
+    );
+
+    final Widget previewPanel = Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(
+            left: KasySpacing.xs,
+            bottom: KasySpacing.smd,
+          ),
+          child: Text(
+            tr.send_push_preview_label.toUpperCase(),
+            style: context.kasyTextTheme.sectionLabel.copyWith(
+              color: context.colors.muted,
             ),
-          );
+          ),
+        ),
+        _NotificationPreview(
+          appName: _appName,
+          title: _titleCtrl.text,
+          body: _bodyCtrl.text,
+          imageUrl: _imageCtrl.text,
+        ),
+      ],
+    );
 
-    return Scaffold(
-      // resizeToAvoidBottomInset: true (default) — button rises with keyboard.
-      body: Stack(
-        fit: StackFit.expand,
-        children: [
-          Positioned.fill(
-            child: ScrollConfiguration(
-              behavior: const KasyKitScrollBehavior(),
-              child: CustomScrollView(
-                // Drag down to dismiss keyboard — the professional standard.
-                keyboardDismissBehavior:
-                    ScrollViewKeyboardDismissBehavior.onDrag,
-                slivers: kasyOverlayPaddedSlivers(
-                  context,
-                  contentPadding: EdgeInsets.fromLTRB(
-                    KasySpacing.pageHorizontalGutter,
-                    KasySpacing.belowChromeContentGap,
-                    KasySpacing.pageHorizontalGutter,
-                    MediaQuery.paddingOf(context).bottom +
-                        52.0 +
-                        KasySpacing.md * 2,
-                  ),
-                  slivers: [
-                    SliverToBoxAdapter(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.stretch,
-                        children: [
-                          Padding(
-                            padding: const EdgeInsets.only(
-                              left: KasySpacing.xs,
-                              bottom: KasySpacing.sm,
-                            ),
-                            child: Text(
-                              tr.send_push_preview_label.toUpperCase(),
-                              style: context.kasyTextTheme.sectionLabel.copyWith(
-                                color: context.colors.muted,
-                              ),
-                            ),
-                          ),
-                          _NotificationPreview(
-                            appName: _appName,
-                            title: _titleCtrl.text,
-                            body: _bodyCtrl.text,
-                            imageUrl: _imageCtrl.text,
-                          ),
-                          const SizedBox(height: KasySpacing.lg),
-                          SettingsSwitchTile(
-                            icon: KasyIcons.notificationActive,
-                            title: tr.send_push_to_all,
-                            value: _sendToAll,
-                            onChanged: (v) => setState(() => _sendToAll = v),
-                          ),
-                          const SettingsDivider(),
-                          const SizedBox(height: KasySpacing.lg),
-                          if (!_sendToAll) ...[
-                            _EmailsSection(
-                              emails: _emails,
-                              controller: _emailCtrl,
-                              focusNode: _emailFocus,
-                              onAdd: _addEmail,
-                              onRemove: _removeEmail,
-                              label: tr.send_push_email_label,
-                              hint: tr.send_push_email_hint,
-                            ),
-                            const SizedBox(height: KasySpacing.lg),
-                          ],
-                          KasyTextField(
-                            label: tr.send_push_title_label,
-                            hint: tr.send_push_title_hint,
-                            controller: _titleCtrl,
-                            focusNode: _titleFocus,
-                            maxLength: 64,
-                            showRequiredIndicator: true,
-                            textInputAction: TextInputAction.next,
-                            onChanged: (_) => setState(() {}),
-                            onEditingComplete: () => _bodyFocus.requestFocus(),
-                          ),
-                          const SizedBox(height: KasySpacing.md),
-                          KasyTextArea(
-                            label: tr.send_push_body_label,
-                            hint: tr.send_push_body_hint,
-                            controller: _bodyCtrl,
-                            focusNode: _bodyFocus,
-                            maxLength: 250,
-                            showRequiredIndicator: true,
-                            minLines: 3,
-                            maxLines: 5,
-                            onChanged: (_) => setState(() {}),
-                          ),
-                          const SizedBox(height: KasySpacing.md),
-                          KasyTextField(
-                            label: tr.send_push_image_label,
-                            hint: tr.send_push_image_hint,
-                            controller: _imageCtrl,
-                            focusNode: _imageFocus,
-                            onChanged: (_) => setState(() {}),
-                            textInputAction: TextInputAction.next,
-                            onEditingComplete: () => _routeFocus.requestFocus(),
-                          ),
-                          const SizedBox(height: KasySpacing.md),
-                          KasyTextField(
-                            label: tr.send_push_route_label,
-                            hint: tr.send_push_route_hint,
-                            controller: _routeCtrl,
-                            focusNode: _routeFocus,
-                            textInputAction: TextInputAction.done,
-                            onEditingComplete: () => _routeFocus.unfocus(),
+    const double gutter = KasySpacing.pageHorizontalGutter;
+
+    // Body-only: the admin shell supplies the chrome (web header on desktop,
+    // titled app bar on tablet/phone). Wide viewports get two columns (form +
+    // a fixed live preview); narrow stacks the preview on top. The send button
+    // flows at the end of the form and scrolls with it (not pinned).
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final bool wide = constraints.maxWidth >= 820;
+        // Clear the home indicator / nav bar below the last control.
+        final double bottomInset =
+            MediaQuery.paddingOf(context).bottom + KasySpacing.xl;
+
+        SingleChildScrollView scroll({
+          required EdgeInsets padding,
+          required Widget child,
+        }) => SingleChildScrollView(
+          // Drag down to dismiss keyboard — the professional standard.
+          keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
+          padding: padding,
+          child: child,
+        );
+
+        // Wide: only the form scrolls; the live preview stays FIXED beside it.
+        // Narrow: the preview sits on top and the whole stack scrolls.
+        final Widget bodyContent = wide
+            ? Center(
+                child: ConstrainedBox(
+                  constraints: const BoxConstraints(maxWidth: 1100),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Expanded(
+                        child: scroll(
+                          padding: EdgeInsets.fromLTRB(
+                            gutter,
+                            KasySpacing.belowChromeContentGap,
+                            0,
+                            bottomInset,
                           ),
-                        ],
+                          child: formColumn,
+                        ),
                       ),
-                    ),
+                      const SizedBox(width: KasySpacing.xl),
+                      Padding(
+                        padding: const EdgeInsets.fromLTRB(
+                          0,
+                          KasySpacing.belowChromeContentGap,
+                          gutter,
+                          KasySpacing.xl,
+                        ),
+                        child: SizedBox(width: 340, child: previewPanel),
+                      ),
+                    ],
+                  ),
+                ),
+              )
+            : scroll(
+                padding: EdgeInsets.fromLTRB(
+                  gutter,
+                  KasySpacing.belowChromeContentGap,
+                  gutter,
+                  bottomInset,
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    previewPanel,
+                    const SizedBox(height: KasySpacing.lg),
+                    formColumn,
                   ],
                 ),
-              ),
+              );
+
+        return ScrollConfiguration(
+          behavior: const KasyKitScrollBehavior(),
+          child: bodyContent,
+        );
+      },
+    );
+  }
+}
+
+/// A labelled card grouping form fields — the console's clean section look
+/// (uppercase label + surface card with a hairline border and the component
+/// shadow), so Send push reads as the same product as the rest of the admin.
+class _FormSection extends StatelessWidget {
+  final String label;
+  final Widget child;
+  const _FormSection({required this.label, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(
+            left: KasySpacing.xs,
+            bottom: KasySpacing.smd,
+          ),
+          child: Text(
+            label.toUpperCase(),
+            style: context.kasyTextTheme.sectionLabel.copyWith(
+              color: context.colors.muted,
             ),
           ),
-          Positioned(
-            top: 0,
-            left: 0,
-            right: 0,
-            child: KasyAppBar(
-              title: tr.send_push_title,
-              onBack: () => context.pop(),
+        ),
+        DecoratedBox(
+          decoration: BoxDecoration(
+            color: context.colors.surface,
+            borderRadius: BorderRadius.circular(18),
+            border: Border.all(
+              color: context.colors.outline.withValues(
+                alpha: context.isDark ? 0.45 : 0.6,
+              ),
             ),
+            boxShadow: [KasyShadows.component(context)],
           ),
-          Positioned(
-            left: KasySpacing.pageHorizontalGutter,
-            right: KasySpacing.pageHorizontalGutter,
-            bottom: MediaQuery.paddingOf(context).bottom + KasySpacing.sm,
-            child: submitButton,
+          child: Padding(
+            padding: const EdgeInsets.all(KasySpacing.md),
+            child: child,
           ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }

package/templates/firebase/lib/features/settings/ui/components/avatar_component.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:kasy_kit/components/kasy_avatar.dart';
+import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/core/data/entities/upload_result.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/data/repositories/user_repository.dart';
@@ -12,6 +13,7 @@ import 'package:kasy_kit/core/states/models/user_state.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/avatar_utils.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/round_progress.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -144,14 +146,10 @@ class _EditableUserAvatarState extends ConsumerState<EditableUserAvatar> {
     BuildContext context, {
     required bool hasAvatar,
   }) {
-    return showModalBottomSheet<_AvatarAction>(
+    return showKasyBottomSheet<_AvatarAction>(
       context: context,
-      useRootNavigator: true,
-      backgroundColor: context.colors.surface,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
-      ),
-      builder: (sheetContext) => SafeArea(
+      builder: (sheetContext) => KasySheetSurface(
+        showDragHandle: false,
         child: Padding(
           padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
           child: Column(
@@ -321,31 +319,26 @@ class _BottomSheetTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final Color fg = color ?? context.colors.onSurface;
-    return KasyFocusRing(
-      onActivate: onTap,
+    return KasyHover(
+      onTap: onTap,
+      focusable: true,
+      focusGapColor: context.colors.surface,
       borderRadius: BorderRadius.circular(KasyRadius.sm),
-      gapColor: context.colors.surface,
-      child: InkWell(
-        canRequestFocus: false,
-        onTap: onTap,
-        child: Padding(
-          padding: const EdgeInsets.symmetric(
-            horizontal: KasySpacing.md,
-            vertical: KasySpacing.smd,
-          ),
-          child: Row(
-            children: [
-              if (icon != null) ...[
-                Icon(icon, size: KasyIconSize.lg, color: fg),
-                const SizedBox(width: KasySpacing.sm),
-              ],
-              Text(
-                label,
-                style: context.textTheme.bodyLarge?.copyWith(color: fg),
-              ),
-            ],
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
+      child: Row(
+        children: [
+          if (icon != null) ...[
+            Icon(icon, size: KasyIconSize.lg, color: fg),
+            const SizedBox(width: KasySpacing.sm),
+          ],
+          Text(
+            label,
+            style: context.textTheme.bodyLarge?.copyWith(color: fg),
           ),
-        ),
+        ],
       ),
     );
   }

package/templates/firebase/lib/features/settings/ui/components/language_switcher.dart

@@ -2,10 +2,12 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/core/home_widgets/home_widget_mywidget_service.dart';
 import 'package:kasy_kit/core/shared_preferences/shared_preferences.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/app_locale_display.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -63,14 +65,9 @@ class LanguageSwitcher extends ConsumerWidget {
     AppLocale current,
   ) {
     final String sheetTitle = context.t.settings.language_title;
-    showModalBottomSheet<void>(
+    showKasyBottomSheet<void>(
       context: context,
-      useRootNavigator: true,
-      backgroundColor: context.colors.surface,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(KasyRadius.lg)),
-      ),
-      builder: (sheetContext) => SafeArea(
+      builder: (sheetContext) => KasySheetSurface(
         child: Padding(
           padding: const EdgeInsets.fromLTRB(
             KasySpacing.md,
@@ -81,15 +78,6 @@ class LanguageSwitcher extends ConsumerWidget {
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
-              Container(
-                width: 36,
-                height: 4,
-                margin: const EdgeInsets.only(bottom: KasySpacing.md),
-                decoration: BoxDecoration(
-                  color: sheetContext.colors.onSurface.withValues(alpha: 0.18),
-                  borderRadius: BorderRadius.circular(2),
-                ),
-              ),
               Align(
                 alignment: Alignment.centerLeft,
                 child: Text(
@@ -156,42 +144,35 @@ class _LocaleOptionTile extends StatelessWidget {
     final Color primary = context.colors.primary;
     final Color fg = isSelected ? primary : context.colors.onSurface;
 
-    return KasyFocusRing(
-      onActivate: onTap,
+    return KasyHover(
+      onTap: onTap,
+      focusable: true,
       borderRadius: BorderRadius.circular(KasyRadius.sm),
-      child: InkWell(
-        canRequestFocus: false,
-        onTap: onTap,
-        borderRadius: BorderRadius.circular(KasyRadius.sm),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(
-            horizontal: KasySpacing.xs,
-            vertical: KasySpacing.smd,
-          ),
-          child: Row(
-            children: <Widget>[
-              Expanded(
-                child: Text(
-                  locale.nativeName,
-                  style: context.textTheme.bodyLarge?.copyWith(
-                    color: fg,
-                    fontWeight:
-                        isSelected ? FontWeight.w600 : FontWeight.w400,
-                  ),
-                ),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.xs,
+        vertical: KasySpacing.smd,
+      ),
+      child: Row(
+        children: <Widget>[
+          Expanded(
+            child: Text(
+              locale.nativeName,
+              style: context.textTheme.bodyLarge?.copyWith(
+                color: fg,
+                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
               ),
-              if (isSelected)
-                Container(
-                  width: 10,
-                  height: 10,
-                  decoration: BoxDecoration(
-                    color: primary,
-                    shape: BoxShape.circle,
-                  ),
-                ),
-            ],
+            ),
           ),
-        ),
+          if (isSelected)
+            Container(
+              width: 10,
+              height: 10,
+              decoration: BoxDecoration(
+                color: primary,
+                shape: BoxShape.circle,
+              ),
+            ),
+        ],
       ),
     );
   }