kasy-cli 1.18.0 → 1.19.1

package/templates/firebase/lib/features/home/home_components_preview_registry.dart

@@ -236,20 +236,28 @@ ComponentPreviewDefinition? getComponentPreviewDefinition(
         title: 'DatePicker',
         variants: [
           ComponentPreviewVariant(
-            label: 'Without label',
-            builder: _buildDatePickerBasic,
+            label: 'Presentations',
+            builder: _buildDatePickerPresentations,
           ),
           ComponentPreviewVariant(
-            label: 'With label',
-            builder: _buildDatePickerWithLabel,
+            label: 'Range selection',
+            builder: _buildDatePickerRange,
           ),
           ComponentPreviewVariant(
-            label: 'With min & max',
-            builder: _buildDatePickerMinMax,
+            label: 'Multi-month',
+            builder: _buildDatePickerMultiMonth,
           ),
           ComponentPreviewVariant(
-            label: 'Disabled',
-            builder: _buildDatePickerDisabled,
+            label: 'Date formats',
+            builder: _buildDatePickerFormats,
+          ),
+          ComponentPreviewVariant(
+            label: 'Variants',
+            builder: _buildDatePickerVariants,
+          ),
+          ComponentPreviewVariant(
+            label: 'Field states',
+            builder: _buildDatePickerFieldStates,
           ),
         ],
       );
@@ -677,71 +685,6 @@ class _SidebarPreviewState extends State<_SidebarPreview> {
 
 
 // ─────────────────────────────────────────────────────────────────────────────
-// DatePicker — interactive demos
-// ─────────────────────────────────────────────────────────────────────────────
-
-Widget _buildDatePickerBasic(BuildContext context) =>
-    const _DatePickerPreview(variant: _DatePickerVariant.basic);
-
-Widget _buildDatePickerWithLabel(BuildContext context) =>
-    const _DatePickerPreview(variant: _DatePickerVariant.withLabel);
-
-Widget _buildDatePickerMinMax(BuildContext context) =>
-    const _DatePickerPreview(variant: _DatePickerVariant.minMax);
-
-Widget _buildDatePickerDisabled(BuildContext context) =>
-    const _DatePickerPreview(variant: _DatePickerVariant.disabled);
-
-enum _DatePickerVariant { basic, withLabel, minMax, disabled }
-
-class _DatePickerPreview extends StatefulWidget {
-  const _DatePickerPreview({required this.variant});
-
-  final _DatePickerVariant variant;
-
-  @override
-  State<_DatePickerPreview> createState() => _DatePickerPreviewState();
-}
-
-class _DatePickerPreviewState extends State<_DatePickerPreview> {
-  DateTime? _date;
-
-  @override
-  Widget build(BuildContext context) {
-    final DateTime today = DateTime.now();
-    final DateTime minDate = today.subtract(const Duration(days: 30));
-    final DateTime maxDate = today.add(const Duration(days: 60));
-
-    return Padding(
-      padding: const EdgeInsets.all(KasySpacing.md),
-      child: switch (widget.variant) {
-        _DatePickerVariant.basic => KasyDatePicker(
-            value: _date,
-            onChanged: (d) => setState(() => _date = d),
-          ),
-        _DatePickerVariant.withLabel => KasyDatePicker(
-            label: 'Date of birth',
-            value: _date,
-            onChanged: (d) => setState(() => _date = d),
-          ),
-        _DatePickerVariant.minMax => KasyDatePicker(
-            label: 'Appointment date',
-            value: _date,
-            minDate: minDate,
-            maxDate: maxDate,
-            onChanged: (d) => setState(() => _date = d),
-          ),
-        _DatePickerVariant.disabled => KasyDatePicker(
-            label: 'Locked date',
-            value: today,
-            enabled: false,
-            onChanged: (d) => setState(() => _date = d),
-          ),
-      },
-    );
-  }
-}
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Tabs — interactive demos
 // ─────────────────────────────────────────────────────────────────────────────
@@ -8607,3 +8550,444 @@ class _SwipePreviewTile extends StatelessWidget {
     );
   }
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DatePicker — Presentations
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Maps the running app's locale onto a [KasyDatePickerLocale] preset so the
+/// preview demonstrates the same regional defaults (month names, week start,
+/// date format) the user would see in their own app.
+KasyDatePickerLocale _datePickerLocaleForApp(BuildContext context) {
+  switch (Localizations.localeOf(context).languageCode) {
+    case 'es':
+      return KasyDatePickerLocale.es;
+    case 'pt':
+      return KasyDatePickerLocale.pt;
+    default:
+      return KasyDatePickerLocale.en;
+  }
+}
+
+Widget _buildDatePickerPresentations(BuildContext context) =>
+    const _DatePickerPresentationsPreview();
+
+class _DatePickerPresentationsPreview extends StatefulWidget {
+  const _DatePickerPresentationsPreview();
+
+  @override
+  State<_DatePickerPresentationsPreview> createState() =>
+      _DatePickerPresentationsPreviewState();
+}
+
+class _DatePickerPresentationsPreviewState
+    extends State<_DatePickerPresentationsPreview> {
+  DateTime? _popoverDate;
+  DateTime? _dialogDate;
+  DateTime? _sheetDate;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyDatePickerLocale locale = _datePickerLocaleForApp(context);
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        KasyDatePicker(
+          label: 'Popover',
+          placeholder: 'Choose a date',
+          value: _popoverDate,
+          onChanged: (d) => setState(() => _popoverDate = d),
+          locale: locale,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        KasyDatePicker(
+          label: 'Dialog',
+          placeholder: 'Choose a date',
+          value: _dialogDate,
+          onChanged: (d) => setState(() => _dialogDate = d),
+          presentation: KasyDatePickerPresentation.dialog,
+          locale: locale,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        KasyDatePicker(
+          label: 'Bottom sheet',
+          placeholder: 'Choose a date',
+          value: _sheetDate,
+          onChanged: (d) => setState(() => _sheetDate = d),
+          presentation: KasyDatePickerPresentation.bottomSheet,
+          locale: locale,
+        ),
+      ],
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DatePicker — Range selection (Airbnb-style start + end)
+// ─────────────────────────────────────────────────────────────────────────────
+
+Widget _buildDatePickerRange(BuildContext context) =>
+    const _DatePickerRangePreview();
+
+class _DatePickerRangePreview extends StatefulWidget {
+  const _DatePickerRangePreview();
+
+  @override
+  State<_DatePickerRangePreview> createState() =>
+      _DatePickerRangePreviewState();
+}
+
+class _DatePickerRangePreviewState extends State<_DatePickerRangePreview> {
+  KasyDateRange? _stay;
+  KasyDateRange? _project;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyDatePickerLocale locale = _datePickerLocaleForApp(context);
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Classic stay-style picker: tap a check-in date, then a check-out
+        // date. The calendar keeps the start highlighted while waiting for
+        // the end, then auto-closes after the second tap.
+        KasyDatePicker(
+          label: 'Stay',
+          placeholder: 'Check-in  ->  Check-out',
+          description: 'Tap a start date, then an end date.',
+          selectionMode: KasyDateSelectionMode.range,
+          range: _stay,
+          onRangeChanged: (r) => setState(() => _stay = r),
+          locale: locale,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // Dialog presentation of the same range mode — handy on smaller
+        // screens where the popover may not have enough room.
+        KasyDatePicker(
+          label: 'Project window (dialog)',
+          placeholder: 'Pick start  ->  end',
+          selectionMode: KasyDateSelectionMode.range,
+          range: _project,
+          onRangeChanged: (r) => setState(() => _project = r),
+          presentation: KasyDatePickerPresentation.dialog,
+          locale: locale,
+        ),
+      ],
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DatePicker — Multi-month (2 or 3 months side by side, Airbnb desktop look)
+// ─────────────────────────────────────────────────────────────────────────────
+
+Widget _buildDatePickerMultiMonth(BuildContext context) =>
+    const _DatePickerMultiMonthPreview();
+
+class _DatePickerMultiMonthPreview extends StatefulWidget {
+  const _DatePickerMultiMonthPreview();
+
+  @override
+  State<_DatePickerMultiMonthPreview> createState() =>
+      _DatePickerMultiMonthPreviewState();
+}
+
+class _DatePickerMultiMonthPreviewState
+    extends State<_DatePickerMultiMonthPreview> {
+  KasyDateRange? _stay;
+  DateTime? _single;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyDatePickerLocale locale = _datePickerLocaleForApp(context);
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // 3-month layout combined with range selection — the classic
+        // Airbnb / Booking desktop pattern for picking a stay.
+        KasyDatePicker(
+          label: '3 months  +  range',
+          placeholder: 'Check-in  ->  Check-out',
+          description: 'Pass monthsToShow: 3 to opt in. Best on wide canvases.',
+          selectionMode: KasyDateSelectionMode.range,
+          range: _stay,
+          onRangeChanged: (r) => setState(() => _stay = r),
+          monthsToShow: 3,
+          locale: locale,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // 2-month layout in single-date mode — useful when there's enough
+        // horizontal room but you still want one tap to commit.
+        KasyDatePicker(
+          label: '2 months  +  single date',
+          placeholder: 'Pick a date',
+          value: _single,
+          onChanged: (d) => setState(() => _single = d),
+          monthsToShow: 2,
+          locale: locale,
+        ),
+      ],
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DatePicker — Variants (filled, no backdrop, no suffix, no focus border)
+// ─────────────────────────────────────────────────────────────────────────────
+
+Widget _buildDatePickerVariants(BuildContext context) =>
+    const _DatePickerVariantsPreview();
+
+class _DatePickerVariantsPreview extends StatefulWidget {
+  const _DatePickerVariantsPreview();
+
+  @override
+  State<_DatePickerVariantsPreview> createState() =>
+      _DatePickerVariantsPreviewState();
+}
+
+class _DatePickerVariantsPreviewState
+    extends State<_DatePickerVariantsPreview> {
+  DateTime? _filledDate;
+  DateTime? _noBarrierDate;
+  DateTime? _noSuffixDate;
+  DateTime? _noFocusDate;
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyDatePickerLocale locale = _datePickerLocaleForApp(context);
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Filled / flat surface — matches KasyTextField.secondary, useful on
+        // backgrounds where the default drop shadow feels heavy.
+        KasyDatePicker(
+          label: 'Filled (no shadow)',
+          placeholder: 'Choose a date',
+          value: _filledDate,
+          onChanged: (d) => setState(() => _filledDate = d),
+          variant: KasyTextFieldVariant.secondary,
+          locale: locale,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // Popover without the dimmed backdrop — feels lighter / tooltip-like.
+        KasyDatePicker(
+          label: 'No backdrop',
+          placeholder: 'Choose a date',
+          description: 'Popover floats over the page without a dimmed scrim.',
+          value: _noBarrierDate,
+          onChanged: (d) => setState(() => _noBarrierDate = d),
+          showBarrier: false,
+          locale: locale,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // No calendar icon in the suffix slot.
+        KasyDatePicker(
+          label: 'No suffix icon',
+          placeholder: 'Choose a date',
+          value: _noSuffixDate,
+          onChanged: (d) => setState(() => _noSuffixDate = d),
+          showSuffix: false,
+          locale: locale,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        // Disables the blue focus outline while the calendar is open — quieter
+        // affordance for very dense forms.
+        KasyDatePicker(
+          label: 'No focus border',
+          placeholder: 'Choose a date',
+          value: _noFocusDate,
+          onChanged: (d) => setState(() => _noFocusDate = d),
+          focusBorder: false,
+          locale: locale,
+        ),
+      ],
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DatePicker — Date formats
+// ─────────────────────────────────────────────────────────────────────────────
+
+Widget _buildDatePickerFormats(BuildContext context) =>
+    const _DatePickerFormatsPreview();
+
+const List<String> _kEnglishMonthsLong = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+String _longUsFormat(DateTime d) =>
+    '${_kEnglishMonthsLong[d.month - 1]} ${d.day}, ${d.year}';
+
+class _DatePickerFormatsPreview extends StatefulWidget {
+  const _DatePickerFormatsPreview();
+
+  @override
+  State<_DatePickerFormatsPreview> createState() =>
+      _DatePickerFormatsPreviewState();
+}
+
+// Each tab maps to one preset (or to the "Auto" / "Custom" entries). The
+// `format` field is null for the two non-preset entries; the build method
+// branches on those.
+class _DatePickerFormatOption {
+  const _DatePickerFormatOption({
+    required this.label,
+    required this.description,
+    this.format,
+    this.useAppLocale = false,
+    this.customFormat,
+  });
+
+  final String label;
+  final String description;
+  final KasyDateFormat? format;
+  final bool useAppLocale;
+  final String Function(DateTime)? customFormat;
+}
+
+const List<_DatePickerFormatOption> _kDatePickerFormatOptions = [
+  _DatePickerFormatOption(
+    label: 'Auto',
+    description: 'Follows the active app language (US, South American, …).',
+    useAppLocale: true,
+  ),
+  _DatePickerFormatOption(
+    label: 'US',
+    description: 'MM / DD / YYYY — United States.',
+    format: KasyDateFormat.us,
+  ),
+  _DatePickerFormatOption(
+    label: 'South American',
+    description: 'DD / MM / YYYY — South America, UK, Spain, Portugal.',
+    format: KasyDateFormat.southAmerican,
+  ),
+  _DatePickerFormatOption(
+    label: 'European',
+    description: 'DD.MM.YYYY — Germany, Austria, Switzerland.',
+    format: KasyDateFormat.european,
+  ),
+  _DatePickerFormatOption(
+    label: 'ISO 8601',
+    description: 'YYYY-MM-DD — international standard.',
+    format: KasyDateFormat.iso,
+  ),
+  _DatePickerFormatOption(
+    label: 'East Asian',
+    description: 'YYYY / MM / DD — Japan, China, Korea.',
+    format: KasyDateFormat.eastAsian,
+  ),
+  _DatePickerFormatOption(
+    label: 'Custom',
+    description: 'Any layout via the formatDate callback (long form here).',
+    customFormat: _longUsFormat,
+  ),
+];
+
+class _DatePickerFormatsPreviewState extends State<_DatePickerFormatsPreview> {
+  int _tab = 0;
+  DateTime _date = DateTime(2026, 5, 12);
+
+  @override
+  Widget build(BuildContext context) {
+    final _DatePickerFormatOption option = _kDatePickerFormatOptions[_tab];
+    final KasyDatePickerLocale appLocale = _datePickerLocaleForApp(context);
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Secondary (underline) variant keeps the format switcher visually
+        // light on phones — pill tabs were too bulky for a switch with many
+        // labels and hug mode lets the row scroll horizontally when needed.
+        KasyTabs(
+          tabs: [
+            for (final o in _kDatePickerFormatOptions) o.label,
+          ],
+          selectedIndex: _tab,
+          onTabSelected: (i) => setState(() => _tab = i),
+          variant: KasyTabsVariant.secondary,
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        KasyDatePicker(
+          label: option.label,
+          description: option.description,
+          value: _date,
+          onChanged: (d) => setState(() => _date = d),
+          locale: option.useAppLocale ? appLocale : KasyDatePickerLocale.en,
+          dateFormat: option.format,
+          formatDate: option.customFormat,
+        ),
+      ],
+    );
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// DatePicker — Field states
+// ─────────────────────────────────────────────────────────────────────────────
+
+Widget _buildDatePickerFieldStates(BuildContext context) =>
+    const _DatePickerFieldStatesPreview();
+
+const List<String> _kEnglishMonthAbbrev = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+
+String _abbrevFormat(DateTime d) =>
+    '${_kEnglishMonthAbbrev[d.month - 1]} ${d.day}, ${d.year}';
+
+class _DatePickerFieldStatesPreview extends StatefulWidget {
+  const _DatePickerFieldStatesPreview();
+
+  @override
+  State<_DatePickerFieldStatesPreview> createState() =>
+      _DatePickerFieldStatesPreviewState();
+}
+
+class _DatePickerFieldStatesPreviewState
+    extends State<_DatePickerFieldStatesPreview> {
+  DateTime? _deadline;
+  DateTime? _shipDate;
+  final DateTime _disabledDate = DateTime(2026, 6, 15);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        KasyDatePicker(
+          label: 'Deadline',
+          placeholder: 'Select a deadline',
+          showRequiredIndicator: true,
+          description: 'Required for the project timeline.',
+          value: _deadline,
+          onChanged: (d) => setState(() => _deadline = d),
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        KasyDatePicker(
+          label: 'Ship date',
+          placeholder: 'Choose a date',
+          errorText: 'Please select a valid ship date.',
+          value: _shipDate,
+          onChanged: (d) => setState(() => _shipDate = d),
+        ),
+        const SizedBox(height: KasySpacing.lg),
+        KasyDatePicker(
+          label: 'Disabled date',
+          enabled: false,
+          value: _disabledDate,
+          formatDate: _abbrevFormat,
+          description: 'The date cannot be changed when the order is locked.',
+        ),
+      ],
+    );
+  }
+}

package/templates/firebase/lib/features/home/home_page.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/core/bottom_menu/bart_inner_paths.dart';
-import 'package:kasy_kit/core/bottom_menu/kasy_bart_navigation.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/states/components/maybe_ask_rating.dart';
 import 'package:kasy_kit/core/states/components/maybe_show_update_bottom_sheet.dart';
@@ -60,13 +59,9 @@ class HomePage extends ConsumerWidget {
                             gradient: _featuresGradient(context, isDark),
                             onOpen: () {
                               KasyHaptics.medium(context);
-                              Navigator.of(context)
-                                  .pushNamed(bartInnerPath('home', 'features'))
-                                  .then((_) {
-                                if (context.mounted) {
-                                  kasyShowBottomBar(context);
-                                }
-                              });
+                              Navigator.of(context).pushNamed(
+                                bartInnerPath('home', 'features'),
+                              );
                             },
                           );
                           final componentsCard = _DashboardGradientCard(
@@ -79,15 +74,9 @@ class HomePage extends ConsumerWidget {
                             gradient: _componentsGradient(context, isDark),
                             onOpen: () {
                               KasyHaptics.medium(context);
-                              Navigator.of(context)
-                                  .pushNamed(
-                                    bartInnerPath('home', 'components'),
-                                  )
-                                  .then((_) {
-                                if (context.mounted) {
-                                  kasyShowBottomBar(context);
-                                }
-                              });
+                              Navigator.of(context).pushNamed(
+                                bartInnerPath('home', 'components'),
+                              );
                             },
                           );
                           if (isWide) {
@@ -135,10 +124,7 @@ class HomePage extends ConsumerWidget {
   }
 
   /// Soft product-style gradients (calm blues / lilac); same geometry, distinct hue.
-  static LinearGradient _componentsGradient(
-    BuildContext context,
-    bool isDark,
-  ) {
+  static LinearGradient _componentsGradient(BuildContext context, bool isDark) {
     if (isDark) {
       return LinearGradient(
         begin: Alignment.topLeft,
@@ -153,11 +139,7 @@ class HomePage extends ConsumerWidget {
     return const LinearGradient(
       begin: Alignment.topLeft,
       end: Alignment.bottomRight,
-      colors: [
-        Color(0xFFDCE6FF),
-        Color(0xFFF0F6FF),
-        Color(0xFFE2E8F6),
-      ],
+      colors: [Color(0xFFDCE6FF), Color(0xFFF0F6FF), Color(0xFFE2E8F6)],
     );
   }
 
@@ -176,11 +158,7 @@ class HomePage extends ConsumerWidget {
     return const LinearGradient(
       begin: Alignment.topLeft,
       end: Alignment.bottomRight,
-      colors: [
-        Color(0xFFE2D8FC),
-        Color(0xFFF5ECFA),
-        Color(0xFFDCE8FF),
-      ],
+      colors: [Color(0xFFE2D8FC), Color(0xFFF5ECFA), Color(0xFFDCE8FF)],
     );
   }
 }
@@ -205,22 +183,23 @@ class _DashboardGradientCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final bool isDark = Theme.of(context).brightness == Brightness.dark;
-    final Color titleColor =
-        isDark ? Colors.white : const Color(0xFF1A1D26);
+    final Color titleColor = isDark ? Colors.white : const Color(0xFF1A1D26);
     final Color subtitleColor = titleColor.withValues(alpha: 0.62);
     final Color arrowCircleColor = isDark
         ? Colors.black.withValues(alpha: 0.38)
         : Colors.white.withValues(alpha: 0.82);
-    final Color arrowIconColor =
-        isDark ? Colors.white : const Color(0xFF1A1D26);
+    final Color arrowIconColor = isDark
+        ? Colors.white
+        : const Color(0xFF1A1D26);
     final Color countBadgeFill = isDark
         ? Colors.white.withValues(alpha: 0.14)
         : Colors.white.withValues(alpha: 0.38);
     final Color countBadgeBorder = isDark
         ? Colors.white.withValues(alpha: 0.24)
         : Colors.black.withValues(alpha: 0.06);
-    final Color countBadgeLabelColor =
-        isDark ? Colors.white.withValues(alpha: 0.94) : countBadgeTextColor;
+    final Color countBadgeLabelColor = isDark
+        ? Colors.white.withValues(alpha: 0.94)
+        : countBadgeTextColor;
     final Color cardOutlineColor = context.colors.outline.withValues(
       alpha: isDark ? 0.34 : 0.30,
     );
@@ -246,9 +225,7 @@ class _DashboardGradientCard extends StatelessWidget {
                   child: DecoratedBox(
                     decoration: BoxDecoration(
                       color: countBadgeFill,
-                      borderRadius: BorderRadius.circular(
-                        KasyRadius.full,
-                      ),
+                      borderRadius: BorderRadius.circular(KasyRadius.full),
                       border: Border.all(color: countBadgeBorder),
                     ),
                     child: Padding(