Feat: add style and font

build/app/intermediates/incremental/packageDebug/tmp/debug/dex-renamer-state.txt

@@ -1,4 +1,4 @@
-#Mon Feb 10 15:23:37 WIB 2025
+#Mon Feb 10 16:38:11 WIB 2025
 base.0=D\:\\Flutter\\Flutter Project\\e_porter\\build\\app\\intermediates\\dex\\debug\\mergeExtDexDebug\\classes.dex
 base.1=D\:\\Flutter\\Flutter Project\\e_porter\\build\\app\\intermediates\\dex\\debug\\mergeLibDexDebug\\0\\classes.dex
 base.2=D\:\\Flutter\\Flutter Project\\e_porter\\build\\app\\intermediates\\dex\\debug\\mergeProjectDexDebug\\0\\classes.dex

build/app/outputs/flutter-apk/app-debug.apk.sha1

@@ -1 +1 @@
-f1ecc583ae2f5bd4049d023ff0c6c8d5b60705e5
+9f4a1c54eb2544888931426d785c0f33f0e35bf1

lib/_core/constants/colors.dart

@@ -0,0 +1,27 @@
+import 'dart:ui';
+
+class PrimaryColors {
+  static const primary50 = Color(0xFFEFF7FF);
+  static const primary100 = Color(0xFFDEEFFF);
+  static const primary200 = Color(0xFFB6E0FF);
+  static const primary300 = Color(0xFF76C8FF);
+  static const primary400 = Color(0xFF2DADFF);
+  static const primary500 = Color(0xFF0293F5);
+  static const primary600 = Color(0xFF0073D2);
+  static const primary700 = Color(0xFF005CAA);
+  static const primary800 = Color(0xFF004B87);
+  static const primary900 = Color(0xFF074173);
+}
+
+class GrayColors {
+  static const gray50 = Color(0xFFF9FAFB);
+  static const gray100 = Color(0xFFF3F4F6);
+  static const gray200 = Color(0xFFE5E7EB);
+  static const gray300 = Color(0xFFD1D5DB);
+  static const gray400 = Color(0xFF9CA3AF);
+  static const gray500 = Color(0xFF6B7280);
+  static const gray600 = Color(0xFF4B5563);
+  static const gray700 = Color(0xFF374151);
+  static const gray800 = Color(0xFF1F2A37);
+  static const gray900 = Color(0xFF111928);
+}

lib/_core/constants/typography.dart

@@ -0,0 +1,216 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class TypographyStyles extends StatelessWidget {
+  static const String fontFamily = 'DMSans';
+
+  final String text;
+  final TextStyle style;
+  final TextAlign textAlign;
+  final TextOverflow overflow;
+  final int? maxlines;
+  final Color? color;
+  final double? height;
+  final double? fontSize;
+  final FontWeight? fontWeight;
+
+  // final TextDirection? textDirection;
+  // final Locale? locale;
+  // final bool? softWrap;
+  // final TextScaler? textScaler;
+  // final String? semanticsLabel;
+  // final TextWidthBasis? textWidthBasis;
+  // final TextHeightBehavior? textHeightBehavior;
+  // final Color? selectionColor;
+
+  TypographyStyles.h1(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 80.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.h2(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 60.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.h3(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 40.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.h4(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 30.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.h5(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 24.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.h6(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 20.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.body(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 16.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.caption(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 14.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.small(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 12.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  TypographyStyles.tiny(
+    this.text, {
+    super.key,
+    this.textAlign = TextAlign.start,
+    this.overflow = TextOverflow.ellipsis,
+    this.maxlines,
+    this.color,
+    this.fontSize,
+    this.fontWeight,
+    this.height,
+  }) : style = TextStyle(
+          fontFamily: fontFamily,
+          fontSize: fontSize ?? 10.sp,
+          fontWeight: fontWeight ?? FontWeight.w900,
+          color: color,
+          height: height,
+        );
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      style: style,
+      textAlign: textAlign,
+      overflow: overflow,
+      maxLines: maxlines,
+    );
+  }
+}

lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:e_porter/routes/app_rountes.dart';
 import 'package:firebase_core/firebase_core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
@@ -8,11 +9,13 @@ void main() async {
   await Firebase.initializeApp();
 
   print("Firebase Initialized Successfully!");
-  runApp(MyApp());
+  runApp(MyApp(initialRoute: Routes.SPLASH));
 }
 
 class MyApp extends StatelessWidget {
-  const MyApp({super.key});
+  final String initialRoute;
+
+  const MyApp({super.key, required this.initialRoute});
 
   @override
   Widget build(BuildContext context) {
@@ -21,10 +24,8 @@ class MyApp extends StatelessWidget {
       builder: (context, child) {
         return GetMaterialApp(
           debugShowCheckedModeBanner: true,
-          home: Scaffold(
-            appBar: AppBar(title: Text('Firebase Setup Done!')),
-            body: Center(child: Text('Firebase Initialized')),
-          ),
+          initialRoute: initialRoute,
+          getPages: AppRoutes.routes,
         );
       },
     );

lib/presentation/screens/onboarding/onboarding_screen.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class OnboardingScreen extends StatelessWidget {
+  const OnboardingScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Text(
+          'Onboarding',
+          style: TextStyle(
+            fontSize: 32.sp,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/screens/splash/splash_screen.dart

@@ -0,0 +1,35 @@
+import 'package:e_porter/routes/app_rountes.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:get/get.dart';
+
+class SplashScreen extends StatefulWidget {
+  const SplashScreen({super.key});
+
+  @override
+  State<SplashScreen> createState() => _SplashScreenState();
+}
+
+class _SplashScreenState extends State<SplashScreen> {
+  @override
+  void initState() {
+    super.initState();
+    Future.delayed(Duration(seconds: 3), () {
+      Get.offAllNamed(Routes.ONBOARDING);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Text(
+          'Splash Screen',
+          style: TextStyle(
+            fontSize: 32.sp,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/routes/app_rountes.dart

@@ -0,0 +1,23 @@
+import 'package:e_porter/presentation/screens/onboarding/onboarding_screen.dart';
+import 'package:e_porter/presentation/screens/splash/splash_screen.dart';
+import 'package:get/get.dart';
+
+class AppRoutes {
+  static const INITIAL = Routes.SPLASH;
+
+  static final routes = [
+    GetPage(
+      name: Routes.SPLASH,
+      page: () => SplashScreen(),
+    ),
+    GetPage(
+      name: Routes.ONBOARDING,
+      page: () => OnboardingScreen(),
+    ),
+  ];
+}
+
+class Routes {
+  static const SPLASH = '/splash';
+  static const ONBOARDING = '/onboarding';
+}