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

step 4 : slicing login screen

Browse Source
This commit is contained in:
sindhu
2025-02-15 13:24:26 +07:00
parent d70b20f5ff
commit 60febfa5c8
6 changed files with 363 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/vektoratas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

161
lib/app/constant.dart
View File

@@ -40,174 +40,35 @@ class Constant {
}
// typography
static TextStyle titleH1_700({required BuildContext context}) {
static TextStyle title_700({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 24),
fontSize: Constant.getActualYPhone(context: context, y: 36),
fontWeight: FontWeight.w700,
);
}
static TextStyle titleH2_600({required BuildContext context}) {
static TextStyle title_400({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 12),
fontWeight: FontWeight.w600,
);
}
static TextStyle logintitle_700({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 15),
fontWeight: FontWeight.w700,
);
}
static TextStyle titleH2_400_12({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 12),
fontWeight: FontWeight.w400,
fontFamily: 'Public Sans');
}
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_400_14({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 14),
fontWeight: FontWeight.w400,
fontFamily: 'Public Sans');
}
static TextStyle titleH1_500_18({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 18),
fontWeight: FontWeight.w500,
fontFamily: 'Public Sans');
}
static TextStyle titleH1_700_18({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 18),
fontWeight: FontWeight.w700,
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 titleH3_700({required BuildContext context}) {
return TextStyle(
fontFamily: 'Quicksand',
fontSize: Constant.getActualYPhone(context: context, y: 16),
fontWeight: FontWeight.w700,
);
}
static TextStyle titleH2_500({required BuildContext context}) {
return TextStyle(
fontFamily: 'Quicksand',
fontSize: Constant.getActualYPhone(context: context, y: 12),
fontWeight: FontWeight.w500,
);
}
static TextStyle titleH2_400({required BuildContext context}) {
return TextStyle(
fontFamily: 'Public Sans',
fontSize: Constant.getActualYPhone(context: context, y: 12),
fontWeight: FontWeight.w400,
);
}
static TextStyle titlePresensiH2_700({required BuildContext context}) {
static TextStyle titleInputan500({required BuildContext context}) {
return TextStyle(
fontFamily: 'Quicksand',
fontSize: Constant.getActualYPhone(context: context, y: 24),
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 subtitle_600_14({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 14),
fontWeight: FontWeight.w700,
fontFamily: 'Public Sans',
);
}
static TextStyle subtitle_500_12({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 12),
fontSize: Constant.getActualYPhone(context: context, y: 16),
fontWeight: FontWeight.w500,
fontFamily: 'Public Sans',
);
}
static TextStyle date_600({required BuildContext context}) {
static TextStyle titleButton500({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 16),
fontWeight: FontWeight.w600,
fontFamily: 'Quicksand',
fontSize: Constant.getActualYPhone(context: context, y: 15),
fontWeight: FontWeight.w500,
);
}
static TextStyle title_screen({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 24),
fontWeight: FontWeight.w600,
fontFamily: 'Public Sans',
);
}
static TextStyle body_16({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 16),
fontWeight: FontWeight.w600,
fontFamily: 'Public Sans',
);
}
static TextStyle body_14({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 14),
fontWeight: FontWeight.w600,
fontFamily: 'Public Sans',
);
}
static TextStyle body_12({required BuildContext context}) {
return TextStyle(
fontSize: Constant.getActualYPhone(context: context, y: 12),
fontWeight: FontWeight.w600,
fontFamily: 'Public Sans',
);
}
static Color primaryBlue = const Color(0xff0C53B7);
static Color bgBlue = const Color(0xff1890FF).withOpacity(0.16);
static Color primaryOrange = const Color(0xffF15A29);
static Color bgOrange = const Color(0xffF15A29).withOpacity(0.16);
static Color secondaryBlue = const Color(0xff43ADA5);
static Color bgSecondaryBlue = const Color(0xff43ADA5).withOpacity(0.16);
static Color primaryGreen = const Color(0xff229A16);
static Color bgGreen = const Color(0xff54D62C).withOpacity(0.08);
static Color primaryRed = const Color(0xffB72136);
static Color inputanGrey = const Color(0xff637381);
static Color bgButton = const Color(0xFF0098DA);
static Color bgRed = const Color(0xffFF4842).withOpacity(0.08);
}
}

13
lib/app/route.dart
View File

@@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
import '../screen/login_screen.dart';
import '../screen/splash_screen.dart';
const splashRoute = "/splashRoute";
const loginRoute = "/loginRoute";
class AppRoute {
static Route<dynamic> generateRoute(RouteSettings settings) {
@@ -16,6 +18,17 @@ class AppRoute {
);
});
}
// login screen
if (settings.name == loginRoute) {
return MaterialPageRoute(builder: (context) {
return MediaQuery(
data: MediaQuery.of(context)
.copyWith(textScaler: TextScaler.linear(1.0), padding: EdgeInsets.all(0)),
child: LoginScreen(),
);
});
}
return MaterialPageRoute(builder: (context) {
return MediaQuery(

3
lib/main.dart
View File

@@ -31,7 +31,8 @@ class MyApp extends StatelessWidget {
},
),
debugShowCheckedModeBanner: false,
initialRoute: splashRoute,
// initialRoute: splashRoute,
initialRoute: loginRoute,
onGenerateRoute: AppRoute.generateRoute,
);
}

336
lib/screen/login_screen.dart Normal file
View File

@@ -0,0 +1,336 @@
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 '../app/constant.dart';
class LoginScreen extends HookConsumerWidget {
const LoginScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
SystemUiOverlay.bottom,
]);
final usernameCtr = useTextEditingController(
text: "",
);
final passwordCtr = useTextEditingController(
text: "",
);
final hostCtr = useTextEditingController(
text: "",
);
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus!.unfocus();
},
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Constant.textWhite,
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// atas
Image.asset(
'images/vektoratas.png',
width: double.infinity,
fit: BoxFit.cover,
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 40,
),
),
// konten didalamnya
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: Text(
'Selamat Datang',
style: Constant.title_700(context: context).copyWith(
color: Constant.textBlack,
),
),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: Text(
'Silahkan masuk untuk mengakses akun Anda',
style: Constant.title_400(context: context).copyWith(
color: Constant.textBlack,
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 64,
),
),
// inputan
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: Text(
'Username',
style: Constant.title_400(context: context).copyWith(
color: Constant.inputanGrey,
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 16,
),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: TextField(
controller: usernameCtr,
onTap: () {},
decoration: InputDecoration(
hintText: "Masukkan Username",
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 1,
),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
width: 2,
),
),
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 20,
),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: Text(
'Password',
style: Constant.title_400(context: context).copyWith(
color: Constant.inputanGrey,
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 16,
),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: TextField(
controller: passwordCtr,
obscureText: true,
onTap: () {},
decoration: InputDecoration(
hintText: "Masukkan Password",
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 1,
),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
width: 2,
),
),
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 20,
),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: Text(
'Host',
style: Constant.title_400(context: context).copyWith(
color: Constant.inputanGrey,
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 16,
),
),
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: TextField(
controller: hostCtr,
onTap: () {},
decoration: InputDecoration(
hintText: "Masukkan Host",
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 1,
),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
width: 2,
),
),
),
),
),
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 64,
),
),
// inputan
// button login
Padding(
padding: EdgeInsets.only(
left: Constant.getActualXPhone(
context: context,
x: 20,
),
right: Constant.getActualXPhone(
context: context,
x: 20,
),
),
child: SizedBox(
width: double.infinity,
height: Constant.getActualYPhone(
context: context,
y: 48,
),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Constant.bgButton,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 8,
shadowColor: Constant.bgButton.withOpacity(0.24),
),
child: Text(
'LOGIN',
style: Constant.titleButton500(context: context).copyWith(
color: Constant.textWhite,
),
),
),
),
),
// konten didalamnya
SizedBox(
height: Constant.getActualYPhone(
context: context,
y: 60,
),
),
],
),
),
),
);
}
}

1
pubspec.yaml
View File

@@ -72,6 +72,7 @@ flutter:
- images/splash.png
- images/splashatas.png
- images/splashbawah.png
- images/vektoratas.png
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/to/resolution-aware-images