diff --git a/flutter_app/assets/images/tuebingen_login_background.jpg b/flutter_app/assets/images/tuebingen_login_background.jpg new file mode 100644 index 0000000..4e5bdd6 Binary files /dev/null and b/flutter_app/assets/images/tuebingen_login_background.jpg differ diff --git a/flutter_app/lib/src/login_page.dart b/flutter_app/lib/src/login_page.dart index 7d47bb1..87ad3af 100644 --- a/flutter_app/lib/src/login_page.dart +++ b/flutter_app/lib/src/login_page.dart @@ -58,6 +58,8 @@ class _LoginPageState extends State { return OnboardingScaffold( title: 'StudyOS', subtitle: 'Connect your student workspace', + backgroundImageAsset: 'assets/images/tuebingen_login_background.jpg', + backgroundBlurSigma: 4, child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ diff --git a/flutter_app/lib/src/onboarding_scaffold.dart b/flutter_app/lib/src/onboarding_scaffold.dart index ea6270b..1a0f428 100644 --- a/flutter_app/lib/src/onboarding_scaffold.dart +++ b/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: [ - 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: [ + if (backgroundImageAsset != null) ...[ + 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: [ + 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, - ], + ), ), ), ), ), ), - ), + ], ), ); } diff --git a/flutter_app/pubspec.yaml b/flutter_app/pubspec.yaml index 1ced5c6..323478b 100644 --- a/flutter_app/pubspec.yaml +++ b/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