feat(directory): enhance toggle UI for Directory and Notes views with improved styling and animations

This commit is contained in:
Vaibhav Surve 2025-07-08 16:06:11 +05:30
parent ae868bb0f6
commit 6907d176da

View File

@ -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,
),
),
],
),
),
),
),
],
),
);
}),
),