feat: add login background image

flutter_app/lib/src/login_page.dart

@@ -58,6 +58,8 @@ class _LoginPageState extends State<LoginPage> {
     return OnboardingScaffold(
       title: 'StudyOS',
       subtitle: 'Connect your student workspace',
+      backgroundImageAsset: 'assets/images/tuebingen_login_background.jpg',
+      backgroundBlurSigma: 4,
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[

flutter_app/lib/src/onboarding_scaffold.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 import 'studyos_theme.dart';
@@ -7,52 +9,76 @@ class OnboardingScaffold extends StatelessWidget {
     required this.title,
     required this.subtitle,
     required this.child,
+    this.backgroundImageAsset,
+    this.backgroundBlurSigma = 0,
     super.key,
   });
 
   final String title;
   final String subtitle;
   final Widget child;
+  final String? backgroundImageAsset;
+  final double backgroundBlurSigma;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: SafeArea(
-        child: Center(
-          child: SingleChildScrollView(
-            padding: const EdgeInsets.all(StudyOsSpacing.xl),
-            child: ConstrainedBox(
-              constraints: const BoxConstraints(maxWidth: 460),
-              child: Material(
-                color: StudyOsColors.surface,
-                shape: RoundedRectangleBorder(
-                  side: const BorderSide(color: StudyOsColors.border),
-                  borderRadius: BorderRadius.circular(StudyOsRadii.lg),
-                ),
-                child: Padding(
-                  padding: const EdgeInsets.all(StudyOsSpacing.xl),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
-                    children: <Widget>[
-                      Text(
-                        title,
-                        style: Theme.of(context).textTheme.headlineSmall,
-                      ),
-                      const SizedBox(height: StudyOsSpacing.xs),
-                      Text(
-                        subtitle,
-                        style: Theme.of(context).textTheme.bodyMedium,
+      body: Stack(
+        fit: StackFit.expand,
+        children: <Widget>[
+          if (backgroundImageAsset != null) ...<Widget>[
+            ImageFiltered(
+              imageFilter: ImageFilter.blur(
+                sigmaX: backgroundBlurSigma,
+                sigmaY: backgroundBlurSigma,
+              ),
+              child: Transform.scale(
+                scale: 1.03,
+                child: Image.asset(backgroundImageAsset!, fit: BoxFit.cover),
+              ),
+            ),
+            const DecoratedBox(
+              decoration: BoxDecoration(color: Color(0x99070A0F)),
+            ),
+          ],
+          SafeArea(
+            child: Center(
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.all(StudyOsSpacing.xl),
+                child: ConstrainedBox(
+                  constraints: const BoxConstraints(maxWidth: 460),
+                  child: Material(
+                    color: StudyOsColors.surface.withAlpha(240),
+                    shape: RoundedRectangleBorder(
+                      side: const BorderSide(color: StudyOsColors.border),
+                      borderRadius: BorderRadius.circular(StudyOsRadii.lg),
+                    ),
+                    child: Padding(
+                      padding: const EdgeInsets.all(StudyOsSpacing.xl),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisSize: MainAxisSize.min,
+                        children: <Widget>[
+                          Text(
+                            title,
+                            style: Theme.of(context).textTheme.headlineSmall,
+                          ),
+                          const SizedBox(height: StudyOsSpacing.xs),
+                          Text(
+                            subtitle,
+                            style: Theme.of(context).textTheme.bodyMedium,
+                          ),
+                          const SizedBox(height: StudyOsSpacing.xl),
+                          child,
+                        ],
                       ),
-                      const SizedBox(height: StudyOsSpacing.xl),
-                      child,
-                    ],
+                    ),
                   ),
                 ),
               ),
             ),
           ),
-        ),
+        ],
       ),
     );
   }

flutter_app/pubspec.yaml

@@ -67,7 +67,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
+  assets:
+    - assets/images/tuebingen_login_background.jpg
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg