diff --git a/images/finger_tap_botnav.png b/images/finger_tap_botnav.png new file mode 100644 index 0000000..5fd1eed Binary files /dev/null and b/images/finger_tap_botnav.png differ diff --git a/images/finger_tap_orange_botnav.png b/images/finger_tap_orange_botnav.png new file mode 100644 index 0000000..a0e8095 Binary files /dev/null and b/images/finger_tap_orange_botnav.png differ diff --git a/images/home_orange.png b/images/home_orange.png new file mode 100644 index 0000000..60cd166 Binary files /dev/null and b/images/home_orange.png differ diff --git a/images/person_grey.png b/images/person_grey.png new file mode 100644 index 0000000..e41ba5d Binary files /dev/null and b/images/person_grey.png differ diff --git a/lib/screen/homepage/homepage_screen.dart b/lib/screen/homepage/homepage_screen.dart index 804f152..2ce8306 100644 --- a/lib/screen/homepage/homepage_screen.dart +++ b/lib/screen/homepage/homepage_screen.dart @@ -9,10 +9,87 @@ class HomepageScreen extends StatelessWidget { @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: 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: [ + Expanded( + child: Container( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + 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: [ + 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: [ - SizedBox( height: Constant.getActualYPhone(context: context, y: 44), ), @@ -21,7 +98,7 @@ class HomepageScreen extends StatelessWidget { Padding( padding: EdgeInsets.only( left: Constant.getActualXPhone(context: context, x: 33), - right:Constant.getActualXPhone(context: context, x: 27), + right: Constant.getActualXPhone(context: context, x: 27), ), child: Container( child: Card( @@ -32,7 +109,8 @@ class HomepageScreen extends StatelessWidget { decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), 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 ), ), @@ -42,71 +120,90 @@ class HomepageScreen extends StatelessWidget { // 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), + 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),), - + SizedBox( + height: + Constant.getActualYPhone(context: context, y: 8), + ), + //Time RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock - - SizedBox(height: Constant.getActualYPhone(context: context, y: 20),), + + SizedBox( + height: + Constant.getActualYPhone(context: context, y: 20), + ), Row( - mainAxisAlignment: MainAxisAlignment.center, // Menengahkan secara horizontal + 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), + width: Constant.getActualXPhone( + context: context, x: 22), + height: Constant.getActualYPhone( + context: context, y: 22), ), - SizedBox( - height: Constant.getActualYPhone(context: context, y: 8), + height: Constant.getActualYPhone( + context: context, y: 8), ), - Text( '--:--', style: TextStyle( - // Atur gaya teks '--:--' sesuai kebutuhan - ), + // Atur gaya teks '--:--' sesuai kebutuhan + ), ), Text( 'Clock In', - style: Constant.titleH2_700(context: context).copyWith( - color: Constant.textLightGrey, + 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" - + + 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), + width: Constant.getActualXPhone( + context: context, x: 22), + height: Constant.getActualYPhone( + context: context, y: 22), ), SizedBox( - height: Constant.getActualYPhone(context: context, y: 8), + height: Constant.getActualYPhone( + context: context, y: 8), ), Text( '--:--', style: TextStyle( - // Atur gaya teks '--:--' sesuai kebutuhan - ), + // Atur gaya teks '--:--' sesuai kebutuhan + ), ), Text( 'Clock Out', - style: Constant.titleH2_700(context: context).copyWith( - color: Constant.textLightGrey, + style: Constant.titleH2_700(context: context) + .copyWith( + color: Constant.textLightGrey, ), ), ], @@ -116,7 +213,8 @@ class HomepageScreen extends StatelessWidget { ), 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: EdgeInsets.only( left: Constant.getActualXPhone(context: context, x: 33), - right:Constant.getActualXPhone(context: context, x: 27), + 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( - borderRadius: BorderRadius.circular(16.0), + 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.fromRGBO(145, 158, 171, 0.16)), ), - elevation: MaterialStatePropertyAll(4), - shadowColor: MaterialStateProperty.all(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'), + 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( + 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), @@ -197,57 +305,66 @@ class HomepageScreen extends StatelessWidget { //Menu Lembur SizedBox( - width:Constant.getActualXPhone(context: context, x: 98), - child: ElevatedButton( - style: ButtonStyle( - backgroundColor: MaterialStateColor.resolveWith( - (st) => Colors.white, - ), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16.0), + 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.fromRGBO(145, 158, 171, 0.16)), ), - elevation: MaterialStatePropertyAll(4), - shadowColor: MaterialStateProperty.all(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'), + 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: 8), ), - ), - ], + Text( + 'Lembur', + style: + Constant.titleH2_600_14(context: context) + .copyWith( + color: Constant.textDarkGrey, + ), + ), + ], + ), ), - ), - ) - ), + )), ], ), ), @@ -260,7 +377,7 @@ class HomepageScreen extends StatelessWidget { //Menu Rekap Presensi Padding( padding: EdgeInsets.only( - right:Constant.getActualXPhone(context: context, x: 27), + right: Constant.getActualXPhone(context: context, x: 27), left: Constant.getActualXPhone(context: context, x: 33), ), child: SizedBox( @@ -271,66 +388,70 @@ class HomepageScreen extends StatelessWidget { Text( 'Rekap Presensi Bulan Ini', style: Constant.titleH1_500_18(context: context).copyWith( - color: Constant.textTrueBlack, + 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, - ), - ], - ), + 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), + 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( + style: Constant.subtitle_600_14( + context: context) + .copyWith( color: Constant.textOrange, ), ), - SizedBox( - height: Constant.getActualYPhone(context: context, y: 4), + height: Constant.getActualYPhone( + context: context, y: 4), ), - SizedBox( child: Row( children: [ Image( - image:AssetImage('images/person_available_grey.png'), + image: AssetImage( + 'images/person_available_grey.png'), ), - SizedBox( - width: Constant.getActualXPhone(context: context, x: 4), + width: Constant.getActualXPhone( + context: context, x: 4), ), - Text( 'Kehadiran', - style: Constant.subtitle_500_12(context: context).copyWith( + style: Constant.subtitle_500_12( + context: context) + .copyWith( color: Constant.textDarkGrey, ), ), @@ -342,7 +463,7 @@ class HomepageScreen extends StatelessWidget { ), Image( - image:AssetImage('images/divider.png'), + image: AssetImage('images/divider.png'), ), //Tidak Hadir @@ -352,29 +473,32 @@ class HomepageScreen extends StatelessWidget { children: [ Text( '2 hari', - style: Constant.subtitle_600_14(context: context).copyWith( + style: Constant.subtitle_600_14( + context: context) + .copyWith( color: Constant.textOrange, ), ), - SizedBox( - height: Constant.getActualYPhone(context: context, y: 4), + height: Constant.getActualYPhone( + context: context, y: 4), ), - SizedBox( child: Row( children: [ Image( - image:AssetImage('images/person_delete_grey.png'), + image: AssetImage( + 'images/person_delete_grey.png'), ), - SizedBox( - width: Constant.getActualXPhone(context: context, x: 4), + width: Constant.getActualXPhone( + context: context, x: 4), ), - Text( 'Tidak Hadir', - style: Constant.subtitle_500_12(context: context).copyWith( + style: Constant.subtitle_500_12( + context: context) + .copyWith( color: Constant.textDarkGrey, ), ), @@ -386,7 +510,7 @@ class HomepageScreen extends StatelessWidget { ), Image( - image:AssetImage('images/divider.png'), + image: AssetImage('images/divider.png'), ), //Tidak Hadir @@ -396,49 +520,52 @@ class HomepageScreen extends StatelessWidget { children: [ Text( '5 hari', - style: Constant.subtitle_600_14(context: context).copyWith( + style: Constant.subtitle_600_14( + context: context) + .copyWith( color: Constant.textOrange, ), ), - SizedBox( - height: Constant.getActualYPhone(context: context, y: 4), + height: Constant.getActualYPhone( + context: context, y: 4), ), - SizedBox( child: Row( children: [ Image( - image:AssetImage('images/task_pending_grey.png'), + image: AssetImage( + 'images/task_pending_grey.png'), ), - SizedBox( - width: Constant.getActualXPhone(context: context, x: 4), + width: Constant.getActualXPhone( + context: context, x: 4), ), - Text( 'Lembur', - style: Constant.subtitle_500_12(context: context).copyWith( + style: Constant.subtitle_500_12( + context: context) + .copyWith( color: Constant.textDarkGrey, ), ), ], ), - ) + ), ], ), ), ], ), ), - ) + ), ], ), ), - ) + ), ], ), ), ); } -} \ No newline at end of file +}