From 064e753fb9257d22f425cd27183d5a4fe7eade7d Mon Sep 17 00:00:00 2001 From: bala Date: Sun, 30 Nov 2025 02:25:45 +0530 Subject: [PATCH] UI changes in sidemenu. --- lib/core/routing/route_paths.dart | 4 + lib/core/widgets/side_menu.dart | 101 +++++++++++------- .../screens/my_account/account_screen.dart | 31 ++++-- 3 files changed, 90 insertions(+), 46 deletions(-) diff --git a/lib/core/routing/route_paths.dart b/lib/core/routing/route_paths.dart index 7bf25ec..7a50b52 100644 --- a/lib/core/routing/route_paths.dart +++ b/lib/core/routing/route_paths.dart @@ -1,3 +1,7 @@ +import 'package:flutter/material.dart'; + +ValueNotifier selectedRoute = ValueNotifier("/dashboard"); + class AppRoutePaths { ///Auth static const auth = '/auth'; diff --git a/lib/core/widgets/side_menu.dart b/lib/core/widgets/side_menu.dart index 24b89d5..5a1df36 100644 --- a/lib/core/widgets/side_menu.dart +++ b/lib/core/widgets/side_menu.dart @@ -22,7 +22,7 @@ class SideMenu extends ConsumerWidget { children: [ // Header DrawerHeader( - decoration: BoxDecoration(color: Color(0xFF00BFFF)), + decoration: const BoxDecoration(color: Color(0xFF00BFFF)), child: SizedBox( width: double.infinity, child: Row( @@ -112,8 +112,10 @@ class SideMenu extends ConsumerWidget { // Section title widget Widget _sectionHeader(String title) { return Container( - padding: EdgeInsets.symmetric(vertical: 8), - decoration: BoxDecoration(color: Color.fromARGB(255, 225, 236, 255)), + padding: const EdgeInsets.symmetric(vertical: 8), + decoration: const BoxDecoration( + color: Color.fromARGB(255, 225, 236, 255), + ), child: Padding( padding: const EdgeInsets.only(left: 8.0), child: Text( @@ -130,51 +132,74 @@ class SideMenu extends ConsumerWidget { ); } - // Menu item widget + // Menu item widget with persistent left indicator Widget _menuItem( BuildContext context, String emoji, String title, String route, ) { - final bool isSelected = selected == route; + return ValueListenableBuilder( + valueListenable: selectedRoute, + builder: (_, current, __) { + final bool isSelected = current == route; - return Padding( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3), - child: InkWell( - borderRadius: BorderRadius.circular(10), - onTap: () { - Navigator.pop(context); // close drawer - - if (isSelected) return; // avoid duplicate navigation - - onItemSelected(route); - - Navigator.pushReplacementNamed(context, route); - }, - child: Container( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10), - decoration: BoxDecoration( - color: isSelected ? const Color(0x143B81F9) : Colors.transparent, + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3), + child: InkWell( borderRadius: BorderRadius.circular(10), - ), - child: Row( - children: [ - Text(emoji, style: const TextStyle(fontSize: 18)), - const SizedBox(width: 10), - Text( - title, - style: TextStyle( - fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal, - color: isSelected ? const Color(0xFF3B81F9) : Colors.black87, - fontSize: 16, - ), + onTap: () async { + Navigator.pop(context); + + selectedRoute.value = route; // ⭐ indicator ALWAYS updates + + if (ModalRoute.of(context)?.settings.name != route) { + Navigator.pushReplacementNamed(context, route); + } + }, + child: Container( + decoration: BoxDecoration( + color: isSelected + ? const Color(0x143B81F9) + : Colors.transparent, + borderRadius: BorderRadius.circular(10), ), - ], + child: Row( + children: [ + Container( + width: 4, + height: 48, + decoration: BoxDecoration( + color: isSelected + ? const Color(0xFF3B81F9) + : Colors.transparent, + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(10), + bottomLeft: Radius.circular(10), + ), + ), + ), + const SizedBox(width: 8), + Text(emoji, style: const TextStyle(fontSize: 18)), + const SizedBox(width: 10), + Text( + title, + style: TextStyle( + fontWeight: isSelected + ? FontWeight.w600 + : FontWeight.normal, + color: isSelected + ? const Color(0xFF3B81F9) + : Colors.black87, + fontSize: 16, + ), + ), + ], + ), + ), ), - ), - ), + ); + }, ); } - } diff --git a/lib/presentation/screens/my_account/account_screen.dart b/lib/presentation/screens/my_account/account_screen.dart index 725dee8..e1d3561 100644 --- a/lib/presentation/screens/my_account/account_screen.dart +++ b/lib/presentation/screens/my_account/account_screen.dart @@ -141,14 +141,28 @@ class _AccountScreenState extends ConsumerState { _row("Subscription", "growth_monthly"), _row("Period", "24 Nov 2025 - 24 Dec 2025"), const SizedBox(height: 20), - OutlinedButton( + ElevatedButton( onPressed: () {}, - style: OutlinedButton.styleFrom( - foregroundColor: Colors.red, - side: const BorderSide(color: Colors.red), + style: ElevatedButton.styleFrom( + backgroundColor: const Color( + 0xFFFF4C4C, + ), // override global primary color + foregroundColor: Colors.white, // text color + elevation: 6, + shadowColor: Colors.black.withValues(alpha: 0.2), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + ), padding: const EdgeInsets.symmetric(vertical: 14), + textStyle: const TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 8), + child: const Text("Cancel Subscription"), ), - child: const Text("Cancel Subscription"), ), ], ), @@ -233,9 +247,10 @@ class _AccountScreenState extends ConsumerState { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text(title, - style: - const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), + Text( + title, + style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold), + ), const SizedBox(height: 16), child, ],