step 4 : slicing login screen

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: 16),
-      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),
       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),
+      fontSize: Constant.getActualYPhone(context: context, y: 15),
-      fontWeight: FontWeight.w600,
+      fontWeight: FontWeight.w500,
-      fontFamily: 'Quicksand',
     );
   }
 
-  static TextStyle title_screen({required BuildContext context}) {
+  static Color inputanGrey = const Color(0xff637381);
-    return TextStyle(
+  static Color bgButton = const Color(0xFF0098DA);
-      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 bgRed = const Color(0xffFF4842).withOpacity(0.08);
 }

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) {
@@ -17,6 +19,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(
         data: MediaQuery.of(context)

lib/main.dart

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

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

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