jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(flutter): 重设计剧场与首页 Hero

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-20 10:24:19 +08:00
1 parent 678b976ce1
commit 73aef4e44e
19 files changed
+339 -312
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/theme/app_dimens.dart
+3 -1
View File
@@ -60,8 +60,10 @@ abstract final class AppDimens {
static const double accountLabel = 11;
static const double watchPlaceholderHeight = 114;
static const double heroBannerHeight = 176;
static const double heroBannerHeight = 240;
static const double heroBannerRadius = 20;
static const double heroTitle = 28;
static const double heroSubtitle = 14;
static const double cardMeta = 12;
static const double cardViews = 11;
lib/l10n/app_en.arb
+2
View File
@@ -116,6 +116,8 @@
"recommendedTab": "Recommended",
"noCategoryDramas": "No dramas in this category yet.",
"allDramas": "All Dramas",
"allLanguages": "All languages",
"bahasaMelayu": "Malay",
"createSubtitle": "Stories become short dramas",
"weekdayMon": "Mon",
"weekdayTue": "Tue",
lib/l10n/app_id.arb
+2
View File
@@ -116,6 +116,8 @@
"recommendedTab": "Rekomendasi",
"noCategoryDramas": "Belum ada drama di kategori ini.",
"allDramas": "Semua Drama",
"allLanguages": "Semua bahasa",
"bahasaMelayu": "Bahasa Melayu",
"createSubtitle": "Cerita menjadi drama pendek",
"weekdayMon": "Sen",
"weekdayTue": "Sel",
lib/l10n/app_localizations.dart
+12
View File
@@ -562,6 +562,18 @@ abstract class AppLocalizations {
/// **'All Dramas'**
String get allDramas;
/// No description provided for @allLanguages.
///
/// In en, this message translates to:
/// **'All languages'**
String get allLanguages;
/// No description provided for @bahasaMelayu.
///
/// In en, this message translates to:
/// **'Malay'**
String get bahasaMelayu;
/// No description provided for @createSubtitle.
///
/// In en, this message translates to:
lib/l10n/app_localizations_en.dart
+6
View File
@@ -258,6 +258,12 @@ class AppLocalizationsEn extends AppLocalizations {
@override
String get allDramas => 'All Dramas';
@override
String get allLanguages => 'All languages';
@override
String get bahasaMelayu => 'Malay';
@override
String get createSubtitle => 'Stories become short dramas';
lib/l10n/app_localizations_id.dart
+6
View File
@@ -258,6 +258,12 @@ class AppLocalizationsId extends AppLocalizations {
@override
String get allDramas => 'Semua Drama';
@override
String get allLanguages => 'Semua bahasa';
@override
String get bahasaMelayu => 'Bahasa Melayu';
@override
String get createSubtitle => 'Cerita menjadi drama pendek';
lib/l10n/app_localizations_zh.dart
+6
View File
@@ -253,6 +253,12 @@ class AppLocalizationsZh extends AppLocalizations {
@override
String get allDramas => '全部剧目';
@override
String get allLanguages => '全部语言';
@override
String get bahasaMelayu => '马来语';
@override
String get createSubtitle => '让故事成为漫剧';
lib/l10n/app_zh.arb
+2
View File
@@ -116,6 +116,8 @@
"recommendedTab": "推荐",
"noCategoryDramas": "这个分类暂时没有剧集。",
"allDramas": "全部剧目",
"allLanguages": "全部语言",
"bahasaMelayu": "马来语",
"createSubtitle": "让故事成为漫剧",
"weekdayMon": "周一",
"weekdayTue": "周二",
lib/pages/discover/discover_logic.dart
+16
View File
@@ -28,6 +28,8 @@ class DiscoverLogic extends ChangeNotifier {
String _lastRequestedQuery = '';
int _searchRequest = 0;
bool _disposed = false;
TheaterLanguage language = TheaterLanguage.all;
String? selectedCategoryId;
bool get hasSearchQuery => search.text.trim().isNotEmpty;
@@ -48,6 +50,20 @@ class DiscoverLogic extends ChangeNotifier {
void openSearch() => searchFocus.requestFocus();
/// 选择语言；当前仅改变视觉选中态，不参与数据过滤。
void selectLanguage(TheaterLanguage value) {
if (language == value) return;
language = value;
notify();
}
/// 选择分类；空值表示全部。
void selectCategory(String? categoryId) {
if (selectedCategoryId == categoryId) return;
selectedCategoryId = categoryId;
notify();
}
void retrySearch() {
final query = search.text.trim();
if (query.isNotEmpty) unawaited(_runSearch(query));
lib/pages/discover/discover_types.dart
+3
View File
@@ -7,6 +7,9 @@ import '../../core/data/models/drama.dart';
/// 剧场页与根导航之间的动作。
enum DiscoverPageAction { home, create, my }
/// 剧场语言筛选的视觉选中态。
enum TheaterLanguage { all, zh, id, ms, en }
/// 剧场页导航回调；没有 `onAction` 时按独立页面处理。
class DiscoverPageCallbacks {
const DiscoverPageCallbacks({
lib/pages/discover/discover_view.dart
+136 -165
View File
@@ -4,12 +4,8 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import '../../core/data/models/content_category.dart';
import '../../core/data/models/drama.dart';
import '../../core/data/models/home_feed.dart';
import '../../core/data/repositories/catalog_repository.dart';
import '../../core/data/repositories/search_repository.dart';
import '../../core/data/services/catalog_controller.dart';
import '../../core/data/services/category_controller.dart';
import '../../core/formatting/error_text.dart';
import '../../core/theme/app_colors.dart';
@@ -19,19 +15,14 @@ import '../../core/widgets/app_bottom_nav.dart';
import '../../core/widgets/empty_state.dart';
import '../../l10n/app_localizations.dart';
import '../drama_detail/drama_detail_view.dart';
import 'category_dramas_page.dart';
import 'discover_binding.dart';
import 'discover_logic.dart';
import 'discover_types.dart';
import 'widgets/category_grid.dart';
import 'widgets/discover_header.dart';
import 'widgets/discover_search_field.dart';
import 'widgets/discover_search_results.dart';
import 'widgets/drama_grid.dart';
import 'widgets/feed_banner_carousel.dart';
import 'widgets/ranking_section.dart';
/// 剧场页：搜索 + 分类九宫格 + 榜单 + 全部剧目。
/// K28-A2 剧场页：搜索、分类/语言 chips 与双列剧库。
class DiscoverPage extends StatefulWidget {
const DiscoverPage({
super.key,
@@ -96,13 +87,18 @@ class _DiscoverPageState extends State<DiscoverPage> {
Widget _page(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final categories = context.watch<CategoryController>();
final banners = context.watch<CatalogController>().banners;
final content = SafeArea(
bottom: !embedded,
child: Column(
children: [
DiscoverHeader(onSearch: logic.openSearch, onProfile: _openProfile),
Expanded(child: _feed(l10n, categories, banners)),
DiscoverHeader(
controller: logic.search,
focusNode: logic.searchFocus,
onChanged: (_) => logic.onSearchChanged(),
loading: logic.searchLoading,
onProfile: _openProfile,
),
Expanded(child: _feed(l10n, categories)),
if (!embedded) _bottomNav(l10n),
],
),
@@ -118,58 +114,37 @@ class _DiscoverPageState extends State<DiscoverPage> {
);
}
Widget _feed(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
return RefreshIndicator(
key: const Key('discover-refresh'),
color: AppColors.blue,
backgroundColor: AppColors.card,
onRefresh: categories.load,
child: ListView(
controller: logic.scroll,
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.only(bottom: 24),
children: [
Padding(
padding: const EdgeInsets.only(top: 8),
child: DiscoverSearchField(
controller: logic.search,
focusNode: logic.searchFocus,
onChanged: (_) => logic.onSearchChanged(),
loading: logic.searchLoading,
),
),
..._content(l10n, categories, banners),
],
Widget _feed(AppLocalizations l10n, CategoryController categories) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: logic.searchFocus.unfocus,
child: RefreshIndicator(
key: const Key('discover-refresh'),
color: AppColors.blue,
backgroundColor: AppColors.card,
onRefresh: categories.load,
child: ListView(
controller: logic.scroll,
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
children: _content(l10n, categories),
),
),
);
}
List<Widget> _content(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
if (logic.hasSearchQuery) return [_searchContent(l10n)];
return _theaterContent(l10n, categories, banners);
}
Widget _searchContent(AppLocalizations l10n) => DiscoverSearchResults(
loading: logic.searchLoading,
error: logic.searchError,
results: logic.searchResults,
onRetry: logic.retrySearch,
onOpen: _openDrama,
);
List<Widget> _theaterContent(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
List<Widget> _content(AppLocalizations l10n, CategoryController categories) {
if (logic.hasSearchQuery) {
return [
DiscoverSearchResults(
loading: logic.searchLoading,
error: logic.searchError,
results: logic.searchResults,
onRetry: logic.retrySearch,
onOpen: _openDrama,
),
];
}
if (categories.loading && categories.feed.sections.isEmpty) {
return [_block(const CircularProgressIndicator(strokeWidth: 2))];
}
@@ -188,91 +163,124 @@ class _DiscoverPageState extends State<DiscoverPage> {
),
];
}
return _theaterBlocks(l10n, categories, banners);
return _theaterBlocks(l10n, categories);
}
List<Widget> _theaterBlocks(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
final dramas = categories.feed.dramas;
final dramas = logic.selectedCategoryId == null
? categories.feed.dramas
: categories.dramasOf(logic.selectedCategoryId!);
return [
Padding(
padding: const EdgeInsets.only(top: 12),
child: CategoryGrid(
categories: categories.categories,
onTap: (category) => _openCategory(category, categories),
),
),
if (banners.isNotEmpty)
_categoryChips(l10n, categories),
_languageChips(l10n),
if (dramas.isEmpty)
Padding(
padding: const EdgeInsets.only(top: 12),
child: FeedBannerCarousel(
banners: banners,
active: widget.active,
onOpen: _openBanner,
padding: const EdgeInsets.symmetric(vertical: 40),
child: EmptyState(
key: const Key('discover-empty'),
icon: Icons.movie_filter_outlined,
title: l10n.noStories,
subtitle: l10n.emptyHint,
),
),
if (categories.feed.sections.isNotEmpty || dramas.isNotEmpty)
RankingSection(
sections: categories.feed.sections,
fallback: dramas,
onOpen: _openDrama,
),
_sectionTitle(l10n.allDramas),
if (dramas.isEmpty) _emptyCatalog(l10n) else _dramaGrid(l10n, dramas),
)
else
DramaGrid(l10n: l10n, dramas: dramas, onOpen: _openDrama),
];
}
Widget _block(Widget child) =>
SizedBox(height: 280, child: Center(child: child));
Widget _emptyCatalog(AppLocalizations l10n) => Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: EmptyState(
key: const Key('discover-empty'),
icon: Icons.movie_filter_outlined,
title: l10n.noStories,
subtitle: l10n.emptyHint,
),
);
Widget _dramaGrid(AppLocalizations l10n, List<Drama> dramas) {
return DramaGrid(l10n: l10n, dramas: dramas, onOpen: _openDrama);
}
Widget _sectionTitle(String title) {
Widget _categoryChips(AppLocalizations l10n, CategoryController categories) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 18, 14, 10),
child: Row(
padding: const EdgeInsets.fromLTRB(
AppDimens.pageHorizontal,
AppDimens.spaceMd,
AppDimens.pageHorizontal,
0,
),
child: Wrap(
key: const Key('theater-category-chips'),
spacing: 10,
runSpacing: 10,
children: [
Container(
width: 3,
height: 18,
decoration: BoxDecoration(
color: AppColors.blue,
borderRadius: BorderRadius.circular(2),
),
_filterChip(
key: const Key('theater-category-all'),
label: l10n.all,
selected: logic.selectedCategoryId == null,
onSelected: () => logic.selectCategory(null),
),
const SizedBox(width: 6),
Expanded(
child: Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: AppDimens.previewSectionTitle,
fontWeight: FontWeight.w800,
),
for (final category in categories.categories)
_filterChip(
key: Key('theater-category-${category.id}'),
label: category.name,
selected: logic.selectedCategoryId == category.id,
onSelected: () => logic.selectCategory(category.id),
),
),
],
),
);
}
Widget _languageChips(AppLocalizations l10n) {
final entries = [
(TheaterLanguage.all, l10n.allLanguages),
(TheaterLanguage.zh, l10n.simplifiedChinese),
(TheaterLanguage.id, l10n.bahasaIndonesia),
(TheaterLanguage.ms, l10n.bahasaMelayu),
(TheaterLanguage.en, l10n.english),
];
return Padding(
padding: const EdgeInsets.fromLTRB(
AppDimens.pageHorizontal,
AppDimens.spaceSm,
AppDimens.pageHorizontal,
0,
),
child: Wrap(
key: const Key('theater-language-chips'),
spacing: 10,
runSpacing: 10,
children: [
for (final entry in entries)
_filterChip(
key: Key('theater-language-${entry.$1.name}'),
label: entry.$2,
selected: logic.language == entry.$1,
onSelected: () => logic.selectLanguage(entry.$1),
),
],
),
);
}
Widget _filterChip({
required Key key,
required String label,
required bool selected,
required VoidCallback onSelected,
}) {
return ChoiceChip(
key: key,
label: Text(label),
selected: selected,
showCheckmark: false,
onSelected: (_) => onSelected(),
backgroundColor: AppColors.card,
selectedColor: AppColors.blue,
side: BorderSide(color: selected ? AppColors.blue : AppColors.border),
labelStyle: TextStyle(
color: selected ? AppColors.onPrimary : AppColors.onSurface,
fontSize: AppDimens.caption,
fontWeight: FontWeight.w700,
),
shape: const StadiumBorder(),
);
}
Widget _block(Widget child) =>
SizedBox(height: 280, child: Center(child: child));
void _openProfile() {
final callback = widget.callbacks.onProfile;
if (callback != null) {
@@ -291,54 +299,17 @@ class _DiscoverPageState extends State<DiscoverPage> {
);
}
void _openCategory(ContentCategory category, CategoryController categories) {
Navigator.of(context).push<void>(
MaterialPageRoute(
builder: (_) => CategoryDramasPage(
title: category.name,
dramas: categories.dramasOf(category.id),
onOpen: widget.callbacks.onDramaSelected == null ? null : _openDrama,
),
),
);
}
void _openDrama(Drama drama) {
final callback = widget.callbacks.onDramaSelected;
if (callback != null) {
callback(drama);
return;
}
_pushDetail(drama);
}
void _pushDetail(Drama drama) {
Navigator.of(context).push<void>(
MaterialPageRoute(builder: (_) => DramaDetailPage(drama: drama)),
);
}
Future<void> _openBanner(FeedBanner banner) async {
final dramaId = banner.dramaId;
if (dramaId == null) return;
for (final drama in context.read<CatalogController>().dramas) {
if (drama.id == dramaId) {
_pushDetail(drama);
return;
}
}
try {
final drama = await context.read<CatalogRepository>().fetchDrama(dramaId);
if (mounted) _pushDetail(drama);
} catch (_) {
if (!mounted) return;
final message = AppLocalizations.of(context)!.detailLoadFailed;
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text(message)));
}
}
Widget _bottomNav(AppLocalizations l10n) => AppBottomNav(
items: [
AppBottomNavItem(
@@ -352,7 +323,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
tabKey: const Key('discover-nav-current'),
icon: Icons.explore_outlined,
selectedIcon: Icons.explore_rounded,
label: l10n.discoverTab,
label: l10n.theaterTab,
selected: true,
onTap: () {},
),
@@ -365,8 +336,8 @@ class _DiscoverPageState extends State<DiscoverPage> {
),
AppBottomNavItem(
tabKey: const Key('discover-nav-my'),
icon: Icons.video_library_outlined,
selectedIcon: Icons.video_library_rounded,
icon: Icons.person_outline_rounded,
selectedIcon: Icons.person_rounded,
label: l10n.myTab,
onTap: () => _act(DiscoverPageAction.my),
),
lib/pages/discover/widgets/discover_header.dart
+31 -85
View File
@@ -3,37 +3,48 @@
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../l10n/app_localizations.dart';
import 'discover_search_field.dart';
/// 剧场页页头：品牌、搜索与个人页入口。
/// 剧场页页头：搜索与头像入口。
class DiscoverHeader extends StatelessWidget {
const DiscoverHeader({
super.key,
required this.onSearch,
required this.controller,
required this.focusNode,
required this.onChanged,
required this.loading,
required this.onProfile,
});
final VoidCallback onSearch;
final TextEditingController controller;
final FocusNode focusNode;
final ValueChanged<String> onChanged;
final bool loading;
final VoidCallback onProfile;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return SizedBox(
height: 46,
height: AppDimens.contentHeaderHeight,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.pageHorizontal,
),
child: Row(
children: [
_brand(l10n),
const Spacer(),
_HeaderIcon(
key: const Key('discover-search-button'),
icon: Icons.search_rounded,
tooltip: l10n.search,
onTap: onSearch,
Expanded(
child: DiscoverSearchField(
controller: controller,
focusNode: focusNode,
onChanged: onChanged,
loading: loading,
horizontalPadding: 0,
),
),
const SizedBox(width: 8),
const SizedBox(width: AppDimens.spaceSm),
_profile(l10n),
],
),
@@ -41,37 +52,6 @@ class DiscoverHeader extends StatelessWidget {
);
}
Widget _brand(AppLocalizations l10n) {
return 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,
),
),
const SizedBox(width: 8),
Text(
l10n.discoverTab,
style: const TextStyle(
fontFamily: 'Outfit',
color: AppColors.onSurface,
fontSize: 15,
fontWeight: FontWeight.w800,
),
),
],
);
}
Widget _profile(AppLocalizations l10n) {
return Semantics(
button: true,
@@ -81,54 +61,20 @@ class DiscoverHeader extends StatelessWidget {
customBorder: const CircleBorder(),
onTap: onProfile,
child: Container(
width: 36,
height: 36,
decoration: const BoxDecoration(
width: AppDimens.tapTarget,
height: AppDimens.tapTarget,
decoration: BoxDecoration(
color: AppColors.card,
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [AppColors.secondary, AppColors.blue],
),
border: Border.all(color: AppColors.border),
),
child: const Icon(
Icons.person_rounded,
color: AppColors.onPrimary,
size: 18,
color: AppColors.onSurface,
size: AppDimens.accountIcon,
),
),
),
);
}
}
class _HeaderIcon extends StatelessWidget {
const _HeaderIcon({
super.key,
required this.icon,
required this.tooltip,
required this.onTap,
});
final IconData icon;
final String tooltip;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return SizedBox(
width: 36,
height: 36,
child: IconButton(
tooltip: tooltip,
onPressed: onTap,
padding: EdgeInsets.zero,
style: IconButton.styleFrom(
backgroundColor: AppColors.raised,
foregroundColor: AppColors.onSurface,
),
icon: Icon(icon, size: 18),
),
);
}
}
lib/pages/discover/widgets/discover_search_field.dart
+9 -6
View File
@@ -3,6 +3,7 @@
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../l10n/app_localizations.dart';
/// 剧场顶部搜索框。
@@ -13,19 +14,21 @@ class DiscoverSearchField extends StatelessWidget {
required this.focusNode,
required this.onChanged,
required this.loading,
this.horizontalPadding = 14,
});
final TextEditingController controller;
final FocusNode focusNode;
final ValueChanged<String> onChanged;
final bool loading;
final double horizontalPadding;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
child: SizedBox(
height: 36,
height: AppDimens.searchHeight,
child: TextField(
key: const Key('discover-search'),
controller: controller,
@@ -33,13 +36,13 @@ class DiscoverSearchField extends StatelessWidget {
onChanged: onChanged,
onTapOutside: (_) => focusNode.unfocus(),
textInputAction: TextInputAction.search,
style: const TextStyle(color: AppColors.onSurface, fontSize: 13),
style: const TextStyle(color: AppColors.onSurface, fontSize: 14),
decoration: InputDecoration(
isDense: true,
filled: true,
fillColor: AppColors.input,
hintText: AppLocalizations.of(context)!.searchDiscover,
hintStyle: const TextStyle(color: AppColors.cream, fontSize: 11),
hintStyle: const TextStyle(color: AppColors.subtle, fontSize: 12),
prefixIcon: const Icon(
Icons.search_rounded,
color: AppColors.subtle,
@@ -53,11 +56,11 @@ class DiscoverSearchField extends StatelessWidget {
: null,
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
borderSide: const BorderSide(color: AppColors.blue, width: 1),
),
),
lib/pages/discover/widgets/feed_banner_carousel.dart
+49 -27
View File
@@ -39,9 +39,7 @@ class FeedBannerCarousel extends StatefulWidget {
}
class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
final PageController _controller = PageController(
viewportFraction: _viewportFraction,
);
late final PageController _controller;
Timer? _timer;
int _index = 0;
bool _pressed = false;
@@ -50,6 +48,9 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
@override
void initState() {
super.initState();
_controller = PageController(
viewportFraction: widget.dramaFor == null ? _viewportFraction : 1,
);
WidgetsBinding.instance.addPostFrameCallback((_) => _syncTimer());
}
@@ -116,28 +117,43 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
@override
Widget build(BuildContext context) {
if (widget.banners.isEmpty) return const SizedBox.shrink();
final height = widget.dramaFor == null
? _carouselHeight
: AppDimens.heroBannerHeight;
final hero = widget.dramaFor != null;
final height = hero ? AppDimens.heroBannerHeight : _carouselHeight;
final pages = PageView.builder(
controller: _controller,
itemCount: widget.banners.length,
onPageChanged: (value) => setState(() => _index = value),
itemBuilder: (context, index) => _bannerCard(index),
);
return Listener(
key: const Key('feed-banner-carousel'),
onPointerDown: (_) => _pause(),
onPointerUp: (_) => _resume(),
onPointerCancel: (_) => _resume(),
child: Column(
children: [
SizedBox(
height: height,
child: PageView.builder(
controller: _controller,
itemCount: widget.banners.length,
onPageChanged: (value) => setState(() => _index = value),
itemBuilder: (context, index) => _bannerCard(index),
child: hero
? SizedBox(
height: height,
child: Stack(
children: [
Positioned.fill(child: pages),
Positioned(
left: 0,
right: 0,
bottom: AppDimens.spaceXs,
child: SizedBox(
height: _indicatorHeight,
child: _indicator(context),
),
),
],
),
)
: Column(
children: [
SizedBox(height: height, child: pages),
SizedBox(height: _indicatorHeight, child: _indicator(context)),
],
),
),
SizedBox(height: _indicatorHeight, child: _indicator(context)),
],
),
);
}
@@ -146,7 +162,9 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
final dramaId = banner.dramaId;
final drama = widget.dramaFor?.call(banner);
final card = ClipRRect(
borderRadius: BorderRadius.circular(AppDimens.authCardRadius),
borderRadius: BorderRadius.circular(
drama == null ? AppDimens.authCardRadius : AppDimens.heroBannerRadius,
),
child: Stack(
fit: StackFit.expand,
children: [
@@ -158,7 +176,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
end: Alignment.bottomCenter,
colors: drama == null
? const [Color(0x00000000), Color(0x8A0B0C10)]
: const [Color(0x120B0C10), Color(0xE60B0C10)],
: const [Color(0x00000000), Color(0xE6000000)],
),
),
),
@@ -166,7 +184,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
Positioned(
left: AppDimens.pageHorizontal,
right: _copyRightGap,
bottom: AppDimens.cardPadding,
bottom: AppDimens.spaceXl + AppDimens.spaceSm,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@@ -179,7 +197,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
style: const TextStyle(
fontFamily: 'Outfit',
color: AppColors.onSurface,
fontSize: AppDimens.pageTitle,
fontSize: AppDimens.heroTitle,
fontWeight: FontWeight.w800,
),
),
@@ -190,24 +208,28 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.muted,
fontSize: AppDimens.caption,
fontSize: AppDimens.heroSubtitle,
),
),
],
),
),
if (dramaId != null)
if (dramaId != null && drama == null)
const Positioned(right: 14, bottom: 14, child: _PlayMark()),
],
),
);
final page = Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
padding: EdgeInsets.symmetric(horizontal: drama == null ? 5 : 0),
child: dramaId == null
? card
: Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(AppDimens.authCardRadius),
borderRadius: BorderRadius.circular(
drama == null
? AppDimens.authCardRadius
: AppDimens.heroBannerRadius,
),
clipBehavior: Clip.antiAlias,
child: InkWell(
key: Key('feed-banner-$index'),
lib/pages/home/home_browse_view.dart
+6 -1
View File
@@ -228,7 +228,12 @@ class _HomeBrowseViewState extends State<HomeBrowseView> {
Widget _hero(List<FeedBanner> banners, List<Drama> dramas) {
return Padding(
padding: const EdgeInsets.only(top: AppDimens.spaceMd),
padding: const EdgeInsets.fromLTRB(
AppDimens.pageHorizontal,
AppDimens.spaceMd,
AppDimens.pageHorizontal,
0,
),
child: FeedBannerCarousel(
key: const Key('home-hero-banner'),
banners: banners,