NestedScrollView and SliverAppBar and ExpansionPanelList looks well on debug mode but not well on release mode

[Guo-Zhang]

There is something wrong with NestedScrollView and SliverAppBar on Flutter for Web.

This is the UI with debug mode on the left and release mode on the right.

When the pinned for SliverAppBar changes to false, it works partly like this:

Code sample

import 'package:flutter/material.dart';

import '../models/course.dart';
import '../widgets/course_detail.dart';
import '../widgets/course_content.dart';
import '../widgets/pinned_bottom_bar.dart';


class CourseRoute extends StatelessWidget {
  /// 课程页面

  final List<String> tabs = <String>['详情', '目录'];

  final String courseTitle = 'Python编程入门';
  final String courseIntro = '第一门编程课，学习编程思想和Python语言';

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Stack(
        children: [
          DefaultTabController(
            // https://flutter.dev/docs/cookbook/design/tabs
            length: tabs.length,
            child: NestedScrollView(
              // https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
                return <Widget>[
                  CourseSliverAppBar(
                    courseTitle: courseTitle,
                    courseIntro: courseIntro,
                    tabs: tabs,
                    innerBoxIsScrolled: innerBoxIsScrolled,
                  )
                ];
              },
              body: CourseTabBarView(
                children: <Widget>[
                  // 列表长度等于tabs.length
                  CourseDetailList(),
                  CourseContent(),
                ]
              )
            ),
          )
          // CourseBottomWidget(),
        ]
      ),
    );
  }
}

class CourseSliverAppBar extends StatelessWidget {
  /// 课程页面SliverAppBar

  final String courseTitle;
  final String courseIntro;
  final List<String> tabs;
  final bool innerBoxIsScrolled;

  CourseSliverAppBar({
    required this.courseTitle,
    required this.courseIntro,
    required this.tabs,
    required this.innerBoxIsScrolled
  });

  @override
  Widget build(BuildContext context){
    return SliverOverlapAbsorber(
      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
      sliver: SliverAppBar(
          expandedHeight: 200,
          pinned: true,
          forceElevated: innerBoxIsScrolled,
          // 头部
          title: Text(courseTitle),
          centerTitle: true,
          flexibleSpace: FlexibleSpaceBar(
            // https://api.flutter.dev/flutter/material/FlexibleSpaceBar-class.html
            title: Text(courseIntro),
            titlePadding: EdgeInsets.all(50),
          ),
          // 底部
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(40),  // 临时设一个高度
            child: TabBar(
              /// 标签栏
              tabs: tabs.map((String name) => Tab(text: name)).toList(),
            ),
          )
      ),
    );
  }
}

class CourseTabBarView extends StatelessWidget {
  /// 课程页面标签视图

  final List<Widget> children;

  CourseTabBarView({
    required this.children
  });

  @override
  Widget build(BuildContext context) {
    return TabBarView(
      children: children.map((Widget child){
        return SafeArea(
          top: false,
          bottom: true,  // 底部小概率可能有不规则
          child: CustomScrollView(
            slivers: [
              SliverOverlapInjector(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              ),
              SliverToBoxAdapter(
                child: child,
              )
            ],
          )
        );
      }).toList(),
    );
  }
}

Logs

There is no useful log for the situation since everyone looks the same.

flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, 2.6.0-5.1.pre, on macOS 11.6 20G165 darwin-x64, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.5.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.61.0)
[✓] Connected device (2 available)

• No issues found!

debug mode:

Performing hot restart...
Waiting for connection from debug service on Chrome...
Restarted application in 728ms.

release mode:

Launching lib/main.dart on Chrome in release mode...
Compiling lib/main.dart for the Web...

[Guo-Zhang]

Both tabviews use ExpansionPanelList widget. Maybe there is something wrong with that. I find that Android comes with a warning on doing too much work.

Log for Android

Performing hot reload...
Syncing files to device Android SDK built for x86...
Reloaded 1 of 663 libraries in 4,788ms.
I/Choreographer(26377): Skipped 32 frames!  The application may be doing too much work on its main thread.

Additional Code sample

class CourseContent extends StatelessWidget {
  /// 课程目录，基于ExpansionPanelList组件实现。
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      // ExpansionPanelList需要可无限扩展的父组件
        child: ExpansionPanelList(
            children: [
              ExpansionPanel(
                  headerBuilder: (BuildContext context, bool isExpanded){
                    return Text('章1');
                  },
                  body: Text('课时1')
              )
            ]
        )
    );
  }
}

Details

class CourseDetailList extends StatelessWidget {
  /// 课程详情列表组件

  final List<Map<String, dynamic>> items = [
    {
      'title': '想入门编程的产品或运营',
      'description': '想入门编程的产品或运营，想入门编程的产品或运营，想入门编程的产品或运营',
    },
    {
      'title': '想系统学习编程的开发',
      'description': '想系统学习编程的开发，想系统学习编程的开发，想系统学习编程的开发'
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          // 面向人群
          CourseDetail(
            icon: Icons.people,
            title: '面向人群',
            items: items.map<CourseDetailItemModel>(
                    (Map<String, dynamic> item)=>CourseDetailItemModel.fromMap(item)
            ).toList(),
          ),
          // 教学目标
          CourseDetail(
            icon: Icons.flag,
            title: '教学目标',
            items: items.map<CourseDetailItemModel>(
                    (Map<String, dynamic> item)=>CourseDetailItemModel.fromMap(item)
            ).toList(),
          )
        ]
    );
  }
}

class CourseDetail extends StatefulWidget {
  /// 课程详情组件
  ///
  /// 课程详情列表组件由多个课程详情组件组成

  /// 小图标
  final IconData icon;
  /// 标题
  final String title;
  /// 详情
  final List<CourseDetailItemModel> items;

  CourseDetail({
    required this.icon,
    required this.title,
    required this.items,
  });

  @override
  State<CourseDetail> createState() => CourseDetailState();
}

class CourseDetailState extends State<CourseDetail> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListTile(
          // 组件头部
          leading: Icon(widget.icon), // 小图标
          title: Text(widget.title),  // 标题
        ),
        ExpansionPanelList(
          // 组件内容
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              widget.items[index].isExpanded = !isExpanded;
            });
          },
          children: widget.items.map<ExpansionPanel>(
            (item) => ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return Text(item.title);
              },
              body: Text(item.description),
              isExpanded: item.isExpanded,
            ),
          ).toList(),
        ),
      ]
    );
  }
}

[danagbemava-nc]

Hi @Guo-Zhang, your sample seems to be missing the implementation of CourseDetailItemModel.

Please provide the implementation.

Thank you

[Guo-Zhang]

This is only a JSON serializer.

class CourseDetailItemModel {
  String title;
  String description;
  bool isExpanded;

  CourseDetailItemModel({
    required this.title,
    required this.description,
    this.isExpanded = false,
  });

  factory CourseDetailItemModel.fromMap(Map<String, dynamic> data){
    return CourseDetailItemModel(
      title: data['title'],
      description: data['description'],
    );
  }
}

All classes named Model are like this. It does not affect the UI.

[danagbemava-nc]

@Guo-Zhang, while I can reproduce this on stable and dev channels, I can't seem to reproduce it on the latest master.

Can you also check on master to see if you can reproduce it?

Thank you

[Guo-Zhang]

It works! I will use master channel at present.

And it does not work on cloud, see:
https://qtclass-web-dev-1256954489.cos-website.ap-shanghai.myqcloud.com

I use stable channel in my Dockerfile:

# 拉取基础镜像
FROM ubuntu

# 设置为root用户
USER root

# 安装系统依赖
RUN apt-get update \
    && apt-get install -y git bash curl file unzip xz-utils zip libgl1-mesa-dev

# 安装Flutter SDK
RUN mkdir /sdk
WORKDIR /sdk
RUN git clone --progress --verbose https://github.com/flutter/flutter.git -b stable

# 添加环境变量
ENV PATH /sdk/flutter/bin:$PATH
ENV PUB_HOSTED_URL https://pub.flutter-io.cn
ENV FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

# Flutter 测试
RUN flutter doctor

Flutter 2.6.0-12.0.pre.379 • channel master • https://github.com/flutter/flutter.git
Framework • revision 93da78f896 (2 days ago) • 2021-10-16 07:18:02 -0400
Engine • revision faa45f497f
Tools • Dart 2.15.0 (build 2.15.0-226.0.dev)

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 2.6.0-12.0.pre.379, on macOS 11.6 20G165 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 12.5.1)
    ! Flutter recommends a minimum Xcode version of 13.0.0.
      Download the latest version or update via the Mac App Store.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.61.0)
[✓] Connected device (2 available)

! Doctor found issues in 1 category.

[danagbemava-nc]

It works! I will use master channel at present.

Based on this comment, I feel it is safe to close this issue as fixed.

As such I will be closing it.

If you still experience this issue, kindly leave a comment and I will reopen.

Thank you