OHO-19(Adding email UI)
This commit is contained in:
parent
3f8f73890a
commit
c745226ee2
3 changed files with 75 additions and 103 deletions
|
|
@ -823,7 +823,6 @@ class _FinTrackHomePageState extends State<FinTrackHomePage>
|
||||||
accentColor: accentColor,
|
accentColor: accentColor,
|
||||||
primaryColor: primaryColor,
|
primaryColor: primaryColor,
|
||||||
cardColor: cardColor,
|
cardColor: cardColor,
|
||||||
floatingActionButtonLocation: FloatingActionButtonLocation.centerTop,
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
// ignore_for_file: deprecated_member_use
|
// ignore_for_file: deprecated_member_use
|
||||||
|
|
||||||
|
import 'dart:ui';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:monarch/support/add.dart';
|
import 'package:monarch/support/add.dart';
|
||||||
import 'package:monarch/main_pages/HomePage/homepage.dart';
|
import 'package:monarch/main_pages/HomePage/homepage.dart';
|
||||||
|
|
@ -20,130 +21,103 @@ class CustomNavBar extends StatelessWidget {
|
||||||
required this.backgroundColor,
|
required this.backgroundColor,
|
||||||
required this.accentColor,
|
required this.accentColor,
|
||||||
required this.primaryColor,
|
required this.primaryColor,
|
||||||
required this.cardColor, required FloatingActionButtonLocation floatingActionButtonLocation,
|
required this.cardColor,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Define navigation items configuration
|
// Navigation items
|
||||||
final List<NavItem> _navItems = const [
|
final List _navItems = const [
|
||||||
NavItem(
|
NavItem(icon: Icons.home_rounded, index: 0, page: FinTrackHomePage()),
|
||||||
icon: Icons.home_rounded,
|
NavItem(icon: Icons.bar_chart_rounded, index: 1, page: Statistics()),
|
||||||
index: 0,
|
NavItem(icon: Icons.settings_rounded, index: 2, page: AddExpenseScreen()),
|
||||||
page: FinTrackHomePage(),
|
|
||||||
),
|
|
||||||
NavItem(
|
|
||||||
icon: Icons.bar_chart_rounded,
|
|
||||||
index: 1,
|
|
||||||
page: Statistics(),
|
|
||||||
),
|
|
||||||
NavItem(
|
|
||||||
icon: Icons.settings_rounded,
|
|
||||||
index: 2,
|
|
||||||
page: AddExpenseScreen(),
|
|
||||||
),
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Container(
|
return Align(
|
||||||
margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
|
alignment: Alignment.bottomCenter,
|
||||||
height: 72,
|
child: Container(
|
||||||
decoration: BoxDecoration(
|
margin: const EdgeInsets.only(bottom: 20),
|
||||||
color: cardColor,
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||||
borderRadius: BorderRadius.circular(36),
|
height: 72,
|
||||||
boxShadow: [
|
width: MediaQuery.of(context).size.width * 0.7, // centered & responsive
|
||||||
BoxShadow(
|
decoration: BoxDecoration(
|
||||||
color: primaryColor.withOpacity(0.1),
|
color: cardColor.withOpacity(0.65),
|
||||||
blurRadius: 30,
|
borderRadius: BorderRadius.circular(40),
|
||||||
offset: const Offset(0, 8),
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: primaryColor.withOpacity(0.15),
|
||||||
|
blurRadius: 30,
|
||||||
|
offset: const Offset(0, 8),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(40),
|
||||||
|
child: BackdropFilter(
|
||||||
|
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
children:
|
||||||
|
_navItems
|
||||||
|
.map((item) => _buildNavItem(context, item))
|
||||||
|
.toList(),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
||||||
children: [
|
|
||||||
..._navItems.map((item) => _buildNavItem(context, item)),
|
|
||||||
_buildAddButton(context),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildNavItem(BuildContext context, NavItem item) {
|
Widget _buildNavItem(BuildContext context, NavItem item) {
|
||||||
final isActive = currentIndex == item.index;
|
final isActive = currentIndex == item.index;
|
||||||
|
return GestureDetector(
|
||||||
return Material(
|
onTap: () {
|
||||||
color: Colors.transparent,
|
onTap(item.index);
|
||||||
borderRadius: BorderRadius.circular(20),
|
Navigator.pushReplacement(
|
||||||
child: InkWell(
|
context,
|
||||||
borderRadius: BorderRadius.circular(20),
|
MaterialPageRoute(builder: (context) => item.page),
|
||||||
onTap: () {
|
);
|
||||||
onTap(item.index);
|
},
|
||||||
Navigator.pushReplacement(
|
child: Column(
|
||||||
context,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
MaterialPageRoute(builder: (context) => item.page),
|
children: [
|
||||||
);
|
AnimatedContainer(
|
||||||
},
|
duration: const Duration(milliseconds: 250),
|
||||||
child: Container(
|
width: isActive ? 38 : 30,
|
||||||
width: 48,
|
height: isActive ? 38 : 30,
|
||||||
height: 48,
|
decoration: BoxDecoration(
|
||||||
decoration: BoxDecoration(
|
color:
|
||||||
color: isActive ? primaryColor.withOpacity(0.1) : Colors.transparent,
|
isActive
|
||||||
borderRadius: BorderRadius.circular(20),
|
? primaryColor.withOpacity(0.15)
|
||||||
|
: Colors.transparent,
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
),
|
||||||
|
child: Icon(
|
||||||
|
item.icon,
|
||||||
|
color: isActive ? primaryColor : primaryColor.withOpacity(0.4),
|
||||||
|
size: 24,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
child: Icon(
|
const SizedBox(height: 4),
|
||||||
item.icon,
|
AnimatedContainer(
|
||||||
color: isActive ? primaryColor : primaryColor.withOpacity(0.4),
|
duration: const Duration(milliseconds: 250),
|
||||||
size: 24,
|
width: 6,
|
||||||
),
|
height: 6,
|
||||||
),
|
decoration: BoxDecoration(
|
||||||
),
|
color: isActive ? accentColor : Colors.transparent,
|
||||||
);
|
shape: BoxShape.circle,
|
||||||
}
|
),
|
||||||
|
|
||||||
Widget _buildAddButton(BuildContext context) {
|
|
||||||
return Container(
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: accentColor,
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: accentColor.withOpacity(0.3),
|
|
||||||
blurRadius: 12,
|
|
||||||
offset: const Offset(0, 4),
|
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
child: Material(
|
|
||||||
color: Colors.transparent,
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
child: InkWell(
|
|
||||||
onTap: () => Navigator.push(
|
|
||||||
context,
|
|
||||||
MaterialPageRoute(builder: (context) => const AddExpenseScreen()),
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
child: const Icon(
|
|
||||||
Icons.add_rounded,
|
|
||||||
color: Colors.white,
|
|
||||||
size: 24,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Navigation item model
|
// Nav item model
|
||||||
class NavItem {
|
class NavItem {
|
||||||
final IconData icon;
|
final IconData icon;
|
||||||
final int index;
|
final int index;
|
||||||
final Widget page;
|
final Widget page;
|
||||||
|
const NavItem({required this.icon, required this.index, required this.page});
|
||||||
const NavItem({
|
|
||||||
required this.icon,
|
|
||||||
required this.index,
|
|
||||||
required this.page,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -772,7 +772,6 @@ class StatisticsState extends State<Statistics> with TickerProviderStateMixin {
|
||||||
accentColor: accentColor,
|
accentColor: accentColor,
|
||||||
primaryColor: primaryColor,
|
primaryColor: primaryColor,
|
||||||
cardColor: cardColor,
|
cardColor: cardColor,
|
||||||
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue