diff --git a/images/iconbarcode.png b/images/iconbarcode.png new file mode 100644 index 0000000..6eb84e4 Binary files /dev/null and b/images/iconbarcode.png differ diff --git a/images/icongender.png b/images/icongender.png new file mode 100644 index 0000000..bdb8ca1 Binary files /dev/null and b/images/icongender.png differ diff --git a/lib/app/constant.dart b/lib/app/constant.dart index bcb4a89..6e6fcac 100644 --- a/lib/app/constant.dart +++ b/lib/app/constant.dart @@ -18,12 +18,10 @@ class Constant { static Color bgRed = const Color(0xffFF4842).withOpacity(0.08); static Color bgGrey = const Color(0xffF9F9F9); static Color bgBlue = Colors.blue; + static Color bgIcon = const Color(0xffA8CF45); + static Color textCardGrey = const Color.fromRGBO(0, 0, 0, 0.60); - static Color textTrueBlack = const Color(0xff000000); static Color textBlack = const Color(0xff212B36); - static Color textLightGrey = const Color(0xff919EAB); - static Color textOrange = const Color(0xffF15A29); - static Color textDarkGrey = const Color(0xff637381); static Color textWhite = Color(0xffFDFDFD); static Color textRed = Color(0xffFF4842); // background upload file @@ -45,6 +43,20 @@ class Constant { } // typography + static TextStyle titleRiwayat({required BuildContext context}) { + return TextStyle( + fontSize: Constant.getActualYPhone(context: context, y: 20), + fontWeight: FontWeight.w500, + ); + } + + static TextStyle cardText({required BuildContext context}) { + return TextStyle( + fontSize: Constant.getActualYPhone(context: context, y: 14), + fontWeight: FontWeight.w400, + ); + } + static TextStyle title_700({required BuildContext context}) { return TextStyle( fontSize: Constant.getActualYPhone(context: context, y: 36), @@ -66,6 +78,13 @@ class Constant { ); } + static TextStyle titleInputan600({required BuildContext context}) { + return TextStyle( + fontSize: Constant.getActualYPhone(context: context, y: 16), + fontWeight: FontWeight.w600, + ); + } + static TextStyle titleButton500({required BuildContext context}) { return TextStyle( fontSize: Constant.getActualYPhone(context: context, y: 15), diff --git a/lib/screen/home/card_riwayat_scan.dart b/lib/screen/home/card_riwayat_scan.dart new file mode 100644 index 0000000..81bba90 --- /dev/null +++ b/lib/screen/home/card_riwayat_scan.dart @@ -0,0 +1,145 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; + +import '../../app/constant.dart'; + +class CardRiwayatScan extends HookConsumerWidget { + const CardRiwayatScan({super.key}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [ + SystemUiOverlay.bottom, + ]); + + return GestureDetector( + onTap: () { + FocusManager.instance.primaryFocus!.unfocus(); + }, + child: Card( + elevation: 2, + color: Constant.textWhite, + child: Padding( + padding: EdgeInsets.all( + Constant.getActualYPhone(context: context, y: 12), + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + '3171234567890123', + style: Constant.titleInputan600(context: context).copyWith( + color: Constant.textBlack, + ), + ), + Icon( + Icons.edit, + color: Constant.bgButton, + size: 20, + ), + ], + ), + SizedBox( + height: Constant.getActualYPhone( + context: context, + y: 12, + ), + ), + // row nama + Row( + children: [ + Icon( + Icons.person_2_outlined, + color: Constant.bgIcon, + size: 20, + ), + SizedBox( + width: Constant.getActualXPhone( + context: context, + x: 8, + ), + ), + Text( + 'MIRA SETIAWAN', + style: Constant.cardText(context: context).copyWith( + color: Constant.textCardGrey, + ), + ), + ], + ), + // row nama + SizedBox( + height: Constant.getActualYPhone( + context: context, + y: 10, + ), + ), + // row dob + Row( + children: [ + Icon( + Icons.date_range_outlined, + color: Constant.bgIcon, + size: 20, + ), + SizedBox( + width: Constant.getActualXPhone( + context: context, + x: 8, + ), + ), + Text( + '18-02-1996', + style: Constant.cardText(context: context).copyWith( + color: Constant.textCardGrey, + ), + ), + ], + ), + // row dob + SizedBox( + height: Constant.getActualYPhone( + context: context, + y: 10, + ), + ), + // row jenis kelamin + Row( + children: [ + Image.asset( + 'images/icongender.png', + width: Constant.getActualXPhone( + context: context, + x: 20, + ), + height: Constant.getActualYPhone( + context: context, + y: 20, + ), + fit: BoxFit.cover, + ), + SizedBox( + width: Constant.getActualXPhone( + context: context, + x: 8, + ), + ), + Text( + 'Perempuan', + style: Constant.cardText(context: context).copyWith( + color: Constant.textCardGrey, + ), + ), + ], + ), + // row jenis kelamin + ], + ), + ), + ), + ); + } +} diff --git a/lib/screen/home/home_screen.dart b/lib/screen/home/home_screen.dart index 568ec24..4e87ebd 100644 --- a/lib/screen/home/home_screen.dart +++ b/lib/screen/home/home_screen.dart @@ -1,6 +1,8 @@ import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:scanktpflutter/screen/home/card_riwayat_scan.dart'; import '../../app/constant.dart'; import '../../app/route.dart'; @@ -11,6 +13,10 @@ class HomeScreen extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [ + SystemUiOverlay.bottom, + ]); + final currentUser = ref.watch(currentUserProvider); useEffect(() { @@ -51,7 +57,6 @@ class HomeScreen extends HookConsumerWidget { y: 34, ), ), - Text(username), // button scan ktp Padding( padding: EdgeInsets.only( @@ -83,14 +88,23 @@ class HomeScreen extends HookConsumerWidget { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - Icon( - Icons.scanner, - color: Constant.textWhite, - size: 24, + Image.asset( + 'images/iconbarcode.png', + width: Constant.getActualXPhone( + context: context, + x: 20, + ), + height: Constant.getActualYPhone( + context: context, + y: 20, + ), + fit: BoxFit.cover, ), SizedBox( - width: - Constant.getActualXPhone(context: context, x: 10), + width: Constant.getActualXPhone( + context: context, + x: 10, + ), ), Text( 'SCAN KTP BARU', @@ -104,6 +118,57 @@ class HomeScreen extends HookConsumerWidget { ), ), ), + SizedBox( + height: Constant.getActualYPhone( + context: context, + y: 56, + ), + ), + Padding( + padding: EdgeInsets.only( + left: Constant.getActualXPhone( + context: context, + x: 20, + ), + right: Constant.getActualXPhone( + context: context, + x: 20, + ), + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Riwayat', + style: + Constant.titleRiwayat(context: context).copyWith( + color: Constant.textBlack, + ), + ), + Text( + '20 Scan Terakhir', + style: Constant.titleInputan500(context: context) + .copyWith( + color: Constant.inputanGrey, + ), + ), + ], + ), + SizedBox( + height: Constant.getActualYPhone( + context: context, + y: 24, + ), + ), + + // card riwayat + CardRiwayatScan(), + // card riwayat + ], + ), + ), ], ), ), diff --git a/lib/screen/login/login_screen.dart b/lib/screen/login/login_screen.dart index 31d4f15..5435d8a 100644 --- a/lib/screen/login/login_screen.dart +++ b/lib/screen/login/login_screen.dart @@ -1,12 +1,8 @@ -import 'dart:convert'; - import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:scanktpflutter/app/route.dart'; -import 'package:scanktpflutter/model/auth_model.dart'; -import 'package:shared_preferences/shared_preferences.dart'; import '../../app/constant.dart'; import '../../provider/current_user_provider.dart'; diff --git a/pubspec.lock b/pubspec.lock index 3c7347d..12572c9 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -160,6 +160,14 @@ packages: url: "https://pub.dev" source: hosted version: "0.20.2" + jiffy: + dependency: "direct main" + description: + name: jiffy + sha256: "1c1b86459969ff9f32dc5b0ffe392f1e08181e66396cf9dd8fa7c90552a691af" + url: "https://pub.dev" + source: hosted + version: "6.3.2" leak_tracker: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index d2b9a89..9ae446f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -43,6 +43,7 @@ dependencies: shared_preferences: ^2.5.2 equatable: ^2.0.7 top_snackbar_flutter: ^3.2.0 + jiffy: ^6.3.1 dev_dependencies: flutter_test: @@ -73,6 +74,8 @@ flutter: - images/splashatas.png - images/splashbawah.png - images/vektoratas.png + - images/icongender.png + - images/iconbarcode.png # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/to/resolution-aware-images