-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
style(LandingPage): cleaned and restyled
refactor(comfy): added palette constants feat(comfy): added filledbutton theme
- Loading branch information
Showing
3 changed files
with
122 additions
and
89 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,64 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_svg/flutter_svg.dart'; | ||
| import 'package:provider/provider.dart'; | ||
| import '../../common/themes/comfy_theme.dart'; | ||
| import 'google_provider.dart'; | ||
|
|
||
| class LandingPage extends StatelessWidget { | ||
| const LandingPage({Key? key}) : super(key: key); | ||
|
|
||
| // TODO clean up code | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) => Stack(children: [ | ||
| SvgPicture.asset( | ||
| 'assets/images/LandingArt.svg', | ||
| alignment: Alignment.bottomCenter, | ||
| width: MediaQuery.of(context).size.width, | ||
| height: MediaQuery.of(context).size.height, | ||
| ), | ||
| _buildBackgroundArt(context), | ||
| Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const Text( | ||
| 'Welcome To', | ||
| style: TextStyle( | ||
| fontSize: 32, | ||
| fontWeight: FontWeight.w500, | ||
| color: Color(0xff828282)), | ||
| ), | ||
| const SizedBox(height: 16), | ||
| const Text( | ||
| 'ASLearner', | ||
| style: TextStyle( | ||
| fontSize: 48, | ||
| fontWeight: FontWeight.w500, | ||
| color: Colors.white, | ||
| ), | ||
| ), | ||
| const SizedBox(height: 16), | ||
| const Text( | ||
| 'A spaced-repetition flashcard ASL learning app.\nLearn American Sign Language simply and effectively!', | ||
| textAlign: TextAlign.center, | ||
| style: TextStyle( | ||
| fontSize: 32, | ||
| fontWeight: FontWeight.w500, | ||
| color: Color(0xff828282), | ||
| ), | ||
| ), | ||
| _buildMotto(context), | ||
| const SizedBox(height: 48), | ||
| ElevatedButton( | ||
| style: ElevatedButton.styleFrom( | ||
| side: const BorderSide(color: Color(0xFF1E1E1E)), | ||
| elevation: 10, | ||
| backgroundColor: const Color(0xFF292929), | ||
| padding: const EdgeInsets.all(10), | ||
| textStyle: const TextStyle(fontSize: 14), | ||
| minimumSize: const Size(240, 48)), | ||
| child: const Text('GET STARTED'), | ||
| onPressed: () { | ||
| final provider = | ||
| Provider.of<GoogleSignInProvider>(context, listen: false); | ||
| provider.googleLogin(); | ||
| }, | ||
| ), | ||
| _buildLoginButton(context), | ||
| ], | ||
| ), | ||
| ), | ||
| ]); | ||
|
|
||
| Widget _buildLoginButton(BuildContext context) => FilledButton( | ||
| style: FilledButton.styleFrom(minimumSize: const Size(240, 48)), | ||
| child: const Text('GET STARTED'), | ||
| onPressed: () => context.read<GoogleSignInProvider>().googleLogin(), | ||
| ); | ||
|
|
||
| Widget _buildMotto(BuildContext context) => RichText( | ||
| textAlign: TextAlign.center, | ||
| text: TextSpan( | ||
| text: 'Welcome To\n', | ||
| style: Theme.of(context).textTheme.displaySmall!.copyWith( | ||
| color: | ||
| Theme.of(context).extension<CustomPalette>()!.unselected), | ||
| children: [ | ||
| TextSpan( | ||
| text: 'ASLearner\n', | ||
| style: Theme.of(context).textTheme.displayLarge!.copyWith( | ||
| color: | ||
| Theme.of(context).extension<CustomPalette>()!.selected), | ||
| ), | ||
| TextSpan( | ||
| text: | ||
| 'A spaced-repetition flashcard ASL learning app.\nLearn American Sign Language simply and effectively!', | ||
| style: Theme.of(context).textTheme.displaySmall!.copyWith( | ||
| color: Theme.of(context) | ||
| .extension<CustomPalette>()! | ||
| .unselected)), | ||
| ]), | ||
| ); | ||
|
|
||
| Widget _buildBackgroundArt(BuildContext context) => SvgPicture.asset( | ||
| 'assets/images/LandingArt.svg', | ||
| colorFilter: ColorFilter.mode( | ||
| Theme.of(context).extension<CustomPalette>()!.surface as Color, | ||
| BlendMode.srcATop), | ||
| alignment: Alignment.bottomCenter, | ||
| width: MediaQuery.of(context).size.width, | ||
| height: MediaQuery.of(context).size.height, | ||
| ); | ||
| } |