Flutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded. Using Expandable listview

Question

I want to design this layout:

I am using a expandable listview inside a column. I was add ListView.builder inside Expanded but still problem continue.

What is the wrong?

This is my code:

Parent page:

class LearningCoursePage extends StatefulWidget {
  String courseId;
  LearningCoursePage({Key? key, required this.courseId}) : super(key: key);

  @override
  State<LearningCoursePage> createState() => _LearningCoursePageState();
}

class _LearningCoursePageState extends State<LearningCoursePage> {
  CourseModel? courseModel;

  Future<void> _loadResource() async {
    courseModel = await Get.find<CourseController>().getCourseById(widget.courseId);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: _loadResource(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return Scaffold(
            appBar: AppBar(
              centerTitle: true,
              backgroundColor: AppColors.yellowColor,
              title: courseModel != null ? Text(courseModel!.name.toString()) : Text("Loading..."),
              leading: IconButton(
                icon: Icon(Icons.close),
                onPressed: () {},
              ),
            ),
            body: GetBuilder<AuthController>(builder: (authController) {
              return authController.userLoggedIn() ? Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(Dimensions.radius20),
                    boxShadow: [
                      BoxShadow(
                          color: Color(0xFFe8e8e8),
                          blurRadius: 5.0,
                          offset: Offset(0, 5)
                      ),
                      BoxShadow(
                          color: Colors.white,
                          offset: Offset(-5, 0)
                      ),
                      BoxShadow(
                          color: Colors.white,
                          offset: Offset(5, 0)
                      ),
                    ]
                ),
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(height: 40,),
                      BigText(text: "Vui lòng đăng nhập để xác minh tài khoản"),
                      SizedBox(height: 20,),
                      SizedBox(height: 20,),
                      GestureDetector(
                        onTap: (){
                          Get.toNamed(RouteHelper.getSignInPage());
                        },
                        child: Container(
                          width: Dimensions.screenWidth/2,
                          height: Dimensions.screenHeight/13,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(Dimensions.radius15),
                              color: AppColors.yellowColor
                          ),
                          child: Center(
                            child: BigText(
                              text: "ĐĂNG NHẬP",
                              size: Dimensions.font20+Dimensions.font20/2,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 40,),
                    ],
                  ),
                ),
              ) :
                  SingleChildScrollView(
                      child: Container(
                        child: Column(
                          children: [
                            Container(
                              height: 400,
                              decoration: BoxDecoration(
                                  image: DecorationImage(
                                      fit: BoxFit.cover,
                                      image: AssetImage("assets/image/test.jpg")
                                  )
                              ),
                            ),
                            Container(
                                width: double.infinity,
                                color: AppColors.mainBlackColor,
                                child: Container(
                                  margin: EdgeInsets.only(left: Dimensions.width20, right: Dimensions.width20),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      SizedBox(height: 30,),
                                      BigText(text: (courseModel != null ? courseModel!.name.toString().toUpperCase() : "Loading..."), size: 20, color: AppColors.whiteColor,),
                                      SizedBox(height: 30,),
                                      BigText(text: "Bạn hoàn thành 3 trong 59 bài giảng", size: 16, color: AppColors.whiteColor,),
                                      SizedBox(height: 30,),
                                      LinearPercentIndicator(
                                        animation: true,
                                        animationDuration: 1000,
                                        lineHeight: 40.0,
                                        backgroundColor: Colors.white,
                                        percent: 0.2,
                                        padding: EdgeInsets.only(right: 0),
                                        center: Text("20.0%"),
                                        trailing: Container(
                                          color: AppColors.yellowColor,
                                          padding: EdgeInsets.only(left: 10, right: 10),
                                          alignment: Alignment.center,
                                          height: 40,
                                          child: SmallText(text: "hoàn thành", size: 16, color: AppColors.whiteColor,),
                                        ),
                                        linearStrokeCap: LinearStrokeCap.butt,
                                        progressColor: AppColors.yellowColor,
                                      ),
                                      SizedBox(height: 30,),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          SelectButtonWidget(text: 'Vào học ngay', isSelect: true, width: Dimensions.screenWidth/2.5,),
                                          SelectButtonWidget(text: 'Hướng dẫn học', width: Dimensions.screenWidth/2.5,),
                                        ],
                                      ),
                                      SizedBox(height: 30,),
                                      SelectButtonWidget(text: 'Xem mẫu chứng chỉ hoàn thành',),
                                      SizedBox(height: 60,),
                                    ],
                                  ),
                                )
                            ),
                            Container(
                              width: double.infinity,
                              color: AppColors.greyColor,
                              child: Container(
                                margin: EdgeInsets.only(left: Dimensions.width20, right: Dimensions.width20),
                                child: Column(
                                  children: [
                                    SizedBox(height: 30,),
                                    LearningCourseBody(courseModel: courseModel,)
                                  ],
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                  );
            }),
          );
        },
    );
  }
}

The body page (cluster layout with gray background color):

class LearningCourseBody extends StatefulWidget {
  CourseModel? courseModel;
  LearningCourseBody({Key? key, this.courseModel}) : super(key: key);

  @override
  State<LearningCourseBody> createState() => _LearningCourseBodyState();
}

class _LearningCourseBodyState extends State<LearningCourseBody> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SelectButtonWidget(text: 'Tổng quan', isSelect: true, width: Dimensions.screenWidth/3.5,),
            SelectButtonWidget(text: 'Bài học', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
            SelectButtonWidget(text: 'Tài liệu', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
          ],
        ),
        SizedBox(height: 30,),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(width: 5,),
            SelectButtonWidget(text: 'Hỏi & đáp', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
            SizedBox(width: 5,),
            SelectButtonWidget(text: 'Ghi chép', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
            SizedBox(width: 5,),
          ],
        ),
        SizedBox(height: 60,),
        // OverviewCourse(courseModel: widget.courseModel, rating: 5,)
        (widget.courseModel != null && widget.courseModel!.particalsCourse != null) ? Expanded(child: ExpandableListViewWidget(courseModel: widget.courseModel!,)) : Text('Loading....'),
      ],
    );
  }
}

And this is the expandable lisview:

class ExpandableListViewWidget extends StatefulWidget {
  CourseModel courseModel;
  ExpandableListViewWidget({Key? key, required this.courseModel}) : super(key: key);

  @override
  State<ExpandableListViewWidget> createState() => _ExpandableListViewWidgetState();
}

class _ExpandableListViewWidgetState extends State<ExpandableListViewWidget> {
  
  List<Widget> _buildExpandList(int index) {
    List<Widget> res = [];
    if (widget.courseModel.particalsCourse![index].lessons == null) return res;
    for (var sub in widget.courseModel.particalsCourse![index].lessons!) {
      var s = ListTile(
        title: Text(sub.title!),
        leading: Icon(Icons.play_circle),
        trailing: sub.isTrial! ? SmallText(text: 'học thử', color: AppColors.yellowColor,) : Text(sub.timeLearning!.toString()),
      );
      res.add(s);
    }
    return res;
  }
  
  @override
  Widget build(BuildContext context) {
    List<bool> tileExpanded = List<bool>.generate(widget.courseModel.particalsCourse!.length, (index) => false);
    return ListView.builder(
        itemCount: widget.courseModel.particalsCourse!.length,
        itemBuilder: (context, index) {
          return Container(
            child: ExpansionTile(
              title: Text(widget.courseModel.particalsCourse![index].title!),
              controlAffinity: ListTileControlAffinity.leading,
              leading: Icon(
                tileExpanded[index] ? Icons.arrow_drop_up : Icons.arrow_drop_down
              ),
              children: _buildExpandList(index),
              onExpansionChanged: (bool expanded) {
                setState(() => tileExpanded[index] = expanded);
              },
            ),
          );
        }
    );
  }
}

Hope your help? Thanks!!!

Answer 1

Finally, I was resolve this problem. This is my step:

Step 1: Column use mainAxisSize: MainAxisSize.min

Step 2: Change Expanded to Flexible

Step 3: Adding this two lines in ExpandableListViewWidget

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...