Onboarding - first part

android/build.gradle

@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }

lib/constants/style.dart

@@ -21,7 +21,7 @@ BoxShadow defaultShadow = BoxShadow(
 const green = Color(0xFF248731);
 const red = Color(0xFFC52626);
 const white = Color(0xFFFFFFFF);
-const black = Color(0x00000000);
+const black = Color(0xFF000000);
 
 const blue1 = Color(0xFF00152D);
 const blue2 = Color(0xFF002855);

lib/main.dart

@@ -24,7 +24,7 @@ class Launcher extends ConsumerWidget {
       themeMode:
           appThemeState.isDarkModeEnabled ? ThemeMode.dark : ThemeMode.light,
       onGenerateRoute: makeRoute,
-      initialRoute: '/',
+      initialRoute: '/onboarding',
     );
   }
 }

lib/pages/onboarding_page/onboarding_page.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import '/pages/onboarding_page/widgets/budget_setup.dart';
+import '/constants/style.dart';
+
+class Onboarding extends StatefulWidget {
+  const Onboarding({Key? key}) : super(key: key);
+
+  @override
+  State<Onboarding> createState() => _OnboardingState();
+}
+
+//TODO: make visible only at the first access in the app
+
+class _OnboardingState extends State<Onboarding> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: blue7,
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const SizedBox(
+              height: 80,
+            ),
+            Text(
+              'Set up the app',
+              style: Theme.of(context)
+                  .textTheme
+                  .headlineLarge
+                  ?.copyWith(color: blue1),
+            ),
+            const SizedBox(
+              height: 80,
+            ),
+            Image.asset(
+              'assets/openVault.png',
+              height: 214,
+            ),
+            const SizedBox(
+              height: 74,
+            ),
+            Text(
+              'In a few steps you\'ll be ready to start keeping\ntrack of your personal finances (almost) like\nMr. Rip',
+              textAlign: TextAlign.center,
+              style:
+                  Theme.of(context).textTheme.bodySmall?.copyWith(color: blue1),
+            ),
+            const Spacer(),
+            SizedBox(
+              width: 342,
+              height: 48,
+              child: ElevatedButton(
+                onPressed: () {
+                  Navigator.push(
+                    context,
+                    MaterialPageRoute(
+                      builder: (context) => const BudgetSetup(),
+                    ),
+                  );
+                },
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: blue5,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                ),
+                child: Text(
+                  'START THE SET UP',
+                  style: Theme.of(context)
+                      .textTheme
+                      .bodyMedium
+                      ?.copyWith(color: white),
+                ),
+              ),
+            ),
+            const SizedBox(height: 20),
+          ],
+        ),
+      ),
+    );
+  }
+}