sindhu/scan-ktp
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

step 8 : slicing home screen fix

Browse Source
This commit is contained in:
sindhu
2025-02-15 18:32:12 +07:00
parent 823f1aa525
commit 32abcb60dc
8 changed files with 251 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/iconbarcode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
images/icongender.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

27
lib/app/constant.dart
View File

@@ -18,12 +18,10 @@ class Constant {
static Color bgRed = const Color(0xffFF4842).withOpacity(0.08); static Color bgRed = const Color(0xffFF4842).withOpacity(0.08);
static Color bgGrey = const Color(0xffF9F9F9); static Color bgGrey = const Color(0xffF9F9F9);
static Color bgBlue = Colors.blue; 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 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 textWhite = Color(0xffFDFDFD);
static Color textRed = Color(0xffFF4842); static Color textRed = Color(0xffFF4842);
// background upload file // background upload file
@@ -45,6 +43,20 @@ class Constant {
} }
// typography // 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}) { static TextStyle title_700({required BuildContext context}) {
return TextStyle( return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 36), 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}) { static TextStyle titleButton500({required BuildContext context}) {
return TextStyle( return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 15), fontSize: Constant.getActualYPhone(context: context, y: 15),

145
lib/screen/home/card_riwayat_scan.dart Normal file
View File

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

79
lib/screen/home/home_screen.dart
View File

@@ -1,6 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:scanktpflutter/screen/home/card_riwayat_scan.dart';
import '../../app/constant.dart'; import '../../app/constant.dart';
import '../../app/route.dart'; import '../../app/route.dart';
@@ -11,6 +13,10 @@ class HomeScreen extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
SystemUiOverlay.bottom,
]);
final currentUser = ref.watch(currentUserProvider); final currentUser = ref.watch(currentUserProvider);
useEffect(() { useEffect(() {
@@ -51,7 +57,6 @@ class HomeScreen extends HookConsumerWidget {
y: 34, y: 34,
), ),
), ),
Text(username),
// button scan ktp // button scan ktp
Padding( Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
@@ -83,14 +88,23 @@ class HomeScreen extends HookConsumerWidget {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon( Image.asset(
Icons.scanner, 'images/iconbarcode.png',
color: Constant.textWhite, width: Constant.getActualXPhone(
size: 24, context: context,
x: 20,
),
height: Constant.getActualYPhone(
context: context,
y: 20,
),
fit: BoxFit.cover,
), ),
SizedBox( SizedBox(
width: width: Constant.getActualXPhone(
Constant.getActualXPhone(context: context, x: 10), context: context,
x: 10,
),
), ),
Text( Text(
'SCAN KTP BARU', '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
],
),
),
], ],
), ),
), ),

4
lib/screen/login/login_screen.dart
View File

@@ -1,12 +1,8 @@
import 'dart:convert';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:scanktpflutter/app/route.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 '../../app/constant.dart';
import '../../provider/current_user_provider.dart'; import '../../provider/current_user_provider.dart';

8
pubspec.lock
View File

@@ -160,6 +160,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.20.2" 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: leak_tracker:
dependency: transitive dependency: transitive
description: description:

3
pubspec.yaml
View File

@@ -43,6 +43,7 @@ dependencies:
shared_preferences: ^2.5.2 shared_preferences: ^2.5.2
equatable: ^2.0.7 equatable: ^2.0.7
top_snackbar_flutter: ^3.2.0 top_snackbar_flutter: ^3.2.0
jiffy: ^6.3.1
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:
@@ -73,6 +74,8 @@ flutter:
- images/splashatas.png - images/splashatas.png
- images/splashbawah.png - images/splashbawah.png
- images/vektoratas.png - images/vektoratas.png
- images/icongender.png
- images/iconbarcode.png
# An image asset can refer to one or more resolution-specific "variants", see # An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/to/resolution-aware-images # https://flutter.dev/to/resolution-aware-images