From 47e3c4d5d0bcf86270342d4c905c590c1980641d Mon Sep 17 00:00:00 2001 From: Osama Asif Date: Tue, 2 May 2023 03:56:17 +0500 Subject: [PATCH] ui: home screen design in-progress --- assets/images/ic_download.svg | 3 + assets/images/ic_menu.svg | 3 + assets/images/ic_search.svg | 3 + assets/images/ic_streak.svg | 10 +++ lib/constants/strings/asset_constants.dart | 4 + lib/constants/strings/route_constants.dart | 1 + lib/constants/strings/string_constants.dart | 1 + lib/constants/styles/widget_styles.dart | 4 +- lib/routes/routes.dart | 87 +++++++++--------- lib/views/btm_nav/home_widget.dart | 8 +- lib/views/home/home_view.dart | 23 +++++ .../widgets/header/home_header_widget.dart | 65 ++++++++++++++ .../home/widgets/search/search_widget.dart | 39 ++++++++ .../courses_row_item_widget.dart | 2 +- .../courses_row_widget.dart | 2 +- .../daily_message_item_widget.dart | 2 +- .../daily_message_widget.dart | 2 +- .../home_wrapper_widget.dart | 0 .../loading_text_box_widget.dart | 0 .../small_shortcuts_row_widget.dart | 90 ++++++++++--------- .../{home => home_old}/stats_widget.dart | 2 +- .../streak_tile_widget.dart | 0 22 files changed, 258 insertions(+), 93 deletions(-) create mode 100644 assets/images/ic_download.svg create mode 100644 assets/images/ic_menu.svg create mode 100644 assets/images/ic_search.svg create mode 100644 assets/images/ic_streak.svg create mode 100644 lib/views/home/home_view.dart create mode 100644 lib/views/home/widgets/header/home_header_widget.dart create mode 100644 lib/views/home/widgets/search/search_widget.dart rename lib/views/{home => home_old}/courses_row_item_widget.dart (97%) rename lib/views/{home => home_old}/courses_row_widget.dart (97%) rename lib/views/{home => home_old}/daily_message_item_widget.dart (97%) rename lib/views/{home => home_old}/daily_message_widget.dart (96%) rename lib/views/{home => home_old}/home_wrapper_widget.dart (100%) rename lib/views/{home => home_old}/loading_text_box_widget.dart (100%) rename lib/views/{home => home_old}/small_shortcuts_row_widget.dart (67%) rename lib/views/{home => home_old}/stats_widget.dart (99%) rename lib/views/{home => home_old}/streak_tile_widget.dart (100%) diff --git a/assets/images/ic_download.svg b/assets/images/ic_download.svg new file mode 100644 index 00000000..e38c90fe --- /dev/null +++ b/assets/images/ic_download.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_menu.svg b/assets/images/ic_menu.svg new file mode 100644 index 00000000..4bfb5a15 --- /dev/null +++ b/assets/images/ic_menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_search.svg b/assets/images/ic_search.svg new file mode 100644 index 00000000..093f2d34 --- /dev/null +++ b/assets/images/ic_search.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_streak.svg b/assets/images/ic_streak.svg new file mode 100644 index 00000000..c98f4271 --- /dev/null +++ b/assets/images/ic_streak.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/lib/constants/strings/asset_constants.dart b/lib/constants/strings/asset_constants.dart index 3334bd98..5f684fec 100644 --- a/lib/constants/strings/asset_constants.dart +++ b/lib/constants/strings/asset_constants.dart @@ -14,4 +14,8 @@ class AssetConstants { static const String icYoutube = 'assets/images/ic_youtube.svg'; static const String icInsta = 'assets/images/ic_insta.svg'; static const String icReddit = 'assets/images/ic_reddit.svg'; + static const String icSearch = 'assets/images/ic_search.svg'; + static const String icStreak = 'assets/images/ic_streak.svg'; + static const String icMenu = 'assets/images/ic_menu.svg'; + static const String icDownload = 'assets/images/ic_download.svg'; } diff --git a/lib/constants/strings/route_constants.dart b/lib/constants/strings/route_constants.dart index 8b996781..0f443f43 100644 --- a/lib/constants/strings/route_constants.dart +++ b/lib/constants/strings/route_constants.dart @@ -4,6 +4,7 @@ class RouteConstants { static const String sessionPath = '/session/:sid'; static const String dailyPath = '/daily/:did'; static const String donationPath = '/donation'; + static const String downloadsPath = '/downloads'; static const String playerPath = '/player'; static const String articlePath = '/article/:aid'; static const String folderPath = '/folder/:fid'; diff --git a/lib/constants/strings/string_constants.dart b/lib/constants/strings/string_constants.dart index c03fd064..c89f0106 100644 --- a/lib/constants/strings/string_constants.dart +++ b/lib/constants/strings/string_constants.dart @@ -68,5 +68,6 @@ class StringConstants { static const String welcomeMessage = 'You are now logged in. If you ever need to transfer Medito to another phone, use the same email address to log in and your preferences will be restored.'; static const String thanksForJoining = 'Thanks for being on this journey with us.'; static const String close = 'Close'; + static const String search = 'Search'; } diff --git a/lib/constants/styles/widget_styles.dart b/lib/constants/styles/widget_styles.dart index aaa03457..f6780ba1 100644 --- a/lib/constants/styles/widget_styles.dart +++ b/lib/constants/styles/widget_styles.dart @@ -6,6 +6,8 @@ final String? DmSans = GoogleFonts.dmSans().fontFamily; const String ClashDisplay = 'Clash Display'; const defaultPadding = 16.0; const height16 = SizedBox(height: 16); -const height8 = SizedBox(height: 8); const width16 = SizedBox(width: 16); +const height8 = SizedBox(height: 8); const width8 = SizedBox(width: 8); +const height4 = SizedBox(height: 4); +const width4 = SizedBox(width: 4); diff --git a/lib/routes/routes.dart b/lib/routes/routes.dart index 8ec8cfb4..6b91d1a8 100644 --- a/lib/routes/routes.dart +++ b/lib/routes/routes.dart @@ -9,13 +9,14 @@ import 'package:Medito/views/auth/join_welcome_view.dart'; import 'package:Medito/views/background_sound/background_sound_view.dart'; import 'package:Medito/views/downloads/downloads_view.dart'; import 'package:Medito/views/folder/folder_view.dart'; +import 'package:Medito/views/home/home_view.dart'; import 'package:Medito/views/player/player_view.dart'; import 'package:Medito/views/session/session_view.dart'; import 'package:Medito/views/splash_view.dart'; import 'package:Medito/views/text/text_file_widget.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; -import '../views/home/home_wrapper_widget.dart'; +import '../views/home_old/home_wrapper_widget.dart'; final GlobalKey _rootNavigatorKey = GlobalKey(); final GlobalKey _shellNavigatorKey = @@ -23,47 +24,47 @@ final GlobalKey _shellNavigatorKey = final router = GoRouter( debugLogDiagnostics: true, navigatorKey: _rootNavigatorKey, - initialLocation: RouteConstants.root, + initialLocation: RouteConstants.homePath, routes: [ - GoRoute( - path: RouteConstants.root, - pageBuilder: (context, state) => MaterialPage( - key: state.pageKey, - child: SplashView(), - ), - ), - GoRoute( - path: RouteConstants.joinIntroPath, - pageBuilder: (context, state) => MaterialPage( - key: state.pageKey, - child: JoinIntroView(), - ), - ), - GoRoute( - path: RouteConstants.joinEmailPath, - pageBuilder: (context, state) => MaterialPage( - key: state.pageKey, - child: JoinEmailView(), - ), - ), - GoRoute( - path: RouteConstants.joinVerifyOTPPath, - pageBuilder: (context, state) { - final data = state.extra! as Map; + // GoRoute( + // path: RouteConstants.root, + // pageBuilder: (context, state) => MaterialPage( + // key: state.pageKey, + // child: SplashView(), + // ), + // ), + // GoRoute( + // path: RouteConstants.joinIntroPath, + // pageBuilder: (context, state) => MaterialPage( + // key: state.pageKey, + // child: JoinIntroView(), + // ), + // ), + // GoRoute( + // path: RouteConstants.joinEmailPath, + // pageBuilder: (context, state) => MaterialPage( + // key: state.pageKey, + // child: JoinEmailView(), + // ), + // ), + // GoRoute( + // path: RouteConstants.joinVerifyOTPPath, + // pageBuilder: (context, state) { + // final data = state.extra! as Map; - return MaterialPage( - key: state.pageKey, - child: JoinVerifyOTPView(email: data['email']!), - ); - }, - ), - GoRoute( - path: RouteConstants.joinWelcomePath, - pageBuilder: (context, state) => MaterialPage( - key: state.pageKey, - child: JoinWelcomeView(), - ), - ), + // return MaterialPage( + // key: state.pageKey, + // child: JoinVerifyOTPView(email: data['email']!), + // ); + // }, + // ), + // GoRoute( + // path: RouteConstants.joinWelcomePath, + // pageBuilder: (context, state) => MaterialPage( + // key: state.pageKey, + // child: JoinWelcomeView(), + // ), + // ), ShellRoute( navigatorKey: _shellNavigatorKey, builder: (context, state, child) => RootPageView( @@ -74,7 +75,7 @@ final router = GoRouter( path: RouteConstants.homePath, pageBuilder: (context, state) => MaterialPage( key: state.pageKey, - child: HomeWrapperWidget(), + child: HomeView(), ), ), _getSessionRoute(fromRoot: true), @@ -84,7 +85,9 @@ final router = GoRouter( _getBackgroundSoundRoute(), GoRoute( path: RouteConstants.collectionPath, - routes: [_getPlayerRoute()], + routes: [ + _getPlayerRoute(), + ], pageBuilder: (context, state) => getCollectionMaterialPage(state), ), GoRoute( diff --git a/lib/views/btm_nav/home_widget.dart b/lib/views/btm_nav/home_widget.dart index 4153d6c7..ceb9c91e 100644 --- a/lib/views/btm_nav/home_widget.dart +++ b/lib/views/btm_nav/home_widget.dart @@ -25,10 +25,10 @@ import 'package:Medito/network/user/user_utils.dart'; import 'package:Medito/routes/routes.dart'; import 'package:Medito/tracking/tracking.dart'; import 'package:Medito/utils/utils.dart'; -import 'package:Medito/views/home/courses_row_widget.dart'; -import 'package:Medito/views/home/daily_message_widget.dart'; -import 'package:Medito/views/home/small_shortcuts_row_widget.dart'; -import 'package:Medito/views/home/stats_widget.dart'; +import 'package:Medito/views/home_old/courses_row_widget.dart'; +import 'package:Medito/views/home_old/daily_message_widget.dart'; +import 'package:Medito/views/home_old/small_shortcuts_row_widget.dart'; +import 'package:Medito/views/home_old/stats_widget.dart'; import 'package:Medito/views/packs/announcement_banner_widget.dart'; import 'package:Medito/views/packs/error_widget.dart'; import 'package:connectivity/connectivity.dart'; diff --git a/lib/views/home/home_view.dart b/lib/views/home/home_view.dart new file mode 100644 index 00000000..2b29b251 --- /dev/null +++ b/lib/views/home/home_view.dart @@ -0,0 +1,23 @@ +import 'package:Medito/constants/constants.dart'; +import 'package:flutter/material.dart'; +import 'widgets/header/home_header_widget.dart'; +import 'widgets/search/search_widget.dart'; + +class HomeView extends StatelessWidget { + const HomeView({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: Column( + children: [ + height8, + HomeHeaderWidget(), + SearchWidget(), + ], + ), + ), + ); + } +} diff --git a/lib/views/home/widgets/header/home_header_widget.dart b/lib/views/home/widgets/header/home_header_widget.dart new file mode 100644 index 00000000..d3c3742f --- /dev/null +++ b/lib/views/home/widgets/header/home_header_widget.dart @@ -0,0 +1,65 @@ +import 'package:Medito/constants/constants.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:go_router/go_router.dart'; + +class HomeHeaderWidget extends StatelessWidget { + const HomeHeaderWidget({ + super.key, + this.streakCount, + }); + final String? streakCount; + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + SvgPicture.asset(AssetConstants.icLogo), + Row( + children: [ + _streakWidget(context, streakCount: streakCount), + width16, + _downloadWidget(context), + width16, + SvgPicture.asset(AssetConstants.icMenu), + ], + ), + ], + ), + ); + } + + InkWell _downloadWidget(BuildContext context) { + return InkWell( + onTap: () => context.push(RouteConstants.collectionPath), + child: SvgPicture.asset( + AssetConstants.icDownload, + ), + ); + } + + Container _streakWidget(BuildContext context, {String? streakCount}) { + return Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(14), + border: Border.all( + width: 1, + color: ColorConstants.walterWhite, + ), + ), + padding: EdgeInsets.symmetric(horizontal: 7, vertical: 1), + child: Row( + children: [ + SvgPicture.asset(AssetConstants.icStreak), + width4, + Text( + streakCount ?? '0', + style: Theme.of(context).textTheme.titleMedium, + ), + ], + ), + ); + } +} diff --git a/lib/views/home/widgets/search/search_widget.dart b/lib/views/home/widgets/search/search_widget.dart new file mode 100644 index 00000000..9320a314 --- /dev/null +++ b/lib/views/home/widgets/search/search_widget.dart @@ -0,0 +1,39 @@ +import 'package:Medito/constants/constants.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; + +class SearchWidget extends StatelessWidget { + const SearchWidget({super.key}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(left: 15, right: 15, top: 20), + child: TextFormField( + // textAlign: TextAlign.center, + cursorColor: ColorConstants.walterWhite, + cursorWidth: 1, + decoration: InputDecoration( + prefixIcon: Padding( + padding: const EdgeInsets.all(10.0), + child: SvgPicture.asset( + AssetConstants.icSearch, + ), + ), + hintText: StringConstants.search, + hintStyle: Theme.of(context).textTheme.bodyLarge?.copyWith( + color: ColorConstants.walterWhite, + fontFamily: DmSans, + fontSize: 16, + ), + ), + style: Theme.of(context).textTheme.bodyMedium?.copyWith( + color: ColorConstants.walterWhite, + fontFamily: DmSans, + fontSize: 16, + ), + onChanged: (val) => {}, + ), + ); + } +} diff --git a/lib/views/home/courses_row_item_widget.dart b/lib/views/home_old/courses_row_item_widget.dart similarity index 97% rename from lib/views/home/courses_row_item_widget.dart rename to lib/views/home_old/courses_row_item_widget.dart index cf492402..01a7e7d7 100644 --- a/lib/views/home/courses_row_item_widget.dart +++ b/lib/views/home_old/courses_row_item_widget.dart @@ -1,7 +1,7 @@ import 'package:Medito/network/home/courses_response.dart'; import 'package:Medito/constants/constants.dart'; import 'package:Medito/utils/utils.dart'; -import 'package:Medito/views/home/loading_text_box_widget.dart'; +import 'package:Medito/views/home_old/loading_text_box_widget.dart'; import 'package:flutter/material.dart'; class CoursesRowItemWidget extends StatelessWidget { diff --git a/lib/views/home/courses_row_widget.dart b/lib/views/home_old/courses_row_widget.dart similarity index 97% rename from lib/views/home/courses_row_widget.dart rename to lib/views/home_old/courses_row_widget.dart index 6f7cd07d..6ee859ed 100644 --- a/lib/views/home/courses_row_widget.dart +++ b/lib/views/home_old/courses_row_widget.dart @@ -1,7 +1,7 @@ import 'package:Medito/network/api_response.dart'; import 'package:Medito/network/home/courses_bloc.dart'; import 'package:Medito/network/home/courses_response.dart'; -import 'package:Medito/views/home/courses_row_item_widget.dart'; +import 'package:Medito/views/home_old/courses_row_item_widget.dart'; import 'package:flutter/material.dart'; class CoursesRowWidget extends StatefulWidget { diff --git a/lib/views/home/daily_message_item_widget.dart b/lib/views/home_old/daily_message_item_widget.dart similarity index 97% rename from lib/views/home/daily_message_item_widget.dart rename to lib/views/home_old/daily_message_item_widget.dart index 32a62120..62802bee 100644 --- a/lib/views/home/daily_message_item_widget.dart +++ b/lib/views/home_old/daily_message_item_widget.dart @@ -1,7 +1,7 @@ import 'package:Medito/network/home/daily_message_response.dart'; import 'package:Medito/constants/constants.dart'; import 'package:Medito/utils/utils.dart'; -import 'package:Medito/views/home/loading_text_box_widget.dart'; +import 'package:Medito/views/home_old/loading_text_box_widget.dart'; import 'package:flutter/material.dart'; import 'package:flutter_markdown/flutter_markdown.dart'; import 'package:share/share.dart'; diff --git a/lib/views/home/daily_message_widget.dart b/lib/views/home_old/daily_message_widget.dart similarity index 96% rename from lib/views/home/daily_message_widget.dart rename to lib/views/home_old/daily_message_widget.dart index d2bafc29..3cd1725b 100644 --- a/lib/views/home/daily_message_widget.dart +++ b/lib/views/home_old/daily_message_widget.dart @@ -1,7 +1,7 @@ import 'package:Medito/network/api_response.dart'; import 'package:Medito/network/home/daily_message_bloc.dart'; import 'package:Medito/network/home/daily_message_response.dart'; -import 'package:Medito/views/home/daily_message_item_widget.dart'; +import 'package:Medito/views/home_old/daily_message_item_widget.dart'; import 'package:flutter/material.dart'; //This widget is the quote box on the home screen diff --git a/lib/views/home/home_wrapper_widget.dart b/lib/views/home_old/home_wrapper_widget.dart similarity index 100% rename from lib/views/home/home_wrapper_widget.dart rename to lib/views/home_old/home_wrapper_widget.dart diff --git a/lib/views/home/loading_text_box_widget.dart b/lib/views/home_old/loading_text_box_widget.dart similarity index 100% rename from lib/views/home/loading_text_box_widget.dart rename to lib/views/home_old/loading_text_box_widget.dart diff --git a/lib/views/home/small_shortcuts_row_widget.dart b/lib/views/home_old/small_shortcuts_row_widget.dart similarity index 67% rename from lib/views/home/small_shortcuts_row_widget.dart rename to lib/views/home_old/small_shortcuts_row_widget.dart index df4803c3..cbf39198 100644 --- a/lib/views/home/small_shortcuts_row_widget.dart +++ b/lib/views/home_old/small_shortcuts_row_widget.dart @@ -36,42 +36,50 @@ class SmallShortcutsRowWidgetState extends State { } else { isLandscape = false; } + return SizeChangedLayoutNotifier( - child: StreamBuilder>( - stream: _bloc.shortcutList.stream, - initialData: ApiResponse.loading(), - builder: (context, snapshot) { - switch (snapshot.data?.status) { - case Status.LOADING: - return _getLoadingWidget(); - case Status.COMPLETED: - return GridView.count( - crossAxisCount: isLandscape ? 4 : 2, - padding: const EdgeInsets.only( - left: 12.0, right: 12.0, top: 8.0), - scrollDirection: Axis.vertical, - childAspectRatio: 2.6, - physics: NeverScrollableScrollPhysics(), - shrinkWrap: true, - children: List.generate( - snapshot.data?.body?.data?.length ?? 0, (index) { - return Card( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6)), - clipBehavior: Clip.antiAlias, - color: ColorConstants.deepNight, - child: SmallShortcutWidget( - snapshot.data?.body?.data?[index], - widget.onTap), - ); - }), - ); - case Status.ERROR: - return Icon(Icons.error); - case null: - } - return Container(); - })); + child: StreamBuilder>( + stream: _bloc.shortcutList.stream, + initialData: ApiResponse.loading(), + builder: (context, snapshot) { + switch (snapshot.data?.status) { + case Status.LOADING: + return _getLoadingWidget(); + case Status.COMPLETED: + return GridView.count( + crossAxisCount: isLandscape ? 4 : 2, + padding: + const EdgeInsets.only(left: 12.0, right: 12.0, top: 8.0), + scrollDirection: Axis.vertical, + childAspectRatio: 2.6, + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + children: List.generate( + snapshot.data?.body?.data?.length ?? 0, + (index) { + return Card( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(6), + ), + clipBehavior: Clip.antiAlias, + color: ColorConstants.deepNight, + child: SmallShortcutWidget( + snapshot.data?.body?.data?[index], + widget.onTap, + ), + ); + }, + ), + ); + case Status.ERROR: + return Icon(Icons.error); + case null: + } + + return Container(); + }, + ), + ); }); } @@ -94,7 +102,7 @@ class SmallShortcutsRowWidgetState extends State { ); } }), - ); + ); Card _getLocalDownloadsWidget() { return Card( @@ -109,8 +117,7 @@ class SmallShortcutsRowWidgetState extends State { cover: null, backgroundImage: null, colorPrimary: '#ff282828'), - widget.onTap) - ); + widget.onTap)); } } @@ -164,7 +171,8 @@ class SmallShortcutWidget extends StatelessWidget { ), ); - Widget _getBackgroundImage() => data?.backgroundImage?.isNotNullAndNotEmpty() == true - ? getNetworkImageWidget(data?.bgImageUrl) - : Container(); + Widget _getBackgroundImage() => + data?.backgroundImage?.isNotNullAndNotEmpty() == true + ? getNetworkImageWidget(data?.bgImageUrl) + : Container(); } diff --git a/lib/views/home/stats_widget.dart b/lib/views/home_old/stats_widget.dart similarity index 99% rename from lib/views/home/stats_widget.dart rename to lib/views/home_old/stats_widget.dart index e64bdd7e..38341144 100644 --- a/lib/views/home/stats_widget.dart +++ b/lib/views/home_old/stats_widget.dart @@ -1,7 +1,7 @@ import 'package:Medito/constants/constants.dart'; import 'package:Medito/utils/stats_utils.dart'; import 'package:Medito/providers/stats/stats_provider.dart'; -import 'package:Medito/views/home/streak_tile_widget.dart'; +import 'package:Medito/views/home_old/streak_tile_widget.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:pedantic/pedantic.dart'; diff --git a/lib/views/home/streak_tile_widget.dart b/lib/views/home_old/streak_tile_widget.dart similarity index 100% rename from lib/views/home/streak_tile_widget.dart rename to lib/views/home_old/streak_tile_widget.dart