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

[Homepage] 10. fix style homepage for android device

Browse Source
This commit is contained in:
Stephen
2024-01-12 17:27:28 +07:00
parent 680dc463ea
commit 69a3e1965c
1 changed files with 458 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,10 +17,7 @@ class HomepageScreen extends StatelessWidget {
child: FloatingActionButton( child: FloatingActionButton(
onPressed: () {}, onPressed: () {},
backgroundColor: Color(0xFFFFFFFF), backgroundColor: Color(0xFFFFFFFF),
shape: RoundedRectangleBorder( shape: CircleBorder(),
borderRadius: BorderRadius.circular(
8.0), // Sesuaikan radius sesuai keinginan Anda
),
child: Container( child: Container(
width: Constant.getActualXPhone(context: context, x: 50), width: Constant.getActualXPhone(context: context, x: 50),
height: Constant.getActualYPhone(context: context, y: 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 '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,13 +85,24 @@ class HomepageScreen extends StatelessWidget {
), ),
), ),
body: SafeArea( body: SafeArea(
child: Container(
width: Constant.getActualXPhone(context: context, x: 390),
height: Constant.getActualYPhone(context: context, y: 844),
child: Column( child: Column(
children: [ children: [
Container( 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( child: ListTile(
leading: Container( leading: Container(
width: Constant.getActualXPhone(context: context, x: 36), width:
height: Constant.getActualYPhone(context: context, y: 36), Constant.getActualXPhone(context: context, x: 36),
height:
Constant.getActualYPhone(context: context, y: 36),
child: Image( child: Image(
image: AssetImage('images/avatar_c.png'), image: AssetImage('images/avatar_c.png'),
)), )),
@@ -110,7 +115,8 @@ class HomepageScreen extends StatelessWidget {
), ),
subtitle: Text( subtitle: Text(
"Step@example.com", "Step@example.com",
style: Constant.subtitle_500_12(context: context).copyWith( style:
Constant.subtitle_500_12(context: context).copyWith(
color: Constant.textLightGrey, color: Constant.textLightGrey,
), ),
), ),
@@ -132,29 +138,16 @@ class HomepageScreen extends StatelessWidget {
child: IconButton( child: IconButton(
onPressed: () {}, onPressed: () {},
icon: Container( icon: Container(
width: Constant.getActualXPhone(context: context, x: 20), width:
height: Constant.getActualYPhone(context: context, y: 20), Constant.getActualXPhone(context: context, x: 20),
height:
Constant.getActualYPhone(context: context, y: 20),
child: Image( child: Image(
image: AssetImage('images/alert_badge.png'), 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
// ),
// ),
// ),
// ),
// ),
), ),
), ),
), ),
@@ -169,9 +162,6 @@ class HomepageScreen extends StatelessWidget {
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: Card(
elevation: 16,
child: Container( child: Container(
width: Constant.getActualXPhone(context: context, x: 330), width: Constant.getActualXPhone(context: context, x: 330),
height: Constant.getActualYPhone(context: context, y: 200), height: Constant.getActualYPhone(context: context, y: 200),
@@ -180,35 +170,35 @@ class HomepageScreen extends StatelessWidget {
image: DecorationImage( image: DecorationImage(
image: AssetImage( image: AssetImage(
'images/card_bg_1.png'), // Ganti dengan path gambar Anda 'images/card_bg_1.png'), // Ganti dengan path gambar Anda
fit: BoxFit.cover, // Sesuaikan cara gambar ditampilkan 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( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
// Date // Date
Padding( RealTimeFormattedDate(),
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( SizedBox(
height: height: Constant.getActualYPhone(
Constant.getActualYPhone(context: context, y: 8), context: context, y: 8),
), ),
//Time //Time
RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock
SizedBox( SizedBox(
height: height: Constant.getActualYPhone(
Constant.getActualYPhone(context: context, y: 20), context: context, y: 20),
), ),
Row( Row(
mainAxisAlignment: MainAxisAlignment mainAxisAlignment: MainAxisAlignment
@@ -236,7 +226,8 @@ class HomepageScreen extends StatelessWidget {
), ),
Text( Text(
'Clock In', 'Clock In',
style: Constant.titleH2_700(context: context) style:
Constant.titleH2_700(context: context)
.copyWith( .copyWith(
color: Constant.textLightGrey, color: Constant.textLightGrey,
), ),
@@ -270,7 +261,8 @@ class HomepageScreen extends StatelessWidget {
), ),
Text( Text(
'Clock Out', 'Clock Out',
style: Constant.titleH2_700(context: context) style:
Constant.titleH2_700(context: context)
.copyWith( .copyWith(
color: Constant.textLightGrey, color: Constant.textLightGrey,
), ),
@@ -282,8 +274,8 @@ class HomepageScreen extends StatelessWidget {
), ),
SizedBox( SizedBox(
height: height: Constant.getActualYPhone(
Constant.getActualYPhone(context: context, y: 16), context: context, y: 16),
), ),
], ],
), ),
@@ -303,54 +295,47 @@ class HomepageScreen extends StatelessWidget {
right: Constant.getActualXPhone(context: context, x: 27), right: Constant.getActualXPhone(context: context, x: 27),
), ),
child: Container( child: Container(
width: Constant.getActualXPhone(context: context, x: 330),
child: Row( child: Row(
children: [ children: [
//Menu Cuti //Menu Cuti
SizedBox( Container(
width: width:
Constant.getActualXPhone(context: context, x: 98), Constant.getActualXPhone(context: context, x: 98),
child: ElevatedButton( // color: Colors.amber,
style: ButtonStyle( decoration: BoxDecoration(
backgroundColor: MaterialStateColor.resolveWith( color: Colors.white,
(st) => 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>(
Color.fromRGBO(145, 158, 171, 0.16)),
),
onPressed: () {},
child: Padding( child: Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
top: Constant.getActualYPhone(
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( right: Constant.getActualXPhone(
context: context, x: 12), context: context, x: 12),
top: Constant.getActualYPhone(
context: context, y: 8),
bottom: Constant.getActualYPhone(
context: context, y: 8),
), ),
child: InkWell(
onTap: () {},
child: Column( child: Column(
children: [ children: [
Container( Container(
child: Image(
width: Constant.getActualXPhone( width: Constant.getActualXPhone(
context: context, x: 50), context: context, x: 50),
height: Constant.getActualYPhone( height: Constant.getActualYPhone(
context: context, y: 50), context: context, y: 50),
decoration: BoxDecoration(
// color: Colors.green,
image: DecorationImage(
// fit: BoxFit.contain,
image: AssetImage('images/person.png'), image: AssetImage('images/person.png'),
), ),
), ),
),
SizedBox( SizedBox(
height: Constant.getActualYPhone( height: Constant.getActualYPhone(
context: context, y: 8), context: context, y: 8),
@@ -366,58 +351,52 @@ class HomepageScreen extends StatelessWidget {
], ],
), ),
), ),
)), ),
),
SizedBox( SizedBox(
width: Constant.getActualXPhone(context: context, x: 18), width:
Constant.getActualXPhone(context: context, x: 18),
), ),
//Menu Lembur //Menu Lembur
SizedBox( Container(
width: width:
Constant.getActualXPhone(context: context, x: 98), Constant.getActualXPhone(context: context, x: 98),
child: ElevatedButton( // color: Colors.amber,
style: ButtonStyle( decoration: BoxDecoration(
backgroundColor: MaterialStateColor.resolveWith( color: Colors.white,
(st) => 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>(
Color.fromRGBO(145, 158, 171, 0.16)),
),
onPressed: () {},
child: Padding( child: Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
top: Constant.getActualYPhone(
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( right: Constant.getActualXPhone(
context: context, x: 12), context: context, x: 12),
top: Constant.getActualYPhone(
context: context, y: 8),
bottom: Constant.getActualYPhone(
context: context, y: 8),
), ),
child: InkWell(
onTap: () {},
child: Column( child: Column(
children: [ children: [
Container( Container(
child: Image(
width: Constant.getActualXPhone( width: Constant.getActualXPhone(
context: context, x: 50), context: context, x: 50),
height: Constant.getActualYPhone( height: Constant.getActualYPhone(
context: context, y: 50), context: context, y: 50),
decoration: BoxDecoration(
// color: Colors.green,
image: DecorationImage(
// fit: BoxFit.contain,
image: AssetImage('images/task.png'), image: AssetImage('images/task.png'),
), ),
), ),
),
SizedBox( SizedBox(
height: Constant.getActualYPhone( height: Constant.getActualYPhone(
context: context, y: 8), context: context, y: 8),
@@ -433,7 +412,8 @@ class HomepageScreen extends StatelessWidget {
], ],
), ),
), ),
)), ),
),
], ],
), ),
), ),
@@ -449,19 +429,21 @@ class HomepageScreen extends StatelessWidget {
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: Container(
width: Constant.getActualXPhone(context: context, x: 330), width: Constant.getActualXPhone(context: context, x: 330),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
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(
@@ -477,14 +459,14 @@ class HomepageScreen extends StatelessWidget {
), ),
child: Padding( child: Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
top: top: Constant.getActualYPhone(
Constant.getActualYPhone(context: context, y: 12), context: context, y: 12),
bottom: bottom: Constant.getActualYPhone(
Constant.getActualYPhone(context: context, y: 12), context: context, y: 12),
left: left: Constant.getActualXPhone(
Constant.getActualXPhone(context: context, x: 24), context: context, x: 24),
right: right: Constant.getActualXPhone(
Constant.getActualXPhone(context: context, x: 24), context: context, x: 24),
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -635,6 +617,7 @@ class HomepageScreen extends StatelessWidget {
], ],
), ),
), ),
),
); );
} }
} }