fix(flutter): 修复详情与播放器底部闪白

lib/app.dart

@@ -50,6 +50,16 @@ import 'core/theme/app_colors.dart';
 import 'l10n/app_localizations.dart';
 import 'pages/home/home_view.dart';
 
+/// 全局系统栏样式：浅暖导航栏、关闭 Android 对比遮罩。
+final SystemUiOverlayStyle appSystemOverlayStyle = SystemUiOverlayStyle.dark
+    .copyWith(
+      statusBarColor: Colors.transparent,
+      systemNavigationBarColor: AppColors.ink,
+      systemNavigationBarDividerColor: Colors.transparent,
+      systemNavigationBarIconBrightness: Brightness.dark,
+      systemNavigationBarContrastEnforced: false,
+    );
+
 class LumaDramaApp extends StatefulWidget {
   const LumaDramaApp({
     super.key,
@@ -263,11 +273,7 @@ class _LumaDramaAppState extends State<LumaDramaApp> {
           theme: AppTheme.light(),
           darkTheme: AppTheme.light(),
           builder: (context, child) => AnnotatedRegion<SystemUiOverlayStyle>(
-            value: SystemUiOverlayStyle.dark.copyWith(
+            value: appSystemOverlayStyle,
-              statusBarColor: Colors.transparent,
-              systemNavigationBarColor: AppColors.bar,
-              systemNavigationBarIconBrightness: Brightness.dark,
-            ),
             child: child ?? const SizedBox.shrink(),
           ),
           home: const HomePage(),

lib/core/theme/app_theme.dart

@@ -107,6 +107,11 @@ abstract final class AppTheme {
           side: BorderSide(color: AppColors.border),
         ),
       ),
+      bottomSheetTheme: const BottomSheetThemeData(
+        backgroundColor: Colors.transparent,
+        modalBackgroundColor: Colors.transparent,
+        surfaceTintColor: Colors.transparent,
+      ),
       switchTheme: SwitchThemeData(
         thumbColor: WidgetStateProperty.resolveWith(
           (states) => states.contains(WidgetState.selected)

lib/pages/drama_detail/drama_detail_view.dart

@@ -3,6 +3,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
 import '../../core/data/models/drama.dart';
@@ -83,11 +84,21 @@ class _DramaDetailPageState extends State<DramaDetailPage> {
 
   @override
   Widget build(BuildContext context) {
-    return Theme(
+    return AnnotatedRegion<SystemUiOverlayStyle>(
-      data: AppTheme.light(),
+      key: const Key('detail-system-overlay'),
-      child: ListenableBuilder(
+      value: SystemUiOverlayStyle.dark.copyWith(
-        listenable: logic,
+        statusBarColor: Colors.transparent,
-        builder: (context, _) => _page(context),
+        systemNavigationBarColor: AppColors.ink,
+        systemNavigationBarDividerColor: Colors.transparent,
+        systemNavigationBarIconBrightness: Brightness.dark,
+        systemNavigationBarContrastEnforced: false,
+      ),
+      child: Theme(
+        data: AppTheme.light(),
+        child: ListenableBuilder(
+          listenable: logic,
+          builder: (context, _) => _page(context),
+        ),
       ),
     );
   }

lib/pages/player/player_view.dart

@@ -238,7 +238,14 @@ class _PlayerPageState extends State<PlayerPage> with WidgetsBindingObserver {
       ],
     );
     return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: SystemUiOverlayStyle.dark,
+      key: const Key('player-system-overlay'),
+      value: SystemUiOverlayStyle.light.copyWith(
+        statusBarColor: Colors.transparent,
+        systemNavigationBarColor: Colors.black,
+        systemNavigationBarDividerColor: Colors.transparent,
+        systemNavigationBarIconBrightness: Brightness.light,
+        systemNavigationBarContrastEnforced: false,
+      ),
       child: Theme(
         data: AppTheme.light(),
         child: widget.embedded

lib/pages/player/widgets/episode_picker_sheet.dart

@@ -1,6 +1,7 @@
 // Author: fruit.com.cn
 
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import '../../../core/data/models/drama.dart';
 import '../../../core/formatting/localized_content.dart';
@@ -37,93 +38,106 @@ class EpisodePickerSheet extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     final episodes = drama.episodes;
-    return Container(
+    return AnnotatedRegion<SystemUiOverlayStyle>(
-      key: const Key('player-episodes-sheet'),
+      key: const Key('player-episodes-system-overlay'),
-      height: MediaQuery.sizeOf(context).height * _sheetHeightFactor,
+      value: SystemUiOverlayStyle.dark.copyWith(
-      decoration: const BoxDecoration(
+        statusBarColor: Colors.transparent,
-        color: AppColors.card,
+        systemNavigationBarColor: AppColors.card,
-        borderRadius: BorderRadius.vertical(top: Radius.circular(_sheetRadius)),
+        systemNavigationBarDividerColor: Colors.transparent,
+        systemNavigationBarIconBrightness: Brightness.dark,
+        systemNavigationBarContrastEnforced: false,
       ),
-      child: SafeArea(
+      child: Container(
-        top: false,
+        key: const Key('player-episodes-sheet'),
-        child: Column(
+        height: MediaQuery.sizeOf(context).height * _sheetHeightFactor,
-          crossAxisAlignment: CrossAxisAlignment.start,
+        decoration: const BoxDecoration(
-          children: [
+          color: AppColors.card,
-            Padding(
+          borderRadius: BorderRadius.vertical(
-              padding: const EdgeInsets.fromLTRB(20, 14, 8, 4),
+            top: Radius.circular(_sheetRadius),
-              child: Row(
+          ),
-                children: [
+        ),
-                  Expanded(
+        child: SafeArea(
-                    child: Text(
+          top: false,
-                      l10n.episodes,
+          bottom: true,
-                      style: const TextStyle(
+          child: Column(
-                        color: AppColors.onSurface,
+            crossAxisAlignment: CrossAxisAlignment.start,
-                        fontSize: 20,
+            children: [
-                        fontWeight: FontWeight.w800,
+              Padding(
+                padding: const EdgeInsets.fromLTRB(20, 14, 8, 4),
+                child: Row(
+                  children: [
+                    Expanded(
+                      child: Text(
+                        l10n.episodes,
+                        style: const TextStyle(
+                          color: AppColors.onSurface,
+                          fontSize: 20,
+                          fontWeight: FontWeight.w800,
+                        ),
                       ),
                     ),
-                  ),
+                    IconButton(
-                  IconButton(
+                      key: const Key('player-episodes-close'),
-                    key: const Key('player-episodes-close'),
+                      tooltip: l10n.close,
-                    tooltip: l10n.close,
+                      onPressed: () => Navigator.pop(context),
-                    onPressed: () => Navigator.pop(context),
+                      icon: const Icon(Icons.close_rounded),
-                    icon: const Icon(Icons.close_rounded),
-                  ),
-                ],
-              ),
-            ),
-            Padding(
-              padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
-              child: Row(
-                children: [
-                  Expanded(
-                    child: Text(
-                      localizedDramaTitle(l10n, drama),
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
-                      style: const TextStyle(
-                        color: AppColors.onSurface,
-                        fontSize: 14,
-                        fontWeight: FontWeight.w600,
-                      ),
                     ),
-                  ),
+                  ],
-                  Text(
-                    l10n.episodeCountLabel(episodes.length),
-                    style: const TextStyle(
-                      color: AppColors.muted,
-                      fontSize: 12,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            Expanded(
-              child: GridView.builder(
-                padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
-                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                  crossAxisCount: _columns,
-                  mainAxisSpacing: AppDimens.spaceSm,
-                  crossAxisSpacing: AppDimens.spaceSm,
-                  childAspectRatio: _cellAspect,
                 ),
-                itemCount: episodes.length,
-                itemBuilder: (context, index) {
-                  final episode = episodes[index];
-                  return EpisodePickerCell(
-                    key: Key('player-episode-${episode.number}'),
-                    episode: episode,
-                    selected: episode.number == currentNumber,
-                    lockLabel: l10n.locked,
-                    onTap: () {
-                      Navigator.pop(context);
-                      onSelect(index);
-                    },
-                  );
-                },
               ),
-            ),
+              Padding(
-          ],
+                padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
+                child: Row(
+                  children: [
+                    Expanded(
+                      child: Text(
+                        localizedDramaTitle(l10n, drama),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          color: AppColors.onSurface,
+                          fontSize: 14,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ),
+                    Text(
+                      l10n.episodeCountLabel(episodes.length),
+                      style: const TextStyle(
+                        color: AppColors.muted,
+                        fontSize: 12,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              Expanded(
+                child: GridView.builder(
+                  padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: _columns,
+                    mainAxisSpacing: AppDimens.spaceSm,
+                    crossAxisSpacing: AppDimens.spaceSm,
+                    childAspectRatio: _cellAspect,
+                  ),
+                  itemCount: episodes.length,
+                  itemBuilder: (context, index) {
+                    final episode = episodes[index];
+                    return EpisodePickerCell(
+                      key: Key('player-episode-${episode.number}'),
+                      episode: episode,
+                      selected: episode.number == currentNumber,
+                      lockLabel: l10n.locked,
+                      onTap: () {
+                        Navigator.pop(context);
+                        onSelect(index);
+                      },
+                    );
+                  },
+                ),
+              ),
+            ],
+          ),
         ),
       ),
     );

test/drama_detail/drama_detail_view_test.dart

@@ -1,6 +1,7 @@
 // Author: fruit.com.cn
 
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -53,6 +54,11 @@ void main() {
   ) async {
     await _pumpDetail(tester);
 
+    final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
+      find.byKey(const Key('detail-system-overlay')),
+    );
+    expect(overlay.value.systemNavigationBarColor, AppColors.ink);
+    expect(overlay.value.systemNavigationBarContrastEnforced, isFalse);
     expect(find.byKey(const Key('detail-hero')), findsOneWidget);
     expect(
       tester.getSize(find.byKey(const Key('detail-poster'))),
@@ -92,6 +98,10 @@ void main() {
     expect(find.byKey(const Key('detail-tags')), findsOneWidget);
     expect(find.byKey(const Key('detail-episodes-section')), findsOneWidget);
     expect(tester.getSize(find.byKey(const Key('detail-cta'))).height, 46);
+    final bottomBar = tester.widget<Container>(
+      find.byKey(const Key('detail-bottom-bar')),
+    );
+    expect((bottomBar.decoration! as BoxDecoration).color, AppColors.ink);
     expect(find.byKey(const Key('detail-share')), findsOneWidget);
     expect(find.byKey(const Key('detail-more')), findsOneWidget);
     for (final key in const [Key('detail-share'), Key('detail-more')]) {

test/player/player_fullscreen_test.dart

@@ -1,6 +1,7 @@
 // Author: fruit.com.cn
 
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
 import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
@@ -50,6 +51,16 @@ void main() {
     expect(tester.takeException(), isNull);
   });
 
+  testWidgets('should_use_black_system_navigation_bar_on_feed_and_player', (
+    tester,
+  ) async {
+    await _pumpApp(tester);
+    _expectPlayerNavigationBar(tester);
+
+    await _openSeriesPlayer(tester);
+    _expectPlayerNavigationBar(tester);
+  });
+
   testWidgets('should_fall_back_to_black_when_poster_is_empty', (tester) async {
     await _pumpApp(
       tester,
@@ -716,6 +727,20 @@ void main() {
     final delegate =
         grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
     expect(delegate.crossAxisCount, 6);
+    final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
+      find.byKey(const Key('player-episodes-system-overlay')),
+    );
+    expect(overlay.value.systemNavigationBarColor, AppColors.card);
+    expect(overlay.value.systemNavigationBarContrastEnforced, isFalse);
+    final safeArea = tester.widget<SafeArea>(
+      find
+          .descendant(
+            of: find.byKey(const Key('player-episodes-sheet')),
+            matching: find.byType(SafeArea),
+          )
+          .first,
+    );
+    expect(safeArea.bottom, isTrue);
     expect(tester.takeException(), isNull);
   });
 
@@ -969,6 +994,16 @@ void main() {
   });
 }
 
+void _expectPlayerNavigationBar(WidgetTester tester) {
+  final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
+    find.byKey(const Key('player-system-overlay')).last,
+  );
+  expect(overlay.value.systemNavigationBarColor, Colors.black);
+  expect(overlay.value.systemNavigationBarDividerColor, Colors.transparent);
+  expect(overlay.value.systemNavigationBarContrastEnforced, isFalse);
+  expect(overlay.value.systemNavigationBarIconBrightness, Brightness.light);
+}
+
 void _expectFullscreenOverlay(WidgetTester tester) {
   expect(find.byKey(const Key('player-back')), findsOneWidget);
   expect(find.byKey(const Key('player-episode-heading')), findsOneWidget);

test/theme/app_theme_test.dart

@@ -2,8 +2,10 @@
 
 import 'dart:math';
 
+import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/app.dart';
 import 'package:fruitshorts/core/theme/app_colors.dart';
 import 'package:fruitshorts/core/theme/app_theme.dart';
 
@@ -50,6 +52,25 @@ void main() {
     expect(theme.appBarTheme.systemOverlayStyle, SystemUiOverlayStyle.dark);
   });
 
+  test('should_use_ink_navigation_bar_without_contrast_scrim', () {
+    expect(appSystemOverlayStyle.statusBarColor, Colors.transparent);
+    expect(appSystemOverlayStyle.systemNavigationBarColor, AppColors.ink);
+    expect(
+      appSystemOverlayStyle.systemNavigationBarDividerColor,
+      Colors.transparent,
+    );
+    expect(
+      appSystemOverlayStyle.systemNavigationBarIconBrightness,
+      Brightness.dark,
+    );
+    expect(appSystemOverlayStyle.systemNavigationBarContrastEnforced, isFalse);
+
+    final sheetTheme = AppTheme.light().bottomSheetTheme;
+    expect(sheetTheme.backgroundColor, Colors.transparent);
+    expect(sheetTheme.modalBackgroundColor, Colors.transparent);
+    expect(sheetTheme.surfaceTintColor, Colors.transparent);
+  });
+
   test('should_expose_page_gradient_and_soft_card_shadow', () {
     expect(AppTheme.pageGradient.colors, [AppColors.surfaceTop, AppColors.ink]);
     expect(AppTheme.cardShadow.color, AppColors.cardShadow);