created onboarding structure

TODO: create gifs or animations to fill the white space + give short descritions on the topic

trackeroo/lib/frontend/utils/onboarding/ob_categories.dart

+import 'package:flutter/material.dart';
+
+class OnboardingCategories extends StatelessWidget {
+  const OnboardingCategories({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SafeArea(
+      child: Padding(
+        padding: EdgeInsets.all(20.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Categories',
+              style: TextStyle(
+                fontSize: 40.0,
+                fontWeight: FontWeight.w300
+              ),
+            ),
+            Text(
+              'shows budget and lets you create and manage categories',
+              style: TextStyle(
+                fontSize: 16.0
+              ),
+            ),
+          ]
+        ),
+      ),
+    );
+  }
+}

trackeroo/lib/frontend/utils/onboarding/ob_details.dart

+import 'package:flutter/material.dart';
+
+class OnboardingDetails extends StatelessWidget {
+  const OnboardingDetails({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SafeArea(
+      child: Padding(
+        padding: EdgeInsets.all(20.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Details',
+              style: TextStyle(
+                fontSize: 40.0,
+                fontWeight: FontWeight.w300
+              ),
+            ),
+            Text(
+              'gives in depth information',
+              style: TextStyle(
+                fontSize: 16.0
+              ),
+            ),
+          ]
+        ),
+      ),
+    );
+  }
+}

trackeroo/lib/frontend/utils/onboarding/ob_home.dart

+import 'package:flutter/material.dart';
+
+class OnboardingHome extends StatelessWidget {
+  const OnboardingHome({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SafeArea(
+      child: Padding(
+        padding: EdgeInsets.all(20.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Home',
+              style: TextStyle(
+                fontSize: 40.0,
+                fontWeight: FontWeight.w300
+              ),
+            ),
+            Text(
+              'gives an overview',
+              style: TextStyle(
+                fontSize: 16.0
+              ),
+            ),
+          ]
+        ),
+      ),
+    );
+  }
+}

trackeroo/lib/frontend/utils/onboarding/ob_trackeroo.dart

+import 'package:flutter/material.dart';
+
+class OnboardingTrackeroo extends StatelessWidget {
+  const OnboardingTrackeroo({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SafeArea(
+      child: Padding(
+        padding: EdgeInsets.all(20.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Trackeroo',
+              style: TextStyle(
+                fontSize: 40.0,
+                fontWeight: FontWeight.w300
+              ),
+            ),
+            Text(
+              'enables you to tackle your finances and keep an eye on your spending.',
+              style: TextStyle(
+                fontSize: 16.0
+              ),
+            ),
+          ]
+        ),
+      ),
+    );
+  }
+}

trackeroo/lib/frontend/utils/onboarding/ob_welcome.dart

+import 'package:flutter/material.dart';
+
+class OnboardingWelcome extends StatelessWidget {
+  const OnboardingWelcome({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SafeArea(
+      child: Padding(
+        padding: EdgeInsets.all(20.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Welcome',
+              style: TextStyle(
+                fontSize: 40.0,
+                fontWeight: FontWeight.w300
+              ),
+            ),
+            Text(
+              'to Trackeroo',
+              style: TextStyle(
+                fontSize: 16.0
+              ),
+            ),
+            SizedBox(height: 30.0),
+            Text('This is a University Project.'),
+            SizedBox(height: 5.0),
+            Text('It collects no data and does not require Internet connection.'),
+            Expanded(
+              child: Center(
+                child: Text('App Icon\nPlaceholder', textAlign: TextAlign.center)
+              )
+            ),
+            Text('Created by Florian Schindler, Hannes Raschke, Michelle Kehl und Celine Schmitt'),
+            SizedBox(height: 90.0)
+          ]
+        ),
+      ),
+    );
+  }
+}

trackeroo/lib/frontend/views/onboarding_view.dart

+import 'package:flutter/material.dart';
+import 'package:trackeroo/app_scaffold.dart';
+import 'package:trackeroo/frontend/utils/onboarding/ob_categories.dart';
+import 'package:trackeroo/frontend/utils/onboarding/ob_details.dart';
+import 'package:trackeroo/frontend/utils/onboarding/ob_home.dart';
+import 'package:trackeroo/frontend/utils/onboarding/ob_welcome.dart';
+import 'package:trackeroo/frontend/utils/onboarding/ob_trackeroo.dart';
+
+class OnboardingView extends StatefulWidget {
+  const OnboardingView({super.key});
+
+  @override
+  State<OnboardingView> createState() => _OnboardingViewState();
+}
+
+class _OnboardingViewState extends State<OnboardingView> {
+  final controller = PageController();
+
+  int pageIndex = 0;
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: PageView(
+        onPageChanged: (value) => setState(() {
+          pageIndex = value;
+        }),
+        controller: controller,
+        children: const [
+          OnboardingWelcome(),
+          OnboardingTrackeroo(),
+          OnboardingHome(),
+          OnboardingDetails(),
+          OnboardingCategories()
+        ],
+      ),
+      bottomSheet: Container(
+        height: 120.0,
+        padding: const EdgeInsets.fromLTRB(25.0, 0.0, 25.0, 20.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            IconButton(
+              onPressed: () {
+                Navigator.of(context).popUntil((route) => route.isFirst);
+                Navigator.pushReplacement(
+                  context,
+                  MaterialPageRoute(builder: (context) => const AppScaffold())
+                );
+              },
+              padding: const EdgeInsets.symmetric(horizontal: 15.0),
+              icon: const Row(
+                children: [
+                  Icon(Icons.close_rounded),
+                  SizedBox(width: 10.0),
+                  Text(
+                    'skip',
+                    style: TextStyle(
+                      fontSize: 16.0
+                    ),
+                  ),
+                ],
+              )
+            ),
+            Row(
+              children: [
+                buildPageIndicator(0),
+                buildPageIndicator(1),
+                buildPageIndicator(2),
+                buildPageIndicator(3),
+                buildPageIndicator(4)
+              ],
+            ),
+            IconButton(
+              onPressed: () {
+                controller.nextPage(duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
+              },
+              padding: const EdgeInsets.symmetric(horizontal: 15.0),
+              icon: Row(
+                children: [
+                  Text(
+                    pageIndex != 4 ? 'next' : 'done',
+                    style: const TextStyle(
+                      fontSize: 16.0
+                    ),
+                  ),
+                  const SizedBox(width: 10.0),
+                  Icon(pageIndex != 4 ? Icons.arrow_forward_rounded : Icons.done_rounded),
+                ],
+              )
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget buildPageIndicator(int index) => GestureDetector(
+    onTap: () => controller.jumpToPage(index),
+    child: Container(
+      height: 10.0,
+      width: 10.0,
+      margin: const EdgeInsets.all(4.0),
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: pageIndex == index ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.primaryContainer
+      ),
+    ),
+  );
+}