641 lines
28 KiB
Dart
641 lines
28 KiB
Dart
import 'package:absensi_sas_flutter/app/constant.dart';
|
|
import 'package:absensi_sas_flutter/screen/widget/real_date.dart';
|
|
import 'package:absensi_sas_flutter/screen/widget/real_time.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class HomepageScreen extends StatelessWidget {
|
|
const HomepageScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
|
|
floatingActionButton: Container(
|
|
width: Constant.getActualXPhone(context: context, x: 100),
|
|
height: Constant.getActualYPhone(context: context, y: 100),
|
|
child: FittedBox(
|
|
child: FloatingActionButton(
|
|
onPressed: () {},
|
|
backgroundColor: Color(0xFFFFFFFF),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(
|
|
8.0), // Sesuaikan radius sesuai keinginan Anda
|
|
),
|
|
child: Container(
|
|
width: Constant.getActualXPhone(context: context, x: 50),
|
|
height: Constant.getActualYPhone(context: context, y: 50),
|
|
decoration: BoxDecoration(
|
|
image: DecorationImage(
|
|
image: AssetImage(
|
|
'images/finger_tap_orange_botnav.png'), // Ganti dengan path gambar Anda
|
|
),
|
|
),
|
|
// width: Constant.getActualXPhone(context: context, x: 70),
|
|
// height: Constant.getActualYPhone(context: context, y: 70),
|
|
// child: Image.asset('images/finger_tap_orange_botnav.png')
|
|
),
|
|
),
|
|
),
|
|
),
|
|
bottomNavigationBar: Container(
|
|
width: Constant.getActualXPhone(context: context, x: 390),
|
|
height: Constant.getActualYPhone(context: context, y: 84),
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFFFFFFF),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
offset: Offset(0, -1),
|
|
blurRadius: 8,
|
|
spreadRadius: -8,
|
|
color: Color.fromRGBO(0, 0, 0, 0.10),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
children: <Widget>[
|
|
Expanded(
|
|
child: Container(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: <Widget>[
|
|
Image(
|
|
image: AssetImage('images/home_orange.png'),
|
|
),
|
|
Text(
|
|
'Beranda',
|
|
style: Constant.subtitle_500_12(context: context).copyWith(
|
|
color: Constant.textOrange,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
Expanded(
|
|
child: Container(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: <Widget>[
|
|
Image(
|
|
image: AssetImage('images/person_grey.png'),
|
|
),
|
|
Text(
|
|
'Profile',
|
|
style: Constant.subtitle_500_12(context: context).copyWith(
|
|
color: Constant.textLightGrey,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
],
|
|
),
|
|
),
|
|
body: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
child: ListTile(
|
|
leading: Container(
|
|
width: Constant.getActualXPhone(context: context, x: 36),
|
|
height: Constant.getActualYPhone(context: context, y: 36),
|
|
child: Image(
|
|
image: AssetImage('images/avatar_c.png'),
|
|
)),
|
|
title: Text(
|
|
"Stephen Kusumo",
|
|
style: Constant.titleH1_700(context: context)
|
|
..copyWith(
|
|
color: Constant.textBlack,
|
|
),
|
|
),
|
|
subtitle: Text(
|
|
"Step@example.com",
|
|
style: Constant.subtitle_500_12(context: context).copyWith(
|
|
color: Constant.textLightGrey,
|
|
),
|
|
),
|
|
trailing: Container(
|
|
width: Constant.getActualXPhone(context: context, x: 36),
|
|
height: Constant.getActualYPhone(context: context, y: 36),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(12.0),
|
|
color: Colors.white,
|
|
shape: BoxShape.rectangle,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
offset: Offset(0, 12),
|
|
blurRadius: 24,
|
|
color: Color.fromRGBO(145, 158, 171, 0.12),
|
|
),
|
|
],
|
|
),
|
|
child: IconButton(
|
|
onPressed: () {},
|
|
icon: Container(
|
|
width: Constant.getActualXPhone(context: context, x: 20),
|
|
height: Constant.getActualYPhone(context: context, y: 20),
|
|
child: Image(
|
|
image: AssetImage('images/alert_badge.png'),
|
|
),
|
|
),
|
|
),
|
|
// child: ElevatedButton(
|
|
// onPressed: () {
|
|
// // Action to be performed on button press
|
|
// },
|
|
// child: Container(
|
|
// width: Constant.getActualXPhone(context: context, x: 20),
|
|
// height: Constant.getActualYPhone(context: context, y: 20),
|
|
// decoration: BoxDecoration(
|
|
// image: DecorationImage(
|
|
// image: AssetImage(
|
|
// 'images/alert_badge.png', // Ganti dengan path gambar Anda
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
),
|
|
),
|
|
),
|
|
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(context: context, y: 44),
|
|
),
|
|
|
|
//Card Time
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: Constant.getActualXPhone(context: context, x: 33),
|
|
right: Constant.getActualXPhone(context: context, x: 27),
|
|
),
|
|
child: Container(
|
|
child: Card(
|
|
elevation: 16,
|
|
child: Container(
|
|
width: Constant.getActualXPhone(context: context, x: 330),
|
|
height: Constant.getActualYPhone(context: context, y: 200),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(40),
|
|
image: DecorationImage(
|
|
image: AssetImage(
|
|
'images/card_bg_1.png'), // Ganti dengan path gambar Anda
|
|
fit: BoxFit.cover, // Sesuaikan cara gambar ditampilkan
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
// Date
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
top: Constant.getActualYPhone(
|
|
context: context, y: 16),
|
|
left: Constant.getActualXPhone(
|
|
context: context, x: 83.5),
|
|
right: Constant.getActualXPhone(
|
|
context: context, x: 83.5),
|
|
),
|
|
child: RealTimeFormattedDate(),
|
|
),
|
|
SizedBox(
|
|
height:
|
|
Constant.getActualYPhone(context: context, y: 8),
|
|
),
|
|
|
|
//Time
|
|
RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock
|
|
|
|
SizedBox(
|
|
height:
|
|
Constant.getActualYPhone(context: context, y: 20),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment
|
|
.center, // Menengahkan secara horizontal
|
|
children: [
|
|
Spacer(), // Spasi di sebelah kiri "Check In"
|
|
Column(
|
|
children: [
|
|
Image.asset(
|
|
'images/finger_tap.png', // Path gambar untuk "Check In"
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 22),
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 22),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
),
|
|
Text(
|
|
'--:--',
|
|
style: TextStyle(
|
|
// Atur gaya teks '--:--' sesuai kebutuhan
|
|
),
|
|
),
|
|
Text(
|
|
'Clock In',
|
|
style: Constant.titleH2_700(context: context)
|
|
.copyWith(
|
|
color: Constant.textLightGrey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
SizedBox(
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 96),
|
|
), // Jarak antara "Check In" dan "Check Out"
|
|
|
|
Column(
|
|
children: [
|
|
Image.asset(
|
|
'images/finger_tap.png', // Path gambar untuk "Check Out"
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 22),
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 22),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
),
|
|
Text(
|
|
'--:--',
|
|
style: TextStyle(
|
|
// Atur gaya teks '--:--' sesuai kebutuhan
|
|
),
|
|
),
|
|
Text(
|
|
'Clock Out',
|
|
style: Constant.titleH2_700(context: context)
|
|
.copyWith(
|
|
color: Constant.textLightGrey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Spacer(), // Spasi di sebelah kanan "Check Out"
|
|
],
|
|
),
|
|
|
|
SizedBox(
|
|
height:
|
|
Constant.getActualYPhone(context: context, y: 16),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(context: context, y: 56),
|
|
),
|
|
|
|
//Menu Cuti Lembur
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: Constant.getActualXPhone(context: context, x: 33),
|
|
right: Constant.getActualXPhone(context: context, x: 27),
|
|
),
|
|
child: Container(
|
|
child: Row(
|
|
children: [
|
|
//Menu Cuti
|
|
SizedBox(
|
|
width:
|
|
Constant.getActualXPhone(context: context, x: 98),
|
|
child: ElevatedButton(
|
|
style: ButtonStyle(
|
|
backgroundColor: MaterialStateColor.resolveWith(
|
|
(st) => Colors.white,
|
|
),
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
),
|
|
),
|
|
elevation: MaterialStatePropertyAll(4),
|
|
shadowColor: MaterialStateProperty.all<Color>(
|
|
Color.fromRGBO(145, 158, 171, 0.16)),
|
|
),
|
|
onPressed: () {},
|
|
child: Padding(
|
|
padding: EdgeInsets.only(
|
|
top: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
bottom: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
left: Constant.getActualXPhone(
|
|
context: context, x: 12),
|
|
right: Constant.getActualXPhone(
|
|
context: context, x: 12),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 50),
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 50),
|
|
decoration: BoxDecoration(
|
|
// color: Colors.green,
|
|
image: DecorationImage(
|
|
// fit: BoxFit.contain,
|
|
image: AssetImage('images/person.png'),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
),
|
|
Text(
|
|
'Cuti',
|
|
style:
|
|
Constant.titleH2_600_14(context: context)
|
|
.copyWith(
|
|
color: Constant.textDarkGrey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
)),
|
|
|
|
SizedBox(
|
|
width: Constant.getActualXPhone(context: context, x: 18),
|
|
),
|
|
|
|
//Menu Lembur
|
|
SizedBox(
|
|
width:
|
|
Constant.getActualXPhone(context: context, x: 98),
|
|
child: ElevatedButton(
|
|
style: ButtonStyle(
|
|
backgroundColor: MaterialStateColor.resolveWith(
|
|
(st) => Colors.white,
|
|
),
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
),
|
|
),
|
|
elevation: MaterialStatePropertyAll(4),
|
|
shadowColor: MaterialStateProperty.all<Color>(
|
|
Color.fromRGBO(145, 158, 171, 0.16)),
|
|
),
|
|
onPressed: () {},
|
|
child: Padding(
|
|
padding: EdgeInsets.only(
|
|
top: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
bottom: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
left: Constant.getActualXPhone(
|
|
context: context, x: 12),
|
|
right: Constant.getActualXPhone(
|
|
context: context, x: 12),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 50),
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 50),
|
|
decoration: BoxDecoration(
|
|
// color: Colors.green,
|
|
image: DecorationImage(
|
|
// fit: BoxFit.contain,
|
|
image: AssetImage('images/task.png'),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 8),
|
|
),
|
|
Text(
|
|
'Lembur',
|
|
style:
|
|
Constant.titleH2_600_14(context: context)
|
|
.copyWith(
|
|
color: Constant.textDarkGrey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
)),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(context: context, y: 56),
|
|
),
|
|
|
|
//Menu Rekap Presensi
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
right: Constant.getActualXPhone(context: context, x: 27),
|
|
left: Constant.getActualXPhone(context: context, x: 33),
|
|
),
|
|
child: SizedBox(
|
|
width: Constant.getActualXPhone(context: context, x: 330),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Rekap Presensi Bulan Ini',
|
|
style: Constant.titleH1_500_18(context: context).copyWith(
|
|
color: Constant.textTrueBlack,
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(context: context, y: 20),
|
|
),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.rectangle,
|
|
borderRadius: BorderRadius.circular(16),
|
|
color: Colors.white, // Set background color to #FFF
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Color.fromRGBO(145, 158, 171, 0.20),
|
|
blurRadius: 2,
|
|
),
|
|
],
|
|
),
|
|
child: Padding(
|
|
padding: EdgeInsets.only(
|
|
top:
|
|
Constant.getActualYPhone(context: context, y: 12),
|
|
bottom:
|
|
Constant.getActualYPhone(context: context, y: 12),
|
|
left:
|
|
Constant.getActualXPhone(context: context, x: 24),
|
|
right:
|
|
Constant.getActualXPhone(context: context, x: 24),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'24 hari',
|
|
style: Constant.subtitle_600_14(
|
|
context: context)
|
|
.copyWith(
|
|
color: Constant.textOrange,
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 4),
|
|
),
|
|
SizedBox(
|
|
child: Row(
|
|
children: [
|
|
Image(
|
|
image: AssetImage(
|
|
'images/person_available_grey.png'),
|
|
),
|
|
SizedBox(
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 4),
|
|
),
|
|
Text(
|
|
'Kehadiran',
|
|
style: Constant.subtitle_500_12(
|
|
context: context)
|
|
.copyWith(
|
|
color: Constant.textDarkGrey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
|
|
Image(
|
|
image: AssetImage('images/divider.png'),
|
|
),
|
|
|
|
//Tidak Hadir
|
|
Container(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'2 hari',
|
|
style: Constant.subtitle_600_14(
|
|
context: context)
|
|
.copyWith(
|
|
color: Constant.textOrange,
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 4),
|
|
),
|
|
SizedBox(
|
|
child: Row(
|
|
children: [
|
|
Image(
|
|
image: AssetImage(
|
|
'images/person_delete_grey.png'),
|
|
),
|
|
SizedBox(
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 4),
|
|
),
|
|
Text(
|
|
'Tidak Hadir',
|
|
style: Constant.subtitle_500_12(
|
|
context: context)
|
|
.copyWith(
|
|
color: Constant.textDarkGrey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
|
|
Image(
|
|
image: AssetImage('images/divider.png'),
|
|
),
|
|
|
|
//Tidak Hadir
|
|
Container(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'5 hari',
|
|
style: Constant.subtitle_600_14(
|
|
context: context)
|
|
.copyWith(
|
|
color: Constant.textOrange,
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: Constant.getActualYPhone(
|
|
context: context, y: 4),
|
|
),
|
|
SizedBox(
|
|
child: Row(
|
|
children: [
|
|
Image(
|
|
image: AssetImage(
|
|
'images/task_pending_grey.png'),
|
|
),
|
|
SizedBox(
|
|
width: Constant.getActualXPhone(
|
|
context: context, x: 4),
|
|
),
|
|
Text(
|
|
'Lembur',
|
|
style: Constant.subtitle_500_12(
|
|
context: context)
|
|
.copyWith(
|
|
color: Constant.textDarkGrey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|