diff --git a/images/vektoratas.png b/images/vektoratas.png new file mode 100644 index 0000000..f426035 Binary files /dev/null and b/images/vektoratas.png differ 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 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