From 60febfa5c8eb6141d054fd74ecf6141197f916a2 Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Sat, 15 Feb 2025 13:24:26 +0700
Subject: [PATCH] step 4 : slicing login screen

---
 images/vektoratas.png        | Bin 0 -> 1729 bytes
 lib/app/constant.dart        | 161 ++---------------
 lib/app/route.dart           |  13 ++
 lib/main.dart                |   3 +-
 lib/screen/login_screen.dart | 336 +++++++++++++++++++++++++++++++++++
 pubspec.yaml                 |   1 +
 6 files changed, 363 insertions(+), 151 deletions(-)
 create mode 100644 images/vektoratas.png
 create mode 100644 lib/screen/login_screen.dart

diff --git a/images/vektoratas.png b/images/vektoratas.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4260354436083795994429a372ae1038f3827fe
GIT binary patch
literal 1729
zcmW-id0bOh7RTR9URItONRXg|1lbHAzS0(^qX9xA1Q7y3GROcvD4_5G5!oY@N21Y+
zSXNoY5D?i!py0}mv<ht@0ki|1LF~+k!GfR$9F{^8{<!y^-#y>+JLhx%x!?Hucx<EY
zq5=T0&6Cd)0stt}#xZ1~c7K?#T(3PSXZXhx0YHzgTOd$g!PH)Yi9!!Ipn2pkvswY2
z<a%=f;Ja`2*24$@KooiMxX04K`6;i{QxQxeN^-!$4(_Wq*(rl3jJ;-e<^{TTNRvqH
zaPS6;YdNMc;5L)iEPN^wU3xZ3UguXQ7K!G6ZgJ_YoR?0Y?ERSv6eJ()WJmpwoRD}f
z{bTofL+@ttJMVWNmp-%~$hm#<Ku;Ivi_L|#2Nwx|-=ne+JCm2cFMM!0;9}aNeCxdV
z=xb3$Xt&MCPs;Y+jZRj!oT$iH|G4D$g>hHbhk^ct57S04KyOse#4qfa%OS1JEX3z@
zPRE^1UkfnCDPNnNNm+_Z5U(`;KWV9L{f~b>eU+u@S-16gm6iH_=Bczjc~gc0YQJPh
zm(5uDy_U7FvmB>IiPZY-8(F~_PMglDz8U)p{};ECE(|vGxGq8SQ6TWE=acIlUVrVZ
z7=CasjGDIY)&8F*IQypbc!EQx{fled#i~=D2rwC#>e%}poqiYFb0^o|bv%StQN(R+
zvsSwyz-WyBV_A3|8=V~CaE&A&`EhOWkB*kH{1iEEXR?~oL4*5P;m+6NZ@*$J)<2ai
z^!kC=d(G!VRyb|#EBAv0pf`RQ3Lz5*ePPSkeSZ^xKe^B9s%VdVMK=Dv0<hBl#K?|~
zC7x=Cx77jHJ|DX=WYShvIs70%0A_`D*^k7_Il;s?2;mU5MmJSo-&wn`FC7LMD#j^+
z>H>;!YPy8RoiWt<mQ5$TqJ)heU(|VJH|4Gb?_Txy2A{vGY=oP0ehaO`4(o5tQ&4r@
zTRG_8cM}pz>>+%Ao3N~8v<|C<&gtaMGme6|Hm%RtmXD~YbuN62jrv7x$wzVV`DZ6(
z-neqyp2!#UBr~RgXh9i&?tU(wvqp}go*JWT+!0>Hc&^ZXO7(zMhee9DPbZ`7KRwmd
zY5q&Lyy`}1PevL)_>cNaeYlrb<tRf^<uUA*G9|us{Z^^)bHXzvp|K8o<EP(0MnCF?
z#47SEMLFMI-Y(XeLuR+piPw?l+cn=;ml!=c>Ls9+s-<DiXL8-HF}5u}E{#@GBu2qV
ztWCs}iI=@WDQ?d!rTWt}q{%jd(`{f-jw{zdqyIX{yw9QbXYUbt#ZUult@(q$-5=h4
z!EVlah>hmUS<x3wT{eS&c?)O4p)q>I51DYQ)UFn@;&6X~@OFbyx*F66$-5(_*1sh?
z_ogq?fFU0+M*}sPF$di^gkwrVj5GT)TQM%hg2_L!?C)AA$F4#6QR?!APsYdSsxp+7
zmfwX$?GodNEGGFf8`a~0<}~=|V@9hv2c*+rc!bgF!~qKpV9gVTsz8qQk%>W{5Rw$u
ztTU4A+_rP>Dw+o3xg(3{^IM8HK4C$lblU#@yoM{L3@4ZaQuJZtz&U*5)58xL&+_Hi
zd5Y}38c(dTW|>ROgsYgJnle~`Uc#JF3o)*g4rh;&uJ8qbEk*W?8gHer#%_>h`r7E0
zHO8UH<g<9IT5D_s`jWJY0cwgORTAb=S8`wpG*i+0UP1%7OxHXOgj6?4tEkx>cohla
z34p>Mt(Y1R9H+bb7Qn<z*OwZIcDG*2HKiGHK;GVRR7K*s3xH9ogBH^tqq{m-?a*S+
zt}a1&@=*!bG!I*SuWFjpJAL`9l8Y>FDI|4f=?~AFX~pgvTA#d9u}v!nn*7yPYd~qN
zl{DJ!%Q{MMjf_Op_=3Mr`7buF9@~Y_*}eoCKRjW%zqdP40JaYI3wnp62y6#K;7;0H
zip|>&N#&gaTnI%Lc-)de+{+9PFJ>^aQF2)WP>P{s<xpmHM$Ko$S{Ac5s+d8(f|kkx
zgsebG7+i~E?UjU)1z!J6jigmDfP5O9`P~t!g&T4=vY5dyLMN01HVq8`zZjk1MZ*z%
z#IF4aHNqPyr2_K7&zV=XeVeX%AkS{sya)hV1Iqi+Vus>glB9oI6wrOiiTO4(GCjk0
zLyND{|A7Qr5}1J#ItEQLBT5?p)NPz34G?0AE2gl>6O=gm=$K1S5FNt`$|Md9bW)3+
z0PkY9@&$L}b$R~3XHdith<F{1915{qYQ|x(NsuK$F`M<PVWELJd!j}A;{cwAeR$1o
GsN_#`{?pn3

literal 0
HcmV?d00001

diff --git a/lib/app/constant.dart b/lib/app/constant.dart
index 056a5a5..c2e76dc 100644
--- a/lib/app/constant.dart
+++ b/lib/app/constant.dart
@@ -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);
-}
\ No newline at end of file
+}
diff --git a/lib/app/route.dart b/lib/app/route.dart
index 4d77671..6883603 100644
--- a/lib/app/route.dart
+++ b/lib/app/route.dart
@@ -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(
diff --git a/lib/main.dart b/lib/main.dart
index e8d7a6d..550ba1b 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -31,7 +31,8 @@ class MyApp extends StatelessWidget {
         },
       ),
       debugShowCheckedModeBanner: false,
-      initialRoute: splashRoute,
+      // initialRoute: splashRoute,
+      initialRoute: loginRoute,
       onGenerateRoute: AppRoute.generateRoute,
     );
   }
diff --git a/lib/screen/login_screen.dart b/lib/screen/login_screen.dart
new file mode 100644
index 0000000..1b5fa43
--- /dev/null
+++ b/lib/screen/login_screen.dart
@@ -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,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
index 740d51f..d2b9a89 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -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