Skip to content

Commit

Permalink
Merge pull request #344 from verdigado/209-intro-screen
Browse files Browse the repository at this point in the history
201: Implement login screen
  • Loading branch information
steffenkleinle authored Nov 14, 2024
2 parents dce95d1 + 93990cb commit 2de110b
Show file tree
Hide file tree
Showing 20 changed files with 360 additions and 65 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,8 @@ fabric.properties

# End of https://www.toptal.com/developers/gitignore/api/flutter,intellij,visualstudiocode

# Custom
.DS_Store
devtools_options.yaml

.env
31 changes: 31 additions & 0 deletions assets/graphics/login.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/icons/heart.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'package:flutter_bloc/flutter_bloc.dart';

import 'package:gruene_app/features/auth/repository/auth_repository.dart';
import 'package:gruene_app/app/auth/repository/auth_repository.dart';

class AuthEvent {}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:gruene_app/features/auth/bloc/auth_bloc.dart';
import 'package:gruene_app/app/auth/bloc/auth_bloc.dart';

class AuthStream extends ChangeNotifier {
final AuthBloc authBloc;
Expand Down
4 changes: 2 additions & 2 deletions lib/app/router.dart
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:gruene_app/app/auth/bloc/auth_bloc.dart';
import 'package:gruene_app/app/constants/config.dart';
import 'package:gruene_app/app/constants/routes.dart';
import 'package:gruene_app/app/utils/build_page_without_animation.dart';
import 'package:gruene_app/app/widgets/main_layout.dart';
import 'package:gruene_app/features/auth/bloc/auth_bloc.dart';
import 'package:gruene_app/features/auth/screens/login_screen.dart';
import 'package:gruene_app/features/campaigns/screens/campaigns_screen.dart';
import 'package:gruene_app/features/login/screens/login_screen.dart';
import 'package:gruene_app/features/mfa/screens/mfa_screen.dart';
import 'package:gruene_app/features/news/screens/news_screen.dart';
import 'package:gruene_app/features/profiles/screens/profiles_screen.dart';
Expand Down
72 changes: 39 additions & 33 deletions lib/app/theme/theme.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';

class ThemeColors {
Expand All @@ -10,6 +8,9 @@ class ThemeColors {
// Secondary Light Green (#008939)
static const Color secondary = Color(0xFF008939);

// Secondary Light Green (#008939)
static const Color tertiary = Color(0xFF46962B);

// White (#FFFFFF)
static const Color background = Color(0xFFFFFFFF);

Expand All @@ -19,13 +20,19 @@ class ThemeColors {
// Black (#000000)
static const Color text = Color(0xFF000000);

// Dark Grey (#343433)
static const Color textAccent = Color(0xFF343433);

// Middle Grey (#9CABAF)
static const Color textDisabled = Color(0xFF9CABAF);

// Light Grey (#CCE7D7)
static const Color textLight = Color(0xFFCCE7D7);
}

class ThemeTextStyles {
class _ThemeTextStyles {
// TOOD use GrueneType font
static TextStyle appBarText = GoogleFonts.ptSans(
static TextStyle displayMedium = GoogleFonts.ptSans(
textStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w900,
Expand All @@ -34,65 +41,64 @@ class ThemeTextStyles {
letterSpacing: 0.02,
),
);
static TextStyle body = GoogleFonts.ptSans(
static TextStyle displayLarge = displayMedium.copyWith(fontSize: 34, letterSpacing: 0.03);

static TextStyle titleMedium = GoogleFonts.ptSans(
textStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
height: 1.3,
letterSpacing: 0.02,
),
);
static TextStyle titleLarge = titleMedium.copyWith(fontSize: 21, letterSpacing: 0.02);

static TextStyle bodyMedium = GoogleFonts.ptSans(
textStyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
height: 1.6,
letterSpacing: 0.02,
),
);
static TextStyle smallText = GoogleFonts.ptSans(

static TextStyle bodyLarge = bodyMedium.copyWith(fontSize: 18, height: 1);

static TextStyle labelSmall = GoogleFonts.ptSans(
textStyle: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
height: 1.3,
letterSpacing: 0.01,
),
);
static TextStyle h4 = GoogleFonts.ptSans(
textStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
height: 1,
letterSpacing: 0.02,
),
);
static TextStyle h4Title = GoogleFonts.ptSans(
textStyle: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
height: 1.3,
letterSpacing: 0.02,
),
);
}

final ThemeData appTheme = ThemeData(
final ThemeData appTheme = ThemeData.light().copyWith(
primaryColor: ThemeColors.primary,
disabledColor: ThemeColors.textDisabled,
colorScheme: ThemeData.light().colorScheme.copyWith(
primary: ThemeColors.primary,
secondary: ThemeColors.secondary,
tertiary: ThemeColors.tertiary,
surface: ThemeColors.background,
surfaceDim: ThemeColors.backgroundSecondary,
),
textTheme: TextTheme(
displayMedium: ThemeTextStyles.appBarText,
bodyLarge: ThemeTextStyles.h4,
bodyMedium: ThemeTextStyles.body,
titleMedium: ThemeTextStyles.h4Title,
labelSmall: ThemeTextStyles.smallText,
displayLarge: _ThemeTextStyles.displayLarge,
displayMedium: _ThemeTextStyles.displayMedium,
titleLarge: _ThemeTextStyles.titleLarge,
titleMedium: _ThemeTextStyles.titleMedium,
bodyLarge: _ThemeTextStyles.bodyLarge,
bodyMedium: _ThemeTextStyles.bodyMedium,
labelSmall: _ThemeTextStyles.labelSmall,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: ThemeColors.background,
selectedItemColor: ThemeColors.primary,
unselectedItemColor: ThemeColors.textDisabled,
selectedLabelStyle: ThemeTextStyles.smallText,
unselectedLabelStyle: ThemeTextStyles.smallText,
selectedLabelStyle: _ThemeTextStyles.labelSmall,
unselectedLabelStyle: _ThemeTextStyles.labelSmall,
),
scaffoldBackgroundColor: ThemeColors.backgroundSecondary,
actionIconTheme: ActionIconThemeData(
backButtonIconBuilder: (BuildContext context) => SvgPicture.asset('assets/icons/back.svg'),
),
);
4 changes: 2 additions & 2 deletions lib/app/widgets/app_bar.dart
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
final currentRoute = GoRouterState.of(context);
final theme = Theme.of(context);
return AppBar(
title: Text(currentRoute.name ?? '', style: theme.textTheme.displayMedium?.apply(color: ThemeColors.background)),
foregroundColor: ThemeColors.background,
title: Text(currentRoute.name ?? '', style: theme.textTheme.displayMedium?.apply(color: theme.colorScheme.surface)),
foregroundColor: theme.colorScheme.surface,
backgroundColor: theme.primaryColor,
centerTitle: true,
actions: [
Expand Down
20 changes: 20 additions & 0 deletions lib/app/widgets/bottom_sheet_handle.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import 'package:flutter/material.dart';
import 'package:gruene_app/app/theme/theme.dart';

class BottomSheetHandle extends StatelessWidget {
const BottomSheetHandle({super.key});

@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 48,
height: 6,
decoration: BoxDecoration(
color: ThemeColors.textLight,
borderRadius: BorderRadius.all(Radius.circular(18)),
),
),
);
}
}
83 changes: 83 additions & 0 deletions lib/app/widgets/persistent_bottom_sheet.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import 'package:flutter/material.dart';
import 'package:gruene_app/app/widgets/bottom_sheet_handle.dart';

const double defaultBottomSheetSize = 0.2;

class PersistentBottomSheet extends StatefulWidget {
final Widget child;
final double initialChildSize;
final double minChildSize;
final double maxChildSize;
final List<double> snapSizes;

const PersistentBottomSheet({
super.key,
required this.child,
this.initialChildSize = defaultBottomSheetSize,
this.minChildSize = defaultBottomSheetSize,
this.maxChildSize = 1,
this.snapSizes = const [],
});

@override
State<PersistentBottomSheet> createState() => _PersistentBottomSheetState();
}

class _PersistentBottomSheetState extends State<PersistentBottomSheet> {
final _controller = DraggableScrollableController();
final _sheet = GlobalKey();

@override
void dispose() {
super.dispose();
_controller.dispose();
}

DraggableScrollableSheet get sheet => (_sheet.currentWidget as DraggableScrollableSheet);

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Positioned(
left: 0,
right: 0,
bottom: 0,
top: 0,
child: DraggableScrollableSheet(
key: _sheet,
initialChildSize: widget.initialChildSize,
minChildSize: widget.minChildSize,
maxChildSize: widget.maxChildSize,
snapSizes: widget.snapSizes,
controller: _controller,
snap: true,
expand: true,
builder: (BuildContext context, ScrollController scrollController) {
return Container(
padding: EdgeInsets.symmetric(vertical: 24, horizontal: 16),
decoration: BoxDecoration(
color: theme.colorScheme.secondary,
borderRadius: BorderRadius.vertical(top: Radius.circular(18)),
),
child: ListView(
controller: scrollController,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
BottomSheetHandle(),
Container(
padding: EdgeInsets.symmetric(vertical: 24, horizontal: 16),
child: widget.child,
),
],
),
],
),
);
},
),
);
}
}
22 changes: 0 additions & 22 deletions lib/features/auth/screens/login_screen.dart

This file was deleted.

36 changes: 36 additions & 0 deletions lib/features/login/screens/login_screen.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import 'package:flutter/material.dart';
import 'package:gruene_app/app/widgets/persistent_bottom_sheet.dart';
import 'package:gruene_app/features/login/widgets/intro_slides.dart';
import 'package:gruene_app/features/login/widgets/support_button.dart';
import 'package:gruene_app/features/login/widgets/welcome_view.dart';

class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(backgroundColor: theme.colorScheme.surface, toolbarHeight: 0),
body: Container(
color: theme.colorScheme.surface,
child: Stack(
children: [
LayoutBuilder(
builder: (context, constraints) {
return Container(
padding: EdgeInsets.only(bottom: defaultBottomSheetSize * constraints.maxHeight),
child: WelcomeView(),
);
},
),
SupportButton(),
PersistentBottomSheet(
child: IntroSlides(),
),
],
),
),
);
}
}
Loading

0 comments on commit 2de110b

Please sign in to comment.