Skip to content

Commit

Permalink
Login, Register, Notification page visual and functional changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jumpiniasty
jumpiniasty committed May 5, 2023
1 parent 8e8b417 commit e9ec59b
Show file tree
Hide file tree
Showing 13 changed files with 354 additions and 186 deletions.
5 changes: 5 additions & 0 deletions .github/workflows/dart.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ jobs:
# 12
- name: Upgrade Flutter
run: flutter upgrade

# 13
- name: Create .ENV file
run: touch .env

# 14
- name: Get dependencies
run: flutter pub get

Expand Down
9 changes: 9 additions & 0 deletions analysis_options.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@ linter:
# producing the lint.
rules:
- prefer_final_in_for_each
- avoid_empty_else
- no_leading_underscores_for_local_identifiers
- annotate_overrides
- avoid_returning_null
- use_late_for_private_fields_and_variables
- avoid_print
- comment_references
- avoid_return_types_on_setters
- avoid_web_libraries_in_flutter

# Additional information about this file can be found at
# https://dart.dev/guides/language/analysis-options
81 changes: 63 additions & 18 deletions lib/routes/login_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,29 @@ class LoginPage extends StatefulWidget {
class _LoginPageState extends State<LoginPage> {
AuthController authCtrl = AuthController();
var passwordResetEmailCtrl = TextEditingController();
late bool rememberPassword;

late int? selectedFieldIndex;

@override
void initState() {
super.initState();
rememberPassword = false;
selectedFieldIndex = null;
}

@override
void dispose() {
super.dispose();
authCtrl.emailCtrl.dispose();
authCtrl.passwordCtrl.dispose();
passwordResetEmailCtrl.dispose();
}

bool get _userCanLogin {
return !(authCtrl.emailCtrl.text == "" || authCtrl.passwordCtrl.text == "");
}

@override
Widget build(BuildContext context) {
final transl = LocaleSupport.appTranslates(context);
Expand Down Expand Up @@ -62,6 +76,7 @@ class _LoginPageState extends State<LoginPage> {
icon: Icons.email_outlined,
placeholder: transl.emailField,
ctrl: authCtrl.emailCtrl,
keyboardType: TextInputType.emailAddress,
),
_editField(
1,
Expand All @@ -74,23 +89,52 @@ class _LoginPageState extends State<LoginPage> {
const SizedBox(height: 10),
GestureDetector(
onTap: () {
//TODO remember user's password
setState(() => rememberPassword = !rememberPassword);
},
child: Row(
children: [
GestureDetector(
onTap: () {},
child: Container(
height: 20,
width: 20,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 1.5,
color: Theming.whiteTone.withOpacity(0.2),
Stack(
children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 1.5,
color: Theming.whiteTone.withOpacity(0.2),
),
),
),
),
Positioned.fill(
child: Center(
child: AnimatedContainer(
height: rememberPassword ? 20 : 0,
width: rememberPassword ? 20 : 0,
duration: const Duration(milliseconds: 200),
curve: Curves.bounceInOut,
decoration: const BoxDecoration(
color: Theming.primaryColor,
shape: BoxShape.circle,
),
),
),
),
Positioned.fill(
child: Center(
child: AnimatedOpacity(
duration: const Duration(milliseconds: 150),
opacity: rememberPassword ? 1 : 0,
curve: Curves.bounceInOut,
child: const Icon(
Icons.check_rounded,
color: Theming.whiteTone,
size: 14,
),
),
),
),
],
),
const SizedBox(width: 5),
Text(
Expand All @@ -106,8 +150,7 @@ class _LoginPageState extends State<LoginPage> {
Center(
child: GestureDetector(
onTap: () {
if (authCtrl.emailCtrl.text != "" ||
authCtrl.passwordCtrl.text != "") {
if (_userCanLogin) {
authCtrl.loginUser();
}
},
Expand All @@ -120,10 +163,9 @@ class _LoginPageState extends State<LoginPage> {
vertical: 15,
),
decoration: BoxDecoration(
color: authCtrl.emailCtrl.text == "" ||
authCtrl.passwordCtrl.text == ""
? Theming.whiteTone.withOpacity(0.7)
: Theming.primaryColor,
color: _userCanLogin
? Theming.primaryColor
: Theming.whiteTone.withOpacity(0.7),
borderRadius: BorderRadius.circular(10),
),
child: Text(
Expand Down Expand Up @@ -179,6 +221,7 @@ class _LoginPageState extends State<LoginPage> {
required String placeholder,
required TextEditingController ctrl,
bool isPassword = false,
TextInputType? keyboardType,
}) {
const double radius = 10;
const double iconSize = 24;
Expand All @@ -193,6 +236,7 @@ class _LoginPageState extends State<LoginPage> {
height: 60,
width: double.infinity,
margin: const EdgeInsets.only(top: 10),
padding: const EdgeInsets.only(right: 10),
alignment: Alignment.center,
duration: const Duration(milliseconds: 500),
curve: Curves.linearToEaseOut,
Expand All @@ -211,6 +255,7 @@ class _LoginPageState extends State<LoginPage> {
setState(() => selectedFieldIndex = index);
},
obscureText: isPassword,
keyboardType: keyboardType,
style: TextStyle(
color: Theming.whiteTone, letterSpacing: isPassword ? 6 : 0),
cursorColor: Theming.primaryColor,
Expand Down
155 changes: 103 additions & 52 deletions lib/routes/notifications_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';

import '../utils/theming.dart';

import '../widgets/custom_floating_button.dart';
import '../widgets/glass_morphism.dart';
import '/utils/locale_support.dart';
import '../widgets/dialogs/notification_sheet.dart';

late AppLocalizations transl;

Expand All @@ -15,70 +16,105 @@ class NotificationsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
transl = LocaleSupport.appTranslates(context);

return Scaffold(
backgroundColor: Theming.bgColor,
appBar: AppBar(
backgroundColor: Theming.bgColor,
centerTitle: true,
leading: Padding(
padding: const EdgeInsets.only(left: 20),
child: IconButton(
onPressed: () => context.pop(),
icon: const Icon(
Icons.arrow_back_ios_rounded,
color: Theming.whiteTone,
floatingActionButton: Padding(
padding: const EdgeInsets.only(right: 14, bottom: 15),
child: GestureDetector(
onTap: () {
//TODO mark notifications as read
},
child: GlassMorphism(
blur: 10,
opacity: 0.1,
color: Colors.white,
borderRadius: BorderRadius.circular(100),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.linearToEaseOut,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
),
padding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
child: Text(
transl.markAsRead,
style: const TextStyle(
color: Theming.primaryColor,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
),
),
title: Text(
transl.notificationsNotifications,
style: const TextStyle(
color: Theming.whiteTone,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),

// Notification list
body: Stack(
children: [
SingleChildScrollView(
child: Column(
children: [
for (int i = 0; i < 12; i++) _notificationItem(context),
const SizedBox(
height: 150,
),
],
),
),
CustomFloatingButton(
backgroundColor: Theming.primaryColor,
onTap: () {},
child: Text(
transl.markAsRead,
body: CustomScrollView(
slivers: [
SliverAppBar(
backgroundColor: Theming.bgColor,
surfaceTintColor: Theming.bgColor,
expandedHeight: 115,
pinned: true,
centerTitle: true,
title: Text(
transl.notificationsNotifications,
style: const TextStyle(
color: Theming.whiteTone,
fontWeight: FontWeight.bold,
fontSize: 18,
backgroundColor: Theming.bgColor,
),
),
leading: Padding(
padding: const EdgeInsets.only(left: 20),
child: IconButton(
onPressed: () => context.pop(),
icon: const Icon(
Icons.arrow_back_ios_rounded,
color: Theming.whiteTone,
),
),
),
flexibleSpace: const FlexibleSpaceBar(
centerTitle: true,
title: Text(
"5 notifications",
style: TextStyle(
color: Theming.primaryColor,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(ctx, idx) => _notificationItem(ctx),
childCount: 20,
),
),
SliverToBoxAdapter(
child: SizedBox(
height: MediaQuery.of(context).viewPadding.bottom + 65,
),
),
],
),
);
}

///TODO on click show [Dialog] with information about the notification
Widget _notificationItem(BuildContext ctx) {
return InkWell(
onTap: () {
showModalBottomSheet(
context: ctx,
builder: (_) {
return const Dialog();
},
builder: (_) => const NotificationSheet(),
);
},
splashColor: Theming.whiteTone.withOpacity(0.05),
Expand All @@ -90,11 +126,32 @@ class NotificationsPage extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 30),
child: Row(
children: [
const CircleAvatar(
radius: 30,
backgroundColor: Theming.bgColorLight,
backgroundImage: NetworkImage(
"https://imgs.search.brave.com/lek-f6DrXwq-rOwULco3qjCi9C7IH6nhTo_pySkwVdM/rs:fit:1067:1200:1/g:ce/aHR0cDovLzQuYnAu/YmxvZ3Nwb3QuY29t/Ly1LUjJrSGY2Mjhm/MC9VeERaYlR4UkJC/SS9BQUFBQUFBQUF3/OC8wd0xJbFpLWFow/US9zMTYwMC8oMStv/ZisyKSthLmpwZw"),
Stack(
children: [
const CircleAvatar(
radius: 30,
backgroundColor: Theming.bgColorLight,
backgroundImage: NetworkImage(
"https://imgs.search.brave.com/lek-f6DrXwq-rOwULco3qjCi9C7IH6nhTo_pySkwVdM/rs:fit:1067:1200:1/g:ce/aHR0cDovLzQuYnAu/YmxvZ3Nwb3QuY29t/Ly1LUjJrSGY2Mjhm/MC9VeERaYlR4UkJC/SS9BQUFBQUFBQUF3/OC8wd0xJbFpLWFow/US9zMTYwMC8oMStv/ZisyKSthLmpwZw"),
),
Positioned.fill(
child: Align(
alignment: Alignment.topLeft,
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Theming.primaryColor,
shape: BoxShape.circle,
border: Border.all(
color: Theming.bgColor,
width: 3,
),
),
),
),
),
],
),
const SizedBox(width: 10),
Column(
Expand All @@ -115,7 +172,7 @@ class NotificationsPage extends StatelessWidget {
const TextSpan(
text: " @Ziemniak",
style: TextStyle(
color: Color(0xFFAEFF00),
color: Theming.greenTone,
fontWeight: FontWeight.bold,
fontSize: 16,
),
Expand All @@ -133,12 +190,6 @@ class NotificationsPage extends StatelessWidget {
),
],
),
const Spacer(),
const Icon(
Icons.circle,
size: 8,
color: Theming.primaryColor,
),
],
),
),
Expand Down
Loading

0 comments on commit e9ec59b

Please sign in to comment.