From 69a3e1965ca7d7a465605b7ee1ba006f5a0e67b8 Mon Sep 17 00:00:00 2001 From: Stephen Date: Fri, 12 Jan 2024 17:27:28 +0700 Subject: [PATCH] [Homepage] 10. fix style homepage for android device --- lib/screen/homepage/homepage_screen.dart | 933 +++++++++++------------ 1 file changed, 458 insertions(+), 475 deletions(-) diff --git a/lib/screen/homepage/homepage_screen.dart b/lib/screen/homepage/homepage_screen.dart index cf024f1..dafedf9 100644 --- a/lib/screen/homepage/homepage_screen.dart +++ b/lib/screen/homepage/homepage_screen.dart @@ -17,10 +17,7 @@ class HomepageScreen extends StatelessWidget { child: FloatingActionButton( onPressed: () {}, backgroundColor: Color(0xFFFFFFFF), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - 8.0), // Sesuaikan radius sesuai keinginan Anda - ), + shape: CircleBorder(), child: Container( width: Constant.getActualXPhone(context: context, x: 50), height: Constant.getActualYPhone(context: context, y: 50), @@ -30,9 +27,6 @@ class HomepageScreen extends StatelessWidget { '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') ), ), ), @@ -91,264 +85,255 @@ class HomepageScreen extends StatelessWidget { ), ), 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, + child: Container( + width: Constant.getActualXPhone(context: context, x: 390), + height: Constant.getActualYPhone(context: context, y: 844), + child: Column( + children: [ + Padding( + padding: EdgeInsets.only( + top: Constant.getActualYPhone(context: context, y: 58), + left: Constant.getActualXPhone(context: context, x: 33), + right: Constant.getActualXPhone(context: context, x: 27), + ), + child: 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'), + subtitle: Text( + "Step@example.com", + style: + Constant.subtitle_500_12(context: context).copyWith( + color: Constant.textLightGrey, ), ), - ), - // 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), + 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: RealTimeFormattedDate(), - ), - SizedBox( - height: - Constant.getActualYPhone(context: context, y: 8), - ), - - //Time - RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock - - SizedBox( + ], + ), + 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'), + ), ), - 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), + SizedBox( + height: Constant.getActualYPhone(context: context, y: 44), ), - child: Container( - child: Row( - children: [ - //Menu Cuti - SizedBox( + + //Card Time + Padding( + padding: EdgeInsets.only( + left: Constant.getActualXPhone(context: context, x: 33), + right: Constant.getActualXPhone(context: context, x: 27), + ), + 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.fill, // Sesuaikan cara gambar ditampilkan + ), + ), + child: Padding( + padding: EdgeInsets.only( + top: Constant.getActualYPhone(context: context, y: 16), + left: Constant.getActualXPhone(context: context, x: 25), + right: Constant.getActualXPhone(context: context, x: 25), + ), + child: Container( + width: Constant.getActualXPhone(context: context, x: 280), + height: + Constant.getActualYPhone(context: context, y: 150), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + // Date + 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( + width: Constant.getActualXPhone(context: context, x: 330), + child: Row( + children: [ + //Menu Cuti + Container( width: Constant.getActualXPhone(context: context, x: 98), - child: ElevatedButton( - style: ButtonStyle( - backgroundColor: MaterialStateColor.resolveWith( - (st) => Colors.white, + // color: Colors.amber, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(16), + boxShadow: [ + BoxShadow( + color: Color.fromRGBO(145, 158, 171, 0.20), ), - shape: MaterialStateProperty.all< - RoundedRectangleBorder>( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16.0), - ), - ), - elevation: MaterialStatePropertyAll(4), - shadowColor: MaterialStateProperty.all( - Color.fromRGBO(145, 158, 171, 0.16)), + ], + ), + child: Padding( + padding: EdgeInsets.only( + left: Constant.getActualXPhone( + context: context, x: 12), + right: Constant.getActualXPhone( + context: context, x: 12), + top: Constant.getActualYPhone( + context: context, y: 8), + bottom: Constant.getActualYPhone( + context: context, y: 8), ), - 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: InkWell( + onTap: () {}, 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'), - ), + child: Image( + width: Constant.getActualXPhone( + context: context, x: 50), + height: Constant.getActualYPhone( + context: context, y: 50), + image: AssetImage('images/person.png'), ), ), SizedBox( @@ -366,56 +351,50 @@ class HomepageScreen extends StatelessWidget { ], ), ), - )), + ), + ), - SizedBox( - width: Constant.getActualXPhone(context: context, x: 18), - ), + SizedBox( + width: + Constant.getActualXPhone(context: context, x: 18), + ), - //Menu Lembur - SizedBox( + //Menu Lembur + Container( width: Constant.getActualXPhone(context: context, x: 98), - child: ElevatedButton( - style: ButtonStyle( - backgroundColor: MaterialStateColor.resolveWith( - (st) => Colors.white, + // color: Colors.amber, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(16), + boxShadow: [ + BoxShadow( + color: Color.fromRGBO(145, 158, 171, 0.20), ), - shape: MaterialStateProperty.all< - RoundedRectangleBorder>( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16.0), - ), - ), - elevation: MaterialStatePropertyAll(4), - shadowColor: MaterialStateProperty.all( - Color.fromRGBO(145, 158, 171, 0.16)), + ], + ), + child: Padding( + padding: EdgeInsets.only( + left: Constant.getActualXPhone( + context: context, x: 12), + right: Constant.getActualXPhone( + context: context, x: 12), + top: Constant.getActualYPhone( + context: context, y: 8), + bottom: Constant.getActualYPhone( + context: context, y: 8), ), - 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: InkWell( + onTap: () {}, 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'), - ), + child: Image( + width: Constant.getActualXPhone( + context: context, x: 50), + height: Constant.getActualYPhone( + context: context, y: 50), + image: AssetImage('images/task.png'), ), ), SizedBox( @@ -433,206 +412,210 @@ class HomepageScreen extends StatelessWidget { ], ), ), - )), - ], + ), + ), + ], + ), ), ), - ), - 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), + SizedBox( + height: Constant.getActualYPhone(context: context, y: 56), ), - 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), + + //Menu Rekap Presensi + Padding( + padding: EdgeInsets.only( + right: Constant.getActualXPhone(context: context, x: 27), + left: Constant.getActualXPhone(context: context, x: 33), + ), + child: Container( + 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, ), - 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, - ), - ), - ], - ), - ), - ], - ), + ), + 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, + ), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), ), - ), - ], + ], + ), ), ), - ), - ], + ], + ), ), ), );