fix: login screen not using safearea and no dialog bg-color found on light mode in AdaptivePopupMenuButton

This commit is contained in:
Kingkor Roy Tirtho 2022-08-07 22:24:45 +06:00
parent 615d5ce901
commit 92bc611c5e
3 changed files with 55 additions and 48 deletions

View File

@ -2,8 +2,6 @@ import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/components/Login/LoginForm.dart'; import 'package:spotube/components/Login/LoginForm.dart';
import 'package:spotube/components/Shared/Hyperlink.dart';
import 'package:spotube/components/Shared/LinkText.dart';
import 'package:spotube/components/Shared/PageWindowTitleBar.dart'; import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
import 'package:spotube/hooks/useBreakpoints.dart'; import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/models/Logger.dart'; import 'package:spotube/models/Logger.dart';
@ -18,48 +16,50 @@ class Login extends HookConsumerWidget {
final textTheme = Theme.of(context).textTheme; final textTheme = Theme.of(context).textTheme;
return Scaffold( return SafeArea(
appBar: const PageWindowTitleBar(leading: BackButton()), child: Scaffold(
body: SingleChildScrollView( appBar: const PageWindowTitleBar(leading: BackButton()),
child: Center( body: SingleChildScrollView(
child: Container( child: Center(
margin: const EdgeInsets.symmetric(horizontal: 10), child: Container(
child: Column( margin: const EdgeInsets.symmetric(horizontal: 10),
children: [ child: Column(
Image.asset( children: [
"assets/spotube-logo.png", Image.asset(
width: MediaQuery.of(context).size.width * "assets/spotube-logo.png",
(breakpoint <= Breakpoints.md ? .5 : .3), width: MediaQuery.of(context).size.width *
), (breakpoint <= Breakpoints.md ? .5 : .3),
Text("Add your spotify credentials to get started", ),
style: breakpoint <= Breakpoints.md Text("Add your spotify credentials to get started",
? textTheme.headline5 style: breakpoint <= Breakpoints.md
: textTheme.headline4), ? textTheme.headline5
Text( : textTheme.headline4),
"Don't worry, any of your credentials won't be collected or shared with anyone", Text(
style: Theme.of(context).textTheme.caption, "Don't worry, any of your credentials won't be collected or shared with anyone",
), style: Theme.of(context).textTheme.caption,
const SizedBox(height: 10), ),
LoginForm( const SizedBox(height: 10),
onDone: () => GoRouter.of(context).pop(), LoginForm(
), onDone: () => GoRouter.of(context).pop(),
const SizedBox(height: 10), ),
Wrap( const SizedBox(height: 10),
alignment: WrapAlignment.center, Wrap(
crossAxisAlignment: WrapCrossAlignment.center, alignment: WrapAlignment.center,
children: [ crossAxisAlignment: WrapCrossAlignment.center,
const Text("Don't know how to do this?"), children: [
TextButton( const Text("Don't know how to do this?"),
child: const Text( TextButton(
"Follow along the Step by Step guide", child: const Text(
"Follow along the Step by Step guide",
),
onPressed: () => GoRouter.of(context).push(
"/login-tutorial",
),
), ),
onPressed: () => GoRouter.of(context).push( ],
"/login-tutorial", ),
), ],
), ),
],
),
],
), ),
), ),
), ),

View File

@ -213,10 +213,17 @@ class Settings extends HookConsumerWidget {
), ),
), ),
if (auth.isAnonymous) if (auth.isAnonymous)
ListTile( AdaptiveListTile(
leading: const Icon(Icons.login_rounded), leading: Icon(
title: const Text("Login with your Spotify account"), Icons.login_rounded,
horizontalTitleGap: 10, color: Theme.of(context).primaryColor,
),
title: Text(
"Login with your Spotify account",
style: TextStyle(
color: Theme.of(context).primaryColor,
),
),
trailing: ElevatedButton( trailing: ElevatedButton(
child: Text("Connect with Spotify".toUpperCase()), child: Text("Connect with Spotify".toUpperCase()),
onPressed: () { onPressed: () {

View File

@ -83,7 +83,7 @@ class AdaptiveActions extends HookWidget {
.toList(), .toList(),
); );
}, },
backgroundColor: Theme.of(context).dialogTheme.backgroundColor!, backgroundColor: Theme.of(context).cardColor,
); );
}, },
); );