Added widgets

.fvmrc

@@ -1,5 +1,5 @@
 {
-  "flutter": "3.35.4",
+  "flutter": "3.38.3",
   "runPubGetOnSdkChanges": true,
   "updateVscodeSettings": true,
   "updateGitIgnore": true

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "dart.flutterSdkPath": ".fvm/versions/3.35.4"
+  "dart.flutterSdkPath": ".fvm/versions/3.38.3"
 }

lib/main.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:ocbo_esign_validator/pages/approval_page.dart';
 import 'package:ocbo_esign_validator/pages/index_page.dart';
+import 'package:ocbo_esign_validator/pages/validate_page.dart';
 
 void main() {
   runApp(const MyApp());
@@ -8,7 +10,11 @@ void main() {
 
 final _router = GoRouter(
   initialLocation: '/',
-  routes: [GoRoute(name: 'index', path: '/', builder: (context, state) => const IndexPage())],
+  routes: [
+    GoRoute(name: 'index', path: '/', builder: (context, state) => const IndexPage()),
+    GoRoute(name: 'approval', path: '/approval', builder: (context, state) => const ApprovalPage()),
+    GoRoute(name: 'validate', path: '/validate', builder: (context, state) => const ValidatePage()),
+  ],
 );
 
 class MyApp extends StatelessWidget {

lib/pages/approval_page.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class ApprovalPage extends StatelessWidget {
+  const ApprovalPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold();
+  }
+}

lib/pages/index_page.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ocbo_esign_validator/widgets/circle_widget.dart';
 import 'package:ocbo_esign_validator/widgets/image_widget.dart';
 import 'package:ocbo_esign_validator/widgets/text_widget.dart';
 
@@ -8,17 +10,52 @@ class IndexPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    void gotoApproval() {
+      context.push('/approval');
+    }
+
+    void gotoValidation() {
+      context.push('/validate');
+    }
+
     return Scaffold(
-      body: Center(
-        child: Column(
-          children: [
-            const Gap(88),
-            const ImageWidget(imagePath: 'assets/logo.png', size: 140, measureByHeight: true),
-            const Gap(20),
-            const TextWidget(text: "OCBO e-Sign", color: Colors.black, bold: true, size: 32),
-            const Gap(2),
-            const TextWidget(text: "Mobile", color: Colors.black, bold: true),
-          ],
+      resizeToAvoidBottomInset: false,
+      body: Container(
+        alignment: Alignment.center,
+        height: MediaQuery.of(context).size.height,
+        decoration: const BoxDecoration(color: Color.fromRGBO(21, 31, 42, 1)),
+        child: Center(
+          child: Column(
+            children: [
+              const Gap(88),
+              const ImageWidget(imagePath: 'assets/logo.png', size: 140, measureByHeight: true),
+              const Gap(20),
+              const TextWidget(text: "OCBO e-Sign", color: Color.fromARGB(255, 244, 243, 243), bold: true, size: 32),
+              const Gap(2),
+              const TextWidget(text: "Mobile", color: Color.fromARGB(255, 244, 243, 243), bold: true),
+              const Gap(200),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                spacing: 32,
+                children: <Widget>[
+                  CircleWidget(
+                    icon: Icons.thumb_up,
+                    text: 'Approval',
+                    onPressed: () {
+                      gotoApproval();
+                    },
+                  ),
+                  CircleWidget(
+                    icon: Icons.qr_code,
+                    text: 'Validate',
+                    onPressed: () {
+                      gotoValidation();
+                    },
+                  ),
+                ],
+              ),
+            ],
+          ),
         ),
       ),
     );

lib/pages/validate_page.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class ValidatePage extends StatelessWidget {
+  const ValidatePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold();
+  }
+}

lib/widgets/circle_widget.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:ocbo_esign_validator/widgets/text_widget.dart';
+
+class CircleWidget extends StatelessWidget {
+  final IconData? icon;
+  final String text;
+  final VoidCallback onPressed;
+
+  const CircleWidget({super.key, required this.icon, required this.text, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onPressed,
+      child: Container(
+        padding: EdgeInsets.all(16),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(16),
+          color: Colors.white10,
+          border: Border.all(color: const Color.fromARGB(77, 255, 255, 255)),
+        ),
+        width: 120,
+        height: 120,
+        child: Column(
+          children: [
+            const Gap(8),
+            Icon(icon, color: Colors.white, size: 32),
+            const Gap(8),
+            TextWidget(text: text, size: 16),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/image_widget.dart

@@ -5,20 +5,30 @@ class ImageWidget extends StatelessWidget {
   final double size;
   final bool measureByHeight;
   final bool? network;
-  const ImageWidget(
-      {super.key, required this.imagePath, required this.size, required this.measureByHeight, this.network});
+  const ImageWidget({
+    super.key,
+    required this.imagePath,
+    required this.size,
+    required this.measureByHeight,
+    this.network,
+  });
 
   @override
   Widget build(BuildContext context) {
     return (network == true)
         ? (measureByHeight)
-            ? Image.network(imagePath,
-                height: size, cacheHeight: (size * MediaQuery.of(context).devicePixelRatio).round())
-            : Image.network(imagePath,
-                width: size, cacheWidth: (size * MediaQuery.of(context).devicePixelRatio).round())
+              ? Image.network(
+                  imagePath,
+                  height: size,
+                  cacheHeight: (size * MediaQuery.of(context).devicePixelRatio).round(),
+                )
+              : Image.network(
+                  imagePath,
+                  width: size,
+                  cacheWidth: (size * MediaQuery.of(context).devicePixelRatio).round(),
+                )
         : (measureByHeight)
-            ? Image.asset(imagePath,
-                height: size, cacheHeight: (size * MediaQuery.of(context).devicePixelRatio).round())
-            : Image.asset(imagePath, width: size, cacheWidth: (size * MediaQuery.of(context).devicePixelRatio).round());
+        ? Image.asset(imagePath, height: size, cacheHeight: (size * MediaQuery.of(context).devicePixelRatio).round())
+        : Image.asset(imagePath, width: size, cacheWidth: (size * MediaQuery.of(context).devicePixelRatio).round());
   }
 }

lib/widgets/text_widget.dart

@@ -25,6 +25,6 @@ class TextWidget extends StatelessWidget {
 
     return title == true
         ? Text(text, style: GoogleFonts.outfit(textStyle: textStyle))
-        : Text(text, style: GoogleFonts.inter(textStyle: textStyle));
+        : Text(text, style: GoogleFonts.roboto(textStyle: textStyle));
   }
 }

pubspec.lock

@@ -236,10 +236,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
+      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
       url: "https://pub.dev"
     source: hosted
-    version: "1.16.0"
+    version: "1.17.0"
   nm:
     dependency: transitive
     description:
@@ -377,10 +377,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.6"
+    version: "0.7.7"
   typed_data:
     dependency: transitive
     description: