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

Compare commits

base: sindhu:andy/coba
Branches Tags
sindhu:main sindhu:develop_flutter_web_3.24.1 sindhu:andy/coba sindhu:add-homepage
...
compare: sindhu:ce0b753da51d9db2da1b52813e996e776336e43e
Branches Tags
sindhu:develop_flutter_web_3.24.1 sindhu:main sindhu:andy/coba sindhu:add-homepage

4 Commits
andy/coba ... ce0b753da5

Author SHA1 Message Date
Stephen
ce0b753da5 [Homepage] 4. add card time on Homepage screen 2024-01-11 14:58:37 +07:00
Stephen
9cff5e1db8 [Homepage] 3. add date & time widget 2024-01-11 14:55:38 +07:00
Stephen
17f451edb6 [Homepage] 2. add images 2024-01-11 14:54:26 +07:00
Stephen
87163441ad [Homepage] 1. add Constant 2024-01-11 14:28:31 +07:00
8 changed files with 258 additions and 1 deletions
Expand all files Collapse all files

BIN
images/card_bg_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
images/finger_tap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 597 B

34
lib/app/constant.dart
View File

@@ -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',
);
}
}

13
lib/app/route.dart
View File

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

4
lib/main.dart
View File

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

38
lib/screen/widget/real_date.dart Normal file
View File

@@ -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...');
}
},
);
}
}

39
lib/screen/widget/real_time.dart Normal file
View File

@@ -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...');
}
},
);
}
}