Flutter3.22.2中SliverAppBar设置背景色滑动显示颜色错误

在使用Flutter项目开发中，可能会有页面需要滑动收起标题栏的效果，一般都会使用SliverAppBar来实现，当项目的Flutter的SDK版本升级到3.4后，发现使用了SliverAppBar的页面，在滑动过程中，标题栏和状态栏的颜色不对，初始图：

滑动后（需要将头像收起，角色名称隐藏，只显示小头像和账号）：

预期是要滑动收起和初始状态的颜色要一致，都应该是浅绿色，代码如下：

 NestedScrollView(
              controller: scrollController,
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [
                SliverAppBar(
                  backgroundColor: mColors.colorBgGreen4,

                  /// 右侧图标
                  actions: [
                    GestureDetector(
                      child: Image.asset(
                        'images/icon/icon_customer_service.png',
                        width: 24,
                        height: 24,
                      ).initMargin(right: 12),
                      onTap: () {
                      },
                    ),
                    //右上角消息
                    MessageColumn()
                  ],
                  toolbarHeight: 44,
                  centerTitle: true,
                  pinned: true,
                  elevation: 0,
                  snap: false,
                  floating: false,
                  forceElevated: innerBoxIsScrolled,

                  /// 整个头部背景高度
                  expandedHeight: 84,

                  /// 头部标题
                  title: ValueListenableBuilder(
                    valueListenable: showTitle,
                    builder: (BuildContext context, dynamic value, Widget? child) {
                      return AnimatedOpacity(
                        opacity: value ? 1 : 0,
                        duration: const Duration(milliseconds: 300),
                        child: Offstage(
                          offstage: value ? false : true,
                          child: Container(
                            height: 44,
                            child: GestureDetector(
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    margin: EdgeInsets.only(left: 12, right: 8),
                                    child: Image.asset(
                                      "images/icon/icon_user_avatar.png",
                                      width: 28,
                                    ),
                                  ),
                                  Text(
                                    '187****0182',
                                    style: TextStyle(
                                        color: mColors.colorTitle,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ],
                              ),
                              onTap: () async {

                              },
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                  onStretchTrigger: () async => () {
                    return;
                  },
                  stretch: true,

                  /// 可以往下拉的最大距离
                  stretchTriggerOffset: 1,
                  flexibleSpace: FlexibleSpaceBar(
                    /// 整个头部背景
                    background: Container(
                      color: mColors.colorBgGreen4,
                      height: 60,
                      width: double.infinity,
                      margin: MediaQuery.of(context).padding,
                      child: UserInfo2Column(),
                    ),
                  ),
                ),
              ],
              body: Container(
                color: Color(0xfff3f5f7),
                child: SingleChildScrollView(
                    child: Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10.0), topRight:         Radius.circular(10.0))),
                  child: Container(
                    ),
                  ),
                )),
              ),
            )

无论怎么改都发现，似乎有一个百分百的颜色遮罩一样，backgroundColor设置成纯色，依然会有若隐若现的阴影，后来和大佬朋友讨论，说有没有可能是因为flutter版本升级后的版本差异，说干就干，将sdk版本降低到3.4以前，确实没有这个问题了。

怎么解决了，查阅一番资料后发现，3.4以后，APP的默认样式ThemeData改成了Material形式的，在项目入口处将MaterialApp的ThemeData添加一个参数useMaterial3: false,就完美解决了：

 MaterialApp(
          ///安卓切到后台会不显示app名字，需要加此参数
          title: 'xxxx',
          theme: ThemeData(
            useMaterial3: false,//添加此参数解决问题
            colorScheme: const ColorScheme.light(),
          ))

这个参数是什么意思呢，文档的解释：

A temporary flag that can be used to opt-out of Material 3 features

意思就是是否使用Material 3的样式，默认是true,后续高版本可能会取消这个参数的设置。

原文地址：https://blog.csdn.net/nanxuan521/article/details/143600567

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！