sindhu/absensi_sas_flutter
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

[Homepage] 8. add Navbar Bottom

Browse Source
This commit is contained in:
Stephen
2024-01-12 11:49:10 +07:00
parent 0daef445a2
commit f2c6b222cc
5 changed files with 300 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/finger_tap_botnav.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
images/finger_tap_orange_botnav.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/home_orange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 393 B

BIN
images/person_grey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 B

473
lib/screen/homepage/homepage_screen.dart
View File

@@ -9,10 +9,87 @@ class HomepageScreen extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( 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: CircleBorder(),
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( body: SafeArea(
child: Column( child: Column(
children: [ children: [
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 44), height: Constant.getActualYPhone(context: context, y: 44),
), ),
@@ -21,7 +98,7 @@ class HomepageScreen extends StatelessWidget {
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: Constant.getActualXPhone(context: context, x: 33), left: Constant.getActualXPhone(context: context, x: 33),
right:Constant.getActualXPhone(context: context, x: 27), right: Constant.getActualXPhone(context: context, x: 27),
), ),
child: Container( child: Container(
child: Card( child: Card(
@@ -32,7 +109,8 @@ class HomepageScreen extends StatelessWidget {
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40), borderRadius: BorderRadius.circular(40),
image: DecorationImage( image: DecorationImage(
image: AssetImage('images/card_bg_1.png'), // Ganti dengan path gambar Anda image: AssetImage(
'images/card_bg_1.png'), // Ganti dengan path gambar Anda
fit: BoxFit.cover, // Sesuaikan cara gambar ditampilkan fit: BoxFit.cover, // Sesuaikan cara gambar ditampilkan
), ),
), ),
@@ -42,71 +120,90 @@ class HomepageScreen extends StatelessWidget {
// Date // Date
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
top: Constant.getActualYPhone(context: context, y: 16), top: Constant.getActualYPhone(
left: Constant.getActualXPhone(context: context, x: 83.5), context: context, y: 16),
right:Constant.getActualXPhone(context: context, x: 83.5), left: Constant.getActualXPhone(
context: context, x: 83.5),
right: Constant.getActualXPhone(
context: context, x: 83.5),
), ),
child: RealTimeFormattedDate(), child: RealTimeFormattedDate(),
), ),
SizedBox(height: Constant.getActualYPhone(context: context, y: 8),), SizedBox(
height:
Constant.getActualYPhone(context: context, y: 8),
),
//Time //Time
RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock
SizedBox(height: Constant.getActualYPhone(context: context, y: 20),), SizedBox(
height:
Constant.getActualYPhone(context: context, y: 20),
),
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, // Menengahkan secara horizontal mainAxisAlignment: MainAxisAlignment
.center, // Menengahkan secara horizontal
children: [ children: [
Spacer(), // Spasi di sebelah kiri "Check In" Spacer(), // Spasi di sebelah kiri "Check In"
Column( Column(
children: [ children: [
Image.asset( Image.asset(
'images/finger_tap.png', // Path gambar untuk "Check In" 'images/finger_tap.png', // Path gambar untuk "Check In"
width: Constant.getActualXPhone(context: context, x:22), width: Constant.getActualXPhone(
height: Constant.getActualYPhone(context: context, y: 22), context: context, x: 22),
height: Constant.getActualYPhone(
context: context, y: 22),
), ),
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 8), height: Constant.getActualYPhone(
context: context, y: 8),
), ),
Text( Text(
'--:--', '--:--',
style: TextStyle( style: TextStyle(
// Atur gaya teks '--:--' sesuai kebutuhan // Atur gaya teks '--:--' sesuai kebutuhan
), ),
), ),
Text( Text(
'Clock In', 'Clock In',
style: Constant.titleH2_700(context: context).copyWith( style: Constant.titleH2_700(context: context)
color: Constant.textLightGrey, .copyWith(
color: Constant.textLightGrey,
), ),
), ),
], ],
), ),
SizedBox(width: Constant.getActualXPhone(context: context, x: 96),), // Jarak antara "Check In" dan "Check Out" SizedBox(
width: Constant.getActualXPhone(
context: context, x: 96),
), // Jarak antara "Check In" dan "Check Out"
Column( Column(
children: [ children: [
Image.asset( Image.asset(
'images/finger_tap.png', // Path gambar untuk "Check Out" 'images/finger_tap.png', // Path gambar untuk "Check Out"
width: Constant.getActualXPhone(context: context, x:22), width: Constant.getActualXPhone(
height: Constant.getActualYPhone(context: context, y: 22), context: context, x: 22),
height: Constant.getActualYPhone(
context: context, y: 22),
), ),
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 8), height: Constant.getActualYPhone(
context: context, y: 8),
), ),
Text( Text(
'--:--', '--:--',
style: TextStyle( style: TextStyle(
// Atur gaya teks '--:--' sesuai kebutuhan // Atur gaya teks '--:--' sesuai kebutuhan
), ),
), ),
Text( Text(
'Clock Out', 'Clock Out',
style: Constant.titleH2_700(context: context).copyWith( style: Constant.titleH2_700(context: context)
color: Constant.textLightGrey, .copyWith(
color: Constant.textLightGrey,
), ),
), ),
], ],
@@ -116,7 +213,8 @@ class HomepageScreen extends StatelessWidget {
), ),
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 16), height:
Constant.getActualYPhone(context: context, y: 16),
), ),
], ],
), ),
@@ -133,63 +231,73 @@ class HomepageScreen extends StatelessWidget {
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: Constant.getActualXPhone(context: context, x: 33), left: Constant.getActualXPhone(context: context, x: 33),
right:Constant.getActualXPhone(context: context, x: 27), right: Constant.getActualXPhone(context: context, x: 27),
), ),
child: Container( child: Container(
child: Row( child: Row(
children: [ children: [
//Menu Cuti //Menu Cuti
SizedBox( SizedBox(
width:Constant.getActualXPhone(context: context, x: 98), width:
child: ElevatedButton( Constant.getActualXPhone(context: context, x: 98),
style: ButtonStyle( child: ElevatedButton(
backgroundColor: MaterialStateColor.resolveWith( style: ButtonStyle(
(st) => Colors.white, backgroundColor: MaterialStateColor.resolveWith(
), (st) => Colors.white,
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
), ),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
),
elevation: MaterialStatePropertyAll(4),
shadowColor: MaterialStateProperty.all<Color>(
Color.fromRGBO(145, 158, 171, 0.16)),
), ),
elevation: MaterialStatePropertyAll(4), onPressed: () {},
shadowColor: MaterialStateProperty.all<Color>(Color.fromRGBO(145, 158, 171, 0.16)), child: Padding(
), padding: EdgeInsets.only(
onPressed: () { }, top: Constant.getActualYPhone(
child: Padding( context: context, y: 8),
padding: EdgeInsets.only( bottom: Constant.getActualYPhone(
top: Constant.getActualYPhone(context: context, y: 8), context: context, y: 8),
bottom: Constant.getActualYPhone(context: context, y: 8), left: Constant.getActualXPhone(
left: Constant.getActualXPhone(context: context, x: 12), context: context, x: 12),
right:Constant.getActualXPhone(context: context, x: 12), right: Constant.getActualXPhone(
), context: context, x: 12),
child: Column( ),
children: [ child: Column(
Container( children: [
width:Constant.getActualXPhone(context: context, x: 50), Container(
height:Constant.getActualYPhone(context: context, y: 50), width: Constant.getActualXPhone(
decoration: BoxDecoration( context: context, x: 50),
// color: Colors.green, height: Constant.getActualYPhone(
image: DecorationImage( context: context, y: 50),
// fit: BoxFit.contain, decoration: BoxDecoration(
image: AssetImage('images/person.png'), // color: Colors.green,
image: DecorationImage(
// fit: BoxFit.contain,
image: AssetImage('images/person.png'),
),
), ),
), ),
), SizedBox(
height: Constant.getActualYPhone(
SizedBox( context: context, y: 8),
height: Constant.getActualYPhone(context: context, y: 8),
),
Text(
'Cuti',
style: Constant.titleH2_600_14(context: context).copyWith(
color: Constant.textDarkGrey,
), ),
), Text(
], 'Cuti',
style:
Constant.titleH2_600_14(context: context)
.copyWith(
color: Constant.textDarkGrey,
),
),
],
),
), ),
), )),
)
),
SizedBox( SizedBox(
width: Constant.getActualXPhone(context: context, x: 18), width: Constant.getActualXPhone(context: context, x: 18),
@@ -197,57 +305,66 @@ class HomepageScreen extends StatelessWidget {
//Menu Lembur //Menu Lembur
SizedBox( SizedBox(
width:Constant.getActualXPhone(context: context, x: 98), width:
child: ElevatedButton( Constant.getActualXPhone(context: context, x: 98),
style: ButtonStyle( child: ElevatedButton(
backgroundColor: MaterialStateColor.resolveWith( style: ButtonStyle(
(st) => Colors.white, backgroundColor: MaterialStateColor.resolveWith(
), (st) => Colors.white,
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
), ),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
),
elevation: MaterialStatePropertyAll(4),
shadowColor: MaterialStateProperty.all<Color>(
Color.fromRGBO(145, 158, 171, 0.16)),
), ),
elevation: MaterialStatePropertyAll(4), onPressed: () {},
shadowColor: MaterialStateProperty.all<Color>(Color.fromRGBO(145, 158, 171, 0.16)), child: Padding(
), padding: EdgeInsets.only(
onPressed: () { }, top: Constant.getActualYPhone(
child: Padding( context: context, y: 8),
padding: EdgeInsets.only( bottom: Constant.getActualYPhone(
top: Constant.getActualYPhone(context: context, y: 8), context: context, y: 8),
bottom: Constant.getActualYPhone(context: context, y: 8), left: Constant.getActualXPhone(
left: Constant.getActualXPhone(context: context, x: 12), context: context, x: 12),
right:Constant.getActualXPhone(context: context, x: 12), right: Constant.getActualXPhone(
), context: context, x: 12),
child: Column( ),
children: [ child: Column(
Container( children: [
width:Constant.getActualXPhone(context: context, x: 50), Container(
height:Constant.getActualYPhone(context: context, y: 50), width: Constant.getActualXPhone(
decoration: BoxDecoration( context: context, x: 50),
// color: Colors.green, height: Constant.getActualYPhone(
image: DecorationImage( context: context, y: 50),
// fit: BoxFit.contain, decoration: BoxDecoration(
image: AssetImage('images/task.png'), // color: Colors.green,
image: DecorationImage(
// fit: BoxFit.contain,
image: AssetImage('images/task.png'),
),
), ),
), ),
), SizedBox(
height: Constant.getActualYPhone(
SizedBox( context: context, y: 8),
height: Constant.getActualYPhone(context: context, y: 8),
),
Text(
'Lembur',
style: Constant.titleH2_600_14(context: context).copyWith(
color: Constant.textDarkGrey,
), ),
), Text(
], 'Lembur',
style:
Constant.titleH2_600_14(context: context)
.copyWith(
color: Constant.textDarkGrey,
),
),
],
),
), ),
), )),
)
),
], ],
), ),
), ),
@@ -260,7 +377,7 @@ class HomepageScreen extends StatelessWidget {
//Menu Rekap Presensi //Menu Rekap Presensi
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
right:Constant.getActualXPhone(context: context, x: 27), right: Constant.getActualXPhone(context: context, x: 27),
left: Constant.getActualXPhone(context: context, x: 33), left: Constant.getActualXPhone(context: context, x: 33),
), ),
child: SizedBox( child: SizedBox(
@@ -271,66 +388,70 @@ class HomepageScreen extends StatelessWidget {
Text( Text(
'Rekap Presensi Bulan Ini', 'Rekap Presensi Bulan Ini',
style: Constant.titleH1_500_18(context: context).copyWith( style: Constant.titleH1_500_18(context: context).copyWith(
color: Constant.textTrueBlack, color: Constant.textTrueBlack,
), ),
), ),
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 20), height: Constant.getActualYPhone(context: context, y: 20),
), ),
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.rectangle, shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
color: Colors.white, // Set background color to #FFF color: Colors.white, // Set background color to #FFF
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Color.fromRGBO(145, 158, 171, 0.20), color: Color.fromRGBO(145, 158, 171, 0.20),
blurRadius: 2, blurRadius: 2,
), ),
], ],
), ),
child: Padding( child: Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
top: Constant.getActualYPhone(context: context, y: 12), top:
bottom: Constant.getActualYPhone(context: context, y: 12), Constant.getActualYPhone(context: context, y: 12),
left: Constant.getActualXPhone(context: context, x: 24), bottom:
right:Constant.getActualXPhone(context: context, x: 24), Constant.getActualYPhone(context: context, y: 12),
left:
Constant.getActualXPhone(context: context, x: 24),
right:
Constant.getActualXPhone(context: context, x: 24),
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Container( Container(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
'24 hari', '24 hari',
style: Constant.subtitle_600_14(context: context).copyWith( style: Constant.subtitle_600_14(
context: context)
.copyWith(
color: Constant.textOrange, color: Constant.textOrange,
), ),
), ),
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 4), height: Constant.getActualYPhone(
context: context, y: 4),
), ),
SizedBox( SizedBox(
child: Row( child: Row(
children: [ children: [
Image( Image(
image:AssetImage('images/person_available_grey.png'), image: AssetImage(
'images/person_available_grey.png'),
), ),
SizedBox( SizedBox(
width: Constant.getActualXPhone(context: context, x: 4), width: Constant.getActualXPhone(
context: context, x: 4),
), ),
Text( Text(
'Kehadiran', 'Kehadiran',
style: Constant.subtitle_500_12(context: context).copyWith( style: Constant.subtitle_500_12(
context: context)
.copyWith(
color: Constant.textDarkGrey, color: Constant.textDarkGrey,
), ),
), ),
@@ -342,7 +463,7 @@ class HomepageScreen extends StatelessWidget {
), ),
Image( Image(
image:AssetImage('images/divider.png'), image: AssetImage('images/divider.png'),
), ),
//Tidak Hadir //Tidak Hadir
@@ -352,29 +473,32 @@ class HomepageScreen extends StatelessWidget {
children: [ children: [
Text( Text(
'2 hari', '2 hari',
style: Constant.subtitle_600_14(context: context).copyWith( style: Constant.subtitle_600_14(
context: context)
.copyWith(
color: Constant.textOrange, color: Constant.textOrange,
), ),
), ),
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 4), height: Constant.getActualYPhone(
context: context, y: 4),
), ),
SizedBox( SizedBox(
child: Row( child: Row(
children: [ children: [
Image( Image(
image:AssetImage('images/person_delete_grey.png'), image: AssetImage(
'images/person_delete_grey.png'),
), ),
SizedBox( SizedBox(
width: Constant.getActualXPhone(context: context, x: 4), width: Constant.getActualXPhone(
context: context, x: 4),
), ),
Text( Text(
'Tidak Hadir', 'Tidak Hadir',
style: Constant.subtitle_500_12(context: context).copyWith( style: Constant.subtitle_500_12(
context: context)
.copyWith(
color: Constant.textDarkGrey, color: Constant.textDarkGrey,
), ),
), ),
@@ -386,7 +510,7 @@ class HomepageScreen extends StatelessWidget {
), ),
Image( Image(
image:AssetImage('images/divider.png'), image: AssetImage('images/divider.png'),
), ),
//Tidak Hadir //Tidak Hadir
@@ -396,49 +520,52 @@ class HomepageScreen extends StatelessWidget {
children: [ children: [
Text( Text(
'5 hari', '5 hari',
style: Constant.subtitle_600_14(context: context).copyWith( style: Constant.subtitle_600_14(
context: context)
.copyWith(
color: Constant.textOrange, color: Constant.textOrange,
), ),
), ),
SizedBox( SizedBox(
height: Constant.getActualYPhone(context: context, y: 4), height: Constant.getActualYPhone(
context: context, y: 4),
), ),
SizedBox( SizedBox(
child: Row( child: Row(
children: [ children: [
Image( Image(
image:AssetImage('images/task_pending_grey.png'), image: AssetImage(
'images/task_pending_grey.png'),
), ),
SizedBox( SizedBox(
width: Constant.getActualXPhone(context: context, x: 4), width: Constant.getActualXPhone(
context: context, x: 4),
), ),
Text( Text(
'Lembur', 'Lembur',
style: Constant.subtitle_500_12(context: context).copyWith( style: Constant.subtitle_500_12(
context: context)
.copyWith(
color: Constant.textDarkGrey, color: Constant.textDarkGrey,
), ),
), ),
], ],
), ),
) ),
], ],
), ),
), ),
], ],
), ),
), ),
) ),
], ],
), ),
), ),
) ),
], ],
), ),
), ),
); );
} }
} }