[Homepage] 4. add card time on Homepage screen

lib/app/constant.dart

@@ -9,6 +9,7 @@ class Constant {
 
   // color theme
   static Color textBlack = const Color(0xff212B36);
+  static Color textDarkGrey = const Color(0xff637381);
   static Color textLightGrey = const Color(0xff919EAB);
 
   // size convertion
@@ -41,10 +42,43 @@ class Constant {
     );
   }
 
+  static TextStyle titleH2_600_14({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 14),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Public Sans'
+    );
+  }
+
+  static TextStyle titleH2_700({required BuildContext context}) {
+    return TextStyle(
+      fontFamily: 'Quicksand',
+      fontSize: Constant.getActualYPhone(context: context, y: 14),
+      fontWeight: FontWeight.w700,
+    );
+  }
+
+
   static TextStyle logintitle_700({required BuildContext context}) {
     return TextStyle(
       fontSize: Constant.getActualYPhone(context: context, y: 15),
       fontWeight: FontWeight.w700,
     );
   }
+
+  static TextStyle time_700({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 28),
+      fontWeight: FontWeight.w700,
+      fontFamily: 'Quicksand',
+    );
+  }
+
+  static TextStyle date_600({required BuildContext context}) {
+    return TextStyle(
+      fontSize: Constant.getActualYPhone(context: context, y: 16),
+      fontWeight: FontWeight.w600,
+      fontFamily: 'Quicksand',
+    );
+  }
 }

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<dynamic> 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)

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,
     );

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),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/screen/widget/real_date.dart

@@ -0,0 +1,38 @@
+
+import 'package:absensi_sas_flutter/app/constant.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+class RealTimeFormattedDate extends StatefulWidget {
+  @override
+  _RealTimeFormattedDateState createState() => _RealTimeFormattedDateState();
+}
+
+class _RealTimeFormattedDateState extends State<RealTimeFormattedDate> {
+  late Stream<DateTime> _clockStream;
+
+  @override
+  void initState() {
+    super.initState();
+    _clockStream = Stream<DateTime>.periodic(Duration(seconds: 1), (i) => DateTime.now());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return StreamBuilder<DateTime>(
+      stream: _clockStream,
+      builder: (context, snapshot) {
+        if (snapshot.hasData) {
+          String formattedDate = DateFormat('EEEE, d MMMM y', 'id_ID').format(snapshot.data!);
+          return Text(
+            formattedDate,
+            style: Constant.date_600(context: context).copyWith(
+                      color: Constant.textBlack),
+          );
+        } else {
+          return Text('Loading...');
+        }
+      },
+    );
+  }
+}

lib/screen/widget/real_time.dart

@@ -0,0 +1,39 @@
+
+import 'package:absensi_sas_flutter/app/constant.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+class RealTimeClock extends StatefulWidget {
+  @override
+  _RealTimeClockState createState() => _RealTimeClockState();
+}
+
+class _RealTimeClockState extends State<RealTimeClock> {
+  late Stream<DateTime> _clockStream;
+
+  @override
+  void initState() {
+    super.initState();
+    _clockStream = Stream<DateTime>.periodic(Duration(seconds: 1), (i) => DateTime.now());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return StreamBuilder<DateTime>(
+      stream: _clockStream,
+      builder: (context, snapshot) {
+        if (snapshot.hasData) {
+          String formattedTime = DateFormat('HH:mm:ss').format(snapshot.data!);
+          return Text(
+            formattedTime,
+            style: Constant.time_700(context: context).copyWith(
+                      color: Constant.textBlack,
+                    ),
+          );
+        } else {
+          return Text('Loading...');
+        }
+      },
+    );
+  }
+}