From ce0b753da51d9db2da1b52813e996e776336e43e Mon Sep 17 00:00:00 2001 From: Stephen Date: Thu, 11 Jan 2024 14:58:37 +0700 Subject: [PATCH] [Homepage] 4. add card time on Homepage screen --- lib/app/route.dart | 13 +++ lib/main.dart | 4 +- lib/screen/homepage/homepage_screen.dart | 131 +++++++++++++++++++++++ 3 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 lib/screen/homepage/homepage_screen.dart diff --git a/lib/app/route.dart b/lib/app/route.dart index 29c5784..54fbb42 100644 --- a/lib/app/route.dart +++ b/lib/app/route.dart @@ -1,3 +1,4 @@ +import 'package:absensi_sas_flutter/screen/homepage/homepage_screen.dart'; import 'package:flutter/material.dart'; import '../test_flutter_map.dart'; import '../screen/login/login_screen.dart'; @@ -6,6 +7,7 @@ import '../screen/splash/splash_screen.dart'; const loginRoute = "/loginRoute"; const splashRoute = "/splashRoute"; const testFlutterMapRoute = "/testFlutterMapRoute"; +const homepageRoute = "/homepageRoute"; class AppRoute { static Route generateRoute(RouteSettings settings) { @@ -43,6 +45,17 @@ class AppRoute { }); } + // homepage + if (settings.name == homepageRoute) { + return MaterialPageRoute(builder: (context) { + return MediaQuery( + data: MediaQuery.of(context) + .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)), + child: HomepageScreen(), + ); + }); + } + return MaterialPageRoute(builder: (context) { return MediaQuery( data: MediaQuery.of(context) diff --git a/lib/main.dart b/lib/main.dart index af6e7ac..99c5f38 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,10 +1,12 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:intl/date_symbol_data_local.dart'; import '../app/route.dart'; // import '../test_map.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); + await initializeDateFormatting('id_ID', null); runApp(const ProviderScope(child: MyApp())); } @@ -25,7 +27,7 @@ class MyApp extends StatelessWidget { primarySwatch: Colors.orange, ), // home: TestMap(), - initialRoute: loginRoute, + initialRoute: homepageRoute, // initialRoute: testFlutterMapRoute, onGenerateRoute: AppRoute.generateRoute, ); diff --git a/lib/screen/homepage/homepage_screen.dart b/lib/screen/homepage/homepage_screen.dart new file mode 100644 index 0000000..4c1df35 --- /dev/null +++ b/lib/screen/homepage/homepage_screen.dart @@ -0,0 +1,131 @@ +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( + body: SafeArea( + child: Column( + children: [ + + 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), + ), + ], + ), + ), + ), + ), + ), + ], + ), + ), + ); + } +} \ No newline at end of file