Refactor: enhance code readability, adjust modal bottom sheet padding and root navigator usage, and increase connect button height.

lib/features/agents/presentation/screens/agent_detail_screen.dart

@@ -30,7 +30,9 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
     WidgetsBinding.instance.addPostFrameCallback((_) {
       final authState = ref.read(authProvider);
       if (authState.status == AuthStatus.authenticated) {
-        ref.read(agentDetailProvider(widget.agentId).notifier).loadConnectionStatus();
+        ref
+            .read(agentDetailProvider(widget.agentId).notifier)
+            .loadConnectionStatus();
       }
     });
   }
@@ -41,7 +43,8 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
 
     if (state.isLoading) {
       return const Center(
-          child: CircularProgressIndicator(color: AppColors.accentOrange));
+        child: CircularProgressIndicator(color: AppColors.accentOrange),
+      );
     }
     if (state.error != null) {
       return _buildError(state.error!);
@@ -56,20 +59,28 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            const Icon(Icons.error_outline,
+            const Icon(
-                size: 48, color: AppColors.accentOrange),
+              Icons.error_outline,
+              size: 48,
+              color: AppColors.accentOrange,
+            ),
             const SizedBox(height: 16),
-            const Text('Unable to Load Profile',
+            const Text(
+              'Unable to Load Profile',
               style: TextStyle(
                 fontFamily: 'Fractul',
                 fontSize: 18,
                 fontWeight: FontWeight.w700,
-                    color: AppColors.primaryDark)),
+                color: AppColors.primaryDark,
+              ),
+            ),
             const SizedBox(height: 12),
             TextButton(
               onPressed: () => context.pop(),
-              child: const Text('Go Back',
+              child: const Text(
-                  style: TextStyle(color: AppColors.accentOrange)),
+                'Go Back',
+                style: TextStyle(color: AppColors.accentOrange),
+              ),
             ),
           ],
         ),
@@ -146,8 +157,11 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
                 fit: BoxFit.cover,
                 errorWidget: (_) => Container(
                   color: const Color(0xFFC4D9D4),
-                  child: const Icon(Icons.person,
+                  child: const Icon(
-                      size: 80, color: AppColors.primaryDark),
+                    Icons.person,
+                    size: 80,
+                    color: AppColors.primaryDark,
+                  ),
                 ),
               ),
               // Gradient overlay
@@ -192,9 +206,7 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
             label: 'Available.',
             active: isAvailable,
             connState: connState,
-            onConnect: isAvailable
+            onConnect: isAvailable ? () => _handleConnect(state) : null,
-                ? () => _handleConnect(state)
-                : null,
           ),
           const SizedBox(height: 10),
           // Unavailable row
@@ -203,9 +215,7 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
             label: 'Unavailable.',
             active: !isAvailable,
             connState: connState,
-            onConnect: !isAvailable
+            onConnect: !isAvailable ? () => _handleConnect(state) : null,
-                ? () => _handleConnect(state)
-                : null,
           ),
         ],
       ),
@@ -224,7 +234,9 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(15),
         border: Border.all(
-            color: AppColors.primaryDark.withValues(alpha: 0.15), width: 1),
+          color: AppColors.primaryDark.withValues(alpha: 0.15),
+          width: 1,
+        ),
       ),
       child: Row(
         children: [
@@ -270,7 +282,10 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
   }
 
   Widget _buildConnectButton(
-      String connState, bool isAvailable, VoidCallback? onConnect) {
+    String connState,
+    bool isAvailable,
+    VoidCallback? onConnect,
+  ) {
     Color bgColor;
     Color textColor;
     String label;
@@ -291,7 +306,9 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
         break;
       default:
         bgColor = isAvailable ? AppColors.accentOrange : AppColors.primaryDark;
-        textColor = isAvailable ? AppColors.primaryDark : const Color(0xFFF0F5FC);
+        textColor = isAvailable
+            ? AppColors.primaryDark
+            : const Color(0xFFF0F5FC);
         label = 'Connect';
         enabled = true;
     }
@@ -340,16 +357,21 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
     showModalBottomSheet(
       context: context,
       isScrollControlled: true,
+      useRootNavigator: true,
       backgroundColor: Colors.transparent,
       builder: (ctx) => Padding(
-        padding: EdgeInsets.only(
+        padding: EdgeInsets.only(bottom: MediaQuery.of(ctx).viewInsets.bottom),
-            bottom: MediaQuery.of(ctx).viewInsets.bottom),
         child: Container(
           decoration: const BoxDecoration(
             color: Colors.white,
             borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
           ),
-          padding: const EdgeInsets.all(24),
+          padding: EdgeInsets.fromLTRB(
+            24,
+            24,
+            24,
+            24 + MediaQuery.of(ctx).padding.bottom,
+          ),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -368,7 +390,10 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
                   ),
                   GestureDetector(
                     onTap: () => Navigator.pop(ctx),
-                    child: const Icon(Icons.close, color: AppColors.primaryDark),
+                    child: const Icon(
+                      Icons.close,
+                      color: AppColors.primaryDark,
+                    ),
                   ),
                 ],
               ),
@@ -396,14 +421,15 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
                   border: OutlineInputBorder(
                     borderRadius: BorderRadius.circular(10),
                     borderSide: BorderSide(
-                        color: AppColors.primaryDark.withValues(alpha: 0.15)),
+                      color: AppColors.primaryDark.withValues(alpha: 0.15),
+                    ),
                   ),
                 ),
               ),
               const SizedBox(height: 16),
               SizedBox(
                 width: double.infinity,
-                height: 50,
+                height: 60,
                 child: ElevatedButton(
                   onPressed: () async {
                     Navigator.pop(ctx);
@@ -414,7 +440,8 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
                   style: ElevatedButton.styleFrom(
                     backgroundColor: AppColors.accentOrange,
                     shape: RoundedRectangleBorder(
-                        borderRadius: BorderRadius.circular(15)),
+                      borderRadius: BorderRadius.circular(15),
+                    ),
                   ),
                   child: const Text(
                     'Send Request',
@@ -448,7 +475,9 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(15),
           border: Border.all(
-              color: AppColors.primaryDark.withValues(alpha: 0.15), width: 1),
+            color: AppColors.primaryDark.withValues(alpha: 0.15),
+            width: 1,
+          ),
         ),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
@@ -541,7 +570,11 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
               if (agent.isVerified) ...[
                 const Padding(
                   padding: EdgeInsets.only(bottom: 1),
-                  child: Icon(Icons.verified, size: 16, color: Color(0xFF2196F3)),
+                  child: Icon(
+                    Icons.verified,
+                    size: 16,
+                    color: Color(0xFF2196F3),
+                  ),
                 ),
                 const SizedBox(width: 4),
               ],
@@ -587,8 +620,11 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               if (agent.location.isNotEmpty) ...[
-                Icon(Icons.location_on,
+                Icon(
-                    size: 16, color: AppColors.primaryDark.withValues(alpha: 0.7)),
+                  Icons.location_on,
+                  size: 16,
+                  color: AppColors.primaryDark.withValues(alpha: 0.7),
+                ),
                 const SizedBox(width: 4),
                 Text(
                   agent.location,
@@ -601,8 +637,11 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
                 ),
                 const SizedBox(width: 20),
               ],
-              Icon(Icons.calendar_today,
+              Icon(
-                  size: 14, color: AppColors.primaryDark.withValues(alpha: 0.7)),
+                Icons.calendar_today,
+                size: 14,
+                color: AppColors.primaryDark.withValues(alpha: 0.7),
+              ),
               const SizedBox(width: 4),
               Text(
                 agent.memberSinceText,
@@ -665,12 +704,14 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
           const SizedBox(height: 22),
           // Years
           if (state.yearsInExperience != '-')
-            _buildExperienceItem(
+            _buildExperienceItem('Years in Experience', [
-                'Years in Experience', [state.yearsInExperience]),
+              state.yearsInExperience,
+            ]),
           // Contracts
           if (state.contractsClosed != '-')
-            _buildExperienceItem(
+            _buildExperienceItem('Number of contracts closed', [
-                'Number of contracts closed', [state.contractsClosed]),
+              state.contractsClosed,
+            ]),
           // Licensing Areas
           if (state.licensingAreas.isNotEmpty)
             _buildLicensingAreas(state.licensingAreas),
@@ -699,15 +740,21 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
           ),
         ),
         const SizedBox(height: 14),
-        ...items.map((item) => Padding(
+        ...items.map(
+          (item) => Padding(
             padding: const EdgeInsets.only(left: 10, bottom: 4),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 const Padding(
                   padding: EdgeInsets.only(top: 2),
-                    child: Text('\u2022  ',
+                  child: Text(
-                        style: TextStyle(fontSize: 15, color: AppColors.primaryDark)),
+                    '\u2022  ',
+                    style: TextStyle(
+                      fontSize: 15,
+                      color: AppColors.primaryDark,
+                    ),
+                  ),
                 ),
                 Expanded(
                   child: Text(
@@ -722,9 +769,13 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
                 ),
               ],
             ),
-            )),
+          ),
+        ),
         const SizedBox(height: 16),
-        Divider(color: AppColors.primaryDark.withValues(alpha: 0.15), height: 1),
+        Divider(
+          color: AppColors.primaryDark.withValues(alpha: 0.15),
+          height: 1,
+        ),
         const SizedBox(height: 10),
       ],
     );
@@ -761,13 +812,15 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
     String bestExp = '';
     for (final fv in state.fieldValues) {
       final slug = fv.fieldSlug.toLowerCase();
-      if (slug.contains('work_environment') || slug.contains('preferred_environment')) {
+      if (slug.contains('work_environment') ||
+          slug.contains('preferred_environment')) {
         if (fv.textValue != null) workEnv = fv.textValue!;
         if (fv.jsonValue is List) {
           workEnv = (fv.jsonValue as List).map((e) => e.toString()).join(', ');
         }
       }
-      if (slug.contains('best_experience') || slug.contains('amazing_experience')) {
+      if (slug.contains('best_experience') ||
+          slug.contains('amazing_experience')) {
         if (fv.textValue != null) bestExp = fv.textValue!;
       }
     }
@@ -859,7 +912,8 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
           ],
           if (items != null && items.isNotEmpty) ...[
             const SizedBox(height: 8),
-            ...items.map((item) => Padding(
+            ...items.map(
+              (item) => Padding(
                 padding: const EdgeInsets.symmetric(vertical: 1),
                 child: Text(
                   item,
@@ -869,7 +923,8 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
                     color: AppColors.primaryDark,
                   ),
                 ),
-                )),
+              ),
+            ),
           ],
           if (description != null) ...[
             const SizedBox(height: 8),
@@ -917,11 +972,12 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
             ),
           ),
           const SizedBox(height: 16),
-          ...state.specializationCards
+          ...state.specializationCards.map(
-              .map((card) => Padding(
+            (card) => Padding(
               padding: const EdgeInsets.only(bottom: 12),
               child: _SpecializationCardWidget(card: card),
-                  )),
+            ),
+          ),
         ],
       ),
     );
@@ -944,7 +1000,9 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
           ),
           const SizedBox(height: 8),
           Divider(
-              color: AppColors.primaryDark.withValues(alpha: 0.15), height: 1),
+            color: AppColors.primaryDark.withValues(alpha: 0.15),
+            height: 1,
+          ),
           const SizedBox(height: 8),
           const Text(
             'Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.',
@@ -970,7 +1028,6 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
       ),
     );
   }
-
 }
 
 // ── Expandable Chips Section ──
@@ -1018,7 +1075,8 @@ class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
           spacing: 10,
           runSpacing: 10,
           children: [
-            ...showItems.map((item) => IntrinsicWidth(
+            ...showItems.map(
+              (item) => IntrinsicWidth(
                 child: Container(
                   height: 28,
                   padding: const EdgeInsets.symmetric(horizontal: 10),
@@ -1027,7 +1085,8 @@ class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
                     borderRadius: BorderRadius.circular(15),
                     border: Border.all(
                       color: AppColors.primaryDark,
-                          width: 0.7),
+                      width: 0.7,
+                    ),
                   ),
                   child: Text(
                     item,
@@ -1039,7 +1098,8 @@ class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
                     ),
                   ),
                 ),
-                )),
+              ),
+            ),
             if (hasMore)
               GestureDetector(
                 onTap: () => setState(() => _expanded = !_expanded),
@@ -1054,7 +1114,8 @@ class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
                         color: _expanded
                             ? AppColors.accentOrange
                             : AppColors.primaryDark.withValues(alpha: 0.15),
-                          width: 1),
+                        width: 1,
+                      ),
                     ),
                     child: Row(
                       mainAxisSize: MainAxisSize.min,
@@ -1066,8 +1127,9 @@ class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
                           style: TextStyle(
                             fontFamily: 'SourceSerif4',
                             fontSize: _expanded ? 13 : 15,
-                            fontWeight:
+                            fontWeight: _expanded
-                                _expanded ? FontWeight.w700 : FontWeight.w300,
+                                ? FontWeight.w700
+                                : FontWeight.w300,
                             color: _expanded
                                 ? AppColors.accentOrange
                                 : AppColors.primaryDark,
@@ -1075,8 +1137,11 @@ class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
                         ),
                         if (_expanded) ...[
                           const SizedBox(width: 2),
-                          const Icon(Icons.keyboard_arrow_up,
+                          const Icon(
-                              size: 14, color: AppColors.accentOrange),
+                            Icons.keyboard_arrow_up,
+                            size: 14,
+                            color: AppColors.accentOrange,
+                          ),
                         ],
                       ],
                     ),
@@ -1086,7 +1151,10 @@ class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
           ],
         ),
         const SizedBox(height: 14),
-        Divider(color: AppColors.primaryDark.withValues(alpha: 0.15), height: 1),
+        Divider(
+          color: AppColors.primaryDark.withValues(alpha: 0.15),
+          height: 1,
+        ),
         const SizedBox(height: 10),
       ],
     );
@@ -1133,7 +1201,8 @@ class _ExpandableCertificationsSectionState
           ),
         ),
         const SizedBox(height: 16),
-        ...showCerts.map((cert) => Padding(
+        ...showCerts.map(
+          (cert) => Padding(
             padding: const EdgeInsets.only(left: 14, bottom: 16),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -1143,9 +1212,13 @@ class _ExpandableCertificationsSectionState
                   children: [
                     const Padding(
                       padding: EdgeInsets.only(top: 2),
-                        child: Text('\u2022  ',
+                      child: Text(
+                        '\u2022  ',
                         style: TextStyle(
-                                fontSize: 14, color: AppColors.primaryDark)),
+                          fontSize: 14,
+                          color: AppColors.primaryDark,
+                        ),
+                      ),
                     ),
                     Expanded(
                       child: Text(
@@ -1167,25 +1240,26 @@ class _ExpandableCertificationsSectionState
                       style: TextStyle(
                         fontFamily: 'SourceSerif4',
                         fontSize: 14,
-                          color:
+                        color: AppColors.primaryDark.withValues(alpha: 0.5),
-                              AppColors.primaryDark.withValues(alpha: 0.5),
                       ),
                     ),
                   ),
               ],
             ),
-            )),
+          ),
+        ),
         if (hasMore)
           Center(
             child: GestureDetector(
               onTap: () => setState(() => _expanded = !_expanded),
               child: Container(
-                padding:
+                padding: const EdgeInsets.symmetric(
-                    const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
+                  horizontal: 14,
+                  vertical: 4,
+                ),
                 decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(15),
-                  border:
+                  border: Border.all(color: AppColors.accentOrange, width: 1),
-                      Border.all(color: AppColors.accentOrange, width: 1),
                 ),
                 child: Row(
                   mainAxisSize: MainAxisSize.min,
@@ -1263,7 +1337,9 @@ class _SpecializationCardWidgetState extends State<_SpecializationCardWidget> {
         color: Colors.white,
         borderRadius: BorderRadius.circular(15),
         border: Border.all(
-            color: AppColors.primaryDark.withValues(alpha: 0.7), width: 0.7),
+          color: AppColors.primaryDark.withValues(alpha: 0.7),
+          width: 0.7,
+        ),
       ),
       child: Column(
         children: [
@@ -1279,7 +1355,8 @@ class _SpecializationCardWidgetState extends State<_SpecializationCardWidget> {
             ),
           ),
           const SizedBox(height: 12),
-          ...values.map((v) => Padding(
+          ...values.map(
+            (v) => Padding(
               padding: const EdgeInsets.symmetric(vertical: 4),
               child: Text(
                 AgentDetailState.titleCase(v),
@@ -1291,18 +1368,20 @@ class _SpecializationCardWidgetState extends State<_SpecializationCardWidget> {
                 ),
                 textAlign: TextAlign.center,
               ),
-              )),
+            ),
+          ),
           if (hasMore) ...[
             const SizedBox(height: 10),
             GestureDetector(
               onTap: () => setState(() => _expanded = !_expanded),
               child: Container(
-                padding:
+                padding: const EdgeInsets.symmetric(
-                    const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
+                  horizontal: 14,
+                  vertical: 4,
+                ),
                 decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(15),
-                  border:
+                  border: Border.all(color: AppColors.accentOrange, width: 1),
-                      Border.all(color: AppColors.accentOrange, width: 1),
                 ),
                 child: Row(
                   mainAxisSize: MainAxisSize.min,