[Homepage] 4. add card time on Homepage screen
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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,
|
||||
);
|
||||
|
||||
131
lib/screen/homepage/homepage_screen.dart
Normal file
131
lib/screen/homepage/homepage_screen.dart
Normal file
@@ -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),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user