chnages has been made and fianace screen was created

This commit is contained in:
Daniah Ayad Al-sultani
2025-12-11 14:06:33 +03:00
parent 85b378ac37
commit a78f148790
5 changed files with 236 additions and 48 deletions

View File

@@ -1,18 +1,39 @@
import 'package:flutter/material.dart';
import '../widgets/finance_summary_card.dart';
import '../widgets/work_day_card.dart';
class FinanceScreen extends StatelessWidget {
class FinanceScreen extends StatefulWidget {
const FinanceScreen({super.key});
@override
State<FinanceScreen> createState() => _FinanceScreenState();
}
class _FinanceScreenState extends State<FinanceScreen> {
String dropdownValue = "الكل";
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.only(top: 20, bottom: 120),
children: const [
WorkDayCard(),
WorkDayCard(),
WorkDayCard(),
WorkDayCard(),
children: [
FinanceSummaryCard(
totalAmount: "333,000",
dropdownValue: dropdownValue,
onCalendarTap: () => showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2020),
lastDate: DateTime(2030),
),
onDropdownChanged: (value) {
setState(() => dropdownValue = value!);
},
),
const WorkDayCard(),
const WorkDayCard(),
const WorkDayCard(),
],
);
}

View File

@@ -0,0 +1,177 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class FinanceSummaryCard extends StatelessWidget {
final String totalAmount;
final String dropdownValue;
final VoidCallback onCalendarTap;
final ValueChanged<String?> onDropdownChanged;
const FinanceSummaryCard({
super.key,
required this.totalAmount,
required this.dropdownValue,
required this.onCalendarTap,
required this.onDropdownChanged,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 10),
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 10,
offset: Offset(0, 6),
),
],
),
child: Column(
children: [
/// ==========================
/// TOP AMOUNT + ICON
/// ==========================
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"د.ع $totalAmount",
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Color(0xFFBA4404),
),
),
Row(
children: [
const Text(
"المبلغ الكلي",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
),
const SizedBox(width: 10),
SvgPicture.asset("assets/images/money2.svg", width: 50),
],
),
],
),
const SizedBox(height: 20),
/// ==========================
/// MONTH FILTER BOX
/// ==========================
Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFF0A8F6B), width: 1),
borderRadius: BorderRadius.circular(16),
),
child: Row(
children: [
// CALENDAR BUTTON
GestureDetector(
onTap: onCalendarTap,
child: Container(
width: 90,
height: 60,
decoration: BoxDecoration(
color: const Color(0xFFEAEAEA),
borderRadius: BorderRadius.circular(14),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
"assets/images/calendar.svg",
width: 28,
),
const SizedBox(height: 4),
const Text("الشهر", style: TextStyle(fontSize: 15)),
],
),
),
),
const SizedBox(width: 14),
// DROPDOWN MENU
Expanded(
child: Directionality(
textDirection: TextDirection.rtl,
child: Container(
height: 60,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: const Color(0xFFEAEAEA),
borderRadius: BorderRadius.circular(14),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: dropdownValue,
icon: const Icon(
Icons.arrow_drop_down,
size: 35,
color: Color(0xFF0A8F6B),
),
style: const TextStyle(
fontSize: 20,
color: Color.from(
alpha: 1,
red: 0,
green: 0,
blue: 0,
),
fontWeight: FontWeight.bold,
),
onChanged: onDropdownChanged,
items: const [
DropdownMenuItem(
value: "الكل",
child: Directionality(
textDirection: TextDirection.rtl,
child: Text("الكل"),
),
),
DropdownMenuItem(
value: "ساعات أضافية",
child: Directionality(
textDirection: TextDirection.rtl,
child: Text("ساعات أضافية"),
),
),
DropdownMenuItem(
value: "مكافئة",
child: Directionality(
textDirection: TextDirection.rtl,
child: Text("مكافئة"),
),
),
DropdownMenuItem(
value: " عقوبة",
child: Directionality(
textDirection: TextDirection.rtl,
child: Text(" عقوبة"),
),
),
],
),
),
),
),
),
],
),
),
],
),
);
}
}

View File

@@ -12,14 +12,12 @@ class GradientLine extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
height: 3,
margin: const EdgeInsets.symmetric(horizontal: 4),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [start, end],
),
return Container(
height: 2,
margin: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [start, end],
),
),
);

View File

@@ -19,7 +19,7 @@ class StatusCircle extends StatelessWidget {
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: color, width: 3),
border: Border.all(color: color, width: 2),
color: Colors.white,
),
child: Center(child: icon),

View File

@@ -9,8 +9,8 @@ class WorkDayCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 10),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 6),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22),
@@ -25,64 +25,63 @@ class WorkDayCard extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
/// ✅ TITLE
const Text(
"يوم عمل",
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
/// ✅ ICONS + TEXT UNDER EACH ICON
/// 🔥 FIXED: CENTERED LINES BETWEEN CIRCLES
Row(
children: [
/// ✅ MONEY
_StatusItem(
color: const Color(0xFFD16400),
icon: SvgPicture.asset('assets/images/money3.svg', width: 20),
label: "سعر كلي\n18,250 د.ع",
),
const Expanded(
child: GradientLine(
start: Color(0xFFD16400),
end: Color(0xFF1266A8),
/// LINE CENTERED VERTICALLY
Expanded(
child: Center(
child: GradientLine(
start: const Color(0xFFD16400),
end: const Color(0xFF1266A8),
),
),
),
/// ✅ TIME
_StatusItem(
color: const Color(0xFF1266A8),
icon: SvgPicture.asset('assets/images/watch.svg', width: 20),
label: "عدد ساعات\n5.50",
),
const Expanded(
child: GradientLine(
start: Color(0xFF1266A8),
end: Color(0xFFB00000),
Expanded(
child: Center(
child: GradientLine(
start: const Color(0xFF1266A8),
end: const Color(0xFFB00000),
),
),
),
/// ✅ LOGOUT
_StatusItem(
color: const Color(0xFFB00000),
icon: SvgPicture.asset('assets/images/out.svg', width: 20),
label: "خروج\n1:14pm",
),
const Expanded(
child: GradientLine(
start: Color(0xFFB00000),
end: Color(0xFF0A8F6B),
Expanded(
child: Center(
child: GradientLine(
start: const Color(0xFFB00000),
end: const Color(0xFF0A8F6B),
),
),
),
/// ✅ LOGIN
_StatusItem(
color: const Color(0xFF0A8F6B),
icon: SvgPicture.asset('assets/images/in.svg', width: 20),
@@ -93,10 +92,8 @@ class WorkDayCard extends StatelessWidget {
const SizedBox(height: 12),
/// ✅ DIVIDER
const Divider(color: Colors.black38),
/// ✅ BOTTOM INFO
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
@@ -110,7 +107,6 @@ class WorkDayCard extends StatelessWidget {
}
}
/// ✅ REUSABLE STATUS ITEM (CIRCLE + TEXT UNDER IT)
class _StatusItem extends StatelessWidget {
final Color color;
final Widget icon;
@@ -128,12 +124,8 @@ class _StatusItem extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
StatusCircle(color: color, icon: icon),
const SizedBox(height: 6),
Text(
label,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 12),
),
// const SizedBox(height: 3),
Text(label, textAlign: TextAlign.center, style: const TextStyle(fontSize: 12)),
],
);
}