From 6907d176da1f9142be484d2cbb8a0a394f9bfef7 Mon Sep 17 00:00:00 2001 From: Vaibhav Surve Date: Tue, 8 Jul 2025 16:06:11 +0530 Subject: [PATCH] feat(directory): enhance toggle UI for Directory and Notes views with improved styling and animations --- lib/view/directory/directory_main_screen.dart | 109 +++++++++++++++--- 1 file changed, 90 insertions(+), 19 deletions(-) diff --git a/lib/view/directory/directory_main_screen.dart b/lib/view/directory/directory_main_screen.dart index d66f39a..b8b1fdc 100644 --- a/lib/view/directory/directory_main_screen.dart +++ b/lib/view/directory/directory_main_screen.dart @@ -84,29 +84,100 @@ class DirectoryMainScreen extends StatelessWidget { children: [ // Toggle between Directory and Notes Padding( - padding: MySpacing.xy(8, 5), + padding: MySpacing.fromLTRB(8, 12, 8, 5), child: Obx(() { final isNotesView = controller.isNotesView.value; - return Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - IconButton( - tooltip: 'Directory View', - onPressed: () => controller.isNotesView.value = false, - icon: Icon( - Icons.contacts, - color: !isNotesView ? Colors.red : Colors.grey, + + return Container( + padding: EdgeInsets.all(2), + decoration: BoxDecoration( + color: const Color(0xFFF0F0F0), + borderRadius: BorderRadius.circular(10), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.05), + blurRadius: 4, + offset: const Offset(0, 2), ), - ), - IconButton( - tooltip: 'Notes View', - onPressed: () => controller.isNotesView.value = true, - icon: Icon( - Icons.notes, - color: isNotesView ? Colors.red : Colors.grey, + ], + ), + child: Row( + children: [ + Expanded( + child: GestureDetector( + onTap: () => controller.isNotesView.value = false, + child: AnimatedContainer( + duration: const Duration(milliseconds: 200), + padding: const EdgeInsets.symmetric( + vertical: 6, horizontal: 10), + decoration: BoxDecoration( + color: !isNotesView + ? Colors.red + : Colors.transparent, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.contacts, + size: 16, + color: !isNotesView + ? Colors.white + : Colors.grey), + const SizedBox(width: 6), + Text( + 'Directory', + style: TextStyle( + color: !isNotesView + ? Colors.white + : Colors.grey, + fontWeight: FontWeight.w600, + fontSize: 13, + ), + ), + ], + ), + ), + ), ), - ), - ], + Expanded( + child: GestureDetector( + onTap: () => controller.isNotesView.value = true, + child: AnimatedContainer( + duration: const Duration(milliseconds: 200), + padding: const EdgeInsets.symmetric( + vertical: 6, horizontal: 10), + decoration: BoxDecoration( + color: + isNotesView ? Colors.red : Colors.transparent, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.notes, + size: 16, + color: isNotesView + ? Colors.white + : Colors.grey), + const SizedBox(width: 6), + Text( + 'Notes', + style: TextStyle( + color: isNotesView + ? Colors.white + : Colors.grey, + fontWeight: FontWeight.w600, + fontSize: 13, + ), + ), + ], + ), + ), + ), + ), + ], + ), ); }), ),