Flutter如何实现背景图铺满系统底部导航栏，仅用Dart实现无需Java

解决方法 #

你设置systemNavigationBarColor: Colors.transparent不生效有两个核心原因，仅需修改两处Dart代码即可实现效果：

1. 系统默认开启了导航栏对比度强制开关，会自动给透明导航栏加半透明遮罩覆盖底层内容
2. Scaffold默认不会把内容延伸到系统导航栏区域，背景自然铺不到对应位置

修改后的完整代码：

import 'dart:ui';

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

class MusicPlayPage extends StatefulWidget {
  const MusicPlayPage({Key? key}) : super(key: key);

  @override
  _MusicPlayPageState createState() => _MusicPlayPageState();
}

class _MusicPlayPageState extends State<MusicPlayPage> {
  double nowSliderValue = 0.0;

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: null,
      statusBarColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark,
      // 新增：关闭导航栏对比度强制，避免系统自动加遮罩
      systemNavigationBarContrastEnforced: false,
    ));
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('asserts/images/thz.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 100.0, sigmaY: 100.0),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          // 新增：让页面内容延伸到系统导航栏下方
          extendBody: true,
          appBar: AppBar(
            title: const Text('云舒音乐'),
            elevation: 0,
            backgroundColor: Colors.transparent,
          ),
          body: Container(),
          bottomNavigationBar: SizedBox(
            height: 112.0,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  margin: EdgeInsetsDirectional.only(
                      start: 16.0, end: 16.0, bottom: 12.0),
                  child: Flex(
                    direction: Axis.horizontal,
                    children: [
                      Expanded(
                        child: Text(
                          '02:05',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Expanded(
                        flex: 8,
                        child: Container(
                          margin:
                              EdgeInsetsDirectional.only(start: 6.0, end: 6.0),
                          child: SliderTheme(
                            data: SliderTheme.of(context).copyWith(
                              trackHeight: 2,
                              thumbShape: RoundSliderThumbShape(
                                enabledThumbRadius: 4,
                              ),
                              overlayShape: RoundSliderOverlayShape(
                                overlayRadius: 10, 
                              ),
                            ),
                            child: Slider(
                              min: 0,
                              max: 60,
                              onChanged: (double value) {
                                setState(() {
                                  nowSliderValue = value;
                                });
                              },
                              value: nowSliderValue,
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Text(
                          '04:45',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    IconButton(
                      color: Colors.white,
                      iconSize: 35,
                      icon: Icon(Icons.skip_previous_outlined),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.play_arrow),
                      color: Colors.white,
                      iconSize: 35,
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.skip_next_outlined),
                      color: Colors.white,
                      iconSize: 35,
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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