Flutter中Android设备WebView场景下调整屏幕底部栏颜色

针对你遇到的底部黑色区域无法与UI融合的问题，以下是几个可行的解决方案：

方案一：调整SafeArea与WebView的嵌套逻辑+系统导航栏适配 #

不要将SafeArea嵌套在Container内，反过来用Container设置全局背景，配合SafeArea关闭底部安全区域限制，同时统一Android系统导航栏颜色：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 适配Android导航栏颜色，与UI背景统一
    if (Theme.of(context).platform == TargetPlatform.android) {
      SystemChrome.setSystemUIOverlayStyle(
        const SystemUiOverlayStyle(
          navigationBarColor: Colors.white,
          navigationBarIconBrightness: Brightness.dark,
        ),
      );
    }

    return Scaffold(
      body: Container(
        color: Colors.white, // 全局背景色覆盖底部空白区域
        child: SafeArea(
          bottom: false, // 关闭底部安全区域限制，让WebView延伸至屏幕底部
          child: WebView(
            initialUrl: '你的网页链接',
            javascriptMode: JavascriptMode.unrestricted,
          ),
        ),
      ),
    );
  }
}

方案二：手动添加底部背景容器覆盖黑色区域 #

如果方案一仍有残留黑色区域，可通过MediaQuery获取底部安全区域高度，专门添加容器覆盖：

return Scaffold(
  body: Stack(
    children: [
      SafeArea(
        child: WebView(
          initialUrl: '你的网页链接',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
      // 底部容器覆盖系统预留的黑色区域
      Positioned(
        left: 0,
        right: 0,
        bottom: 0,
        height: MediaQuery.of(context).padding.bottom,
        child: const Container(color: Colors.white),
      ),
    ],
  ),
);

方案三：直接设置WebView背景色 #

WebView默认背景可能为黑色，直接将其背景色与UI统一：

WebView(
  initialUrl: '你的网页链接',
  javascriptMode: JavascriptMode.unrestricted,
  backgroundColor: Colors.white, // 同步WebView背景色
)

核心注意事项 #

• Android端必须确保系统导航栏颜色与UI背景一致，否则即使WebView延伸至底部，导航栏本身的颜色仍会显式分离。
• 避免将SafeArea嵌套在Container内，这种结构会导致SafeArea的安全区域留白无法被背景完全覆盖，无法触达屏幕最底部的系统预留区域。

内容的提问来源于stack exchange，提问作者PlatformDating