diff --git a/lib/pages/discover/discover_view.dart b/lib/pages/discover/discover_view.dart index f8122c6..1db6c8a 100644 --- a/lib/pages/discover/discover_view.dart +++ b/lib/pages/discover/discover_view.dart @@ -113,6 +113,7 @@ class _DiscoverPageState extends State { bottom: !widget.embedded, child: Column( children: [ + _header(l10n), Expanded(child: _feed(l10n, categories, allDramas, visible)), if (!widget.embedded) _bottomNav(l10n), ], @@ -137,7 +138,6 @@ class _DiscoverPageState extends State { ) => CustomScrollView( controller: logic.scroll, slivers: [ - SliverToBoxAdapter(child: _header(l10n)), SliverToBoxAdapter(child: _search()), SliverToBoxAdapter( child: Padding( @@ -222,69 +222,72 @@ class _DiscoverPageState extends State { ); Widget _header(AppLocalizations l10n) { - return Padding( - padding: const EdgeInsets.fromLTRB(14, 2, 14, 10), - child: Row( - children: [ - Container( - width: 24, - height: 24, - alignment: Alignment.center, - decoration: BoxDecoration( - color: AppColors.blue, - borderRadius: BorderRadius.circular(7), + return SizedBox( + height: 46, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 14), + child: Row( + children: [ + Container( + width: 24, + height: 24, + alignment: Alignment.center, + decoration: BoxDecoration( + color: AppColors.blue, + borderRadius: BorderRadius.circular(7), + ), + child: const Icon( + Icons.play_arrow_rounded, + color: AppColors.onPrimary, + size: 16, + ), ), - child: const Icon( - Icons.play_arrow_rounded, - color: AppColors.onPrimary, - size: 16, + const SizedBox(width: 8), + Text( + l10n.discoverTab, + style: const TextStyle( + fontFamily: 'Outfit', + color: AppColors.onSurface, + fontSize: 15, + fontWeight: FontWeight.w800, + ), ), - ), - const SizedBox(width: 8), - Text( - l10n.discoverTab, - style: const TextStyle( - fontFamily: 'Outfit', - color: AppColors.onSurface, - fontSize: 15, - fontWeight: FontWeight.w800, + const Spacer(), + _HeaderIcon( + key: const Key('discover-search-button'), + icon: Icons.search_rounded, + tooltip: l10n.search, + onTap: logic.openSearch, ), - ), - const Spacer(), - _HeaderIcon( - key: const Key('discover-search-button'), - icon: Icons.search_rounded, - tooltip: l10n.search, - onTap: logic.openSearch, - ), - const SizedBox(width: 8), - Semantics( - button: true, - label: widget.signedIn ? l10n.myTab : l10n.logIn, - child: InkWell( - key: const Key('discover-profile'), - customBorder: const CircleBorder(), - onTap: widget.signedIn ? widget.onCoins : widget.onSignIn, - child: Container( - width: 36, - height: 36, - decoration: BoxDecoration( - shape: BoxShape.circle, - gradient: const LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [Color(0xFF6A5CFF), AppColors.blue], + const SizedBox(width: 8), + Semantics( + button: true, + label: widget.signedIn ? l10n.myTab : l10n.logIn, + child: InkWell( + key: const Key('discover-profile'), + customBorder: const CircleBorder(), + onTap: widget.signedIn ? widget.onCoins : widget.onSignIn, + child: Container( + width: 36, + height: 36, + decoration: BoxDecoration( + shape: BoxShape.circle, + gradient: const LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [Color(0xFF6A5CFF), AppColors.blue], + ), + ), + child: const Icon( + Icons.person_rounded, + color: AppColors.onSurface, + size: 18, ), - ), - child: const Icon( - Icons.person_rounded, - color: AppColors.onSurface, - size: 18, ), ), ), - ), - ], + ], + ), ), ); } diff --git a/test/discover/home_all_dramas_grid_test.dart b/test/discover/home_all_dramas_grid_test.dart index f7b747a..9408808 100644 --- a/test/discover/home_all_dramas_grid_test.dart +++ b/test/discover/home_all_dramas_grid_test.dart @@ -132,6 +132,43 @@ void main() { ); }); + testWidgets('should_keep_discover_header_fixed_when_content_scrolls', ( + tester, + ) async { + tester.view.physicalSize = const Size(390, 844); + tester.view.devicePixelRatio = 1; + addTearDown(tester.view.resetPhysicalSize); + addTearDown(tester.view.resetDevicePixelRatio); + + await _pumpApp( + tester, + categoryRepository: _GridCategoryRepository( + discoverFeed: _tallDiscoverFeed, + ), + ); + await tester.tap(find.byKey(const Key('tab-discover'))); + await tester.pumpAndSettle(); + + final headerBefore = tester.getTopLeft( + find.byKey(const Key('discover-search-button')), + ); + final contentBefore = tester.getTopLeft( + find.byKey(const Key('home-category-chips')), + ); + + await tester.drag(find.byType(CustomScrollView), const Offset(0, -40)); + await tester.pumpAndSettle(); + + expect( + tester.getTopLeft(find.byKey(const Key('discover-search-button'))), + headerBefore, + ); + expect( + tester.getTopLeft(find.byKey(const Key('home-category-chips'))).dy, + lessThan(contentBefore.dy), + ); + }); + testWidgets('should_keep_empty_messages_when_feed_has_no_dramas', ( tester, ) async { @@ -341,3 +378,23 @@ final _defaultDiscoverFeed = HomeFeed( ), ], ); + +final _tallDiscoverFeed = HomeFeed( + sections: [ + FeedSection( + code: 'hot', + title: 'Hot', + dramas: [ + for (var index = 0; index < 12; index++) + Drama( + id: 'tall-$index', + title: 'Tall Drama $index', + synopsis: 'Tall Drama $index synopsis', + posterUrl: '/files/tall-$index.png', + genre: 'Urban Romance', + detailLoaded: true, + ), + ], + ), + ], +);