Nested listview causing issue in Flutter

Question

I want to have nested listview where there will be vertical listview inside a horizontal listview and that will be wrapped with SingleChildScrollView because I want to scroll all the vertical lists together.

So here's what I have done

Expanded(
                    child: Stack(
                  children: [
                    Container(
                      height: double.infinity,
                      width: double.infinity,
                      decoration: BoxDecoration(
                          gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Theme.of(context).primaryColorDark,
                          Theme.of(context).primaryColorLight,
                        ],
                      )),
                    ),
                    SingleChildScrollView(
                        scrollDirection: Axis.vertical,
                        physics: const BouncingScrollPhysics(),
                        child: SizedBox(
                          height: 200.w,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            physics: const BouncingScrollPhysics(),
                            itemCount: 5,
                            itemBuilder: (context, index) {
                              return SizedBox(
                                height: double.infinity,
                                width: 24.w,
                                child: Column(
                                  children: [
                                    Container(
                                        width: double.infinity,
                                        padding: EdgeInsets.fromLTRB(
                                            0.w, 3.w, 0, 3.w),
                                        color: Colors.white,
                                        child:
                                        Center(child: Text("Header"))),
                                    ListView.builder(
                                      physics:
                                      const NeverScrollableScrollPhysics(),
                                      itemCount: 20,
                                      shrinkWrap: true,
                                      itemBuilder: (context, index) {
                                        return GestureDetector(
                                          onTap: () {},
                                          child: Padding(
                                            padding: EdgeInsets.fromLTRB(
                                                0.w, 2.w, 0.w, 2.w),
                                            child: Center(
                                              child: Text(
                                                  "8:44",
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 14.sp)),
                                            ),
                                          ),
                                        );
                                      },
                                    )
                                  ],
                                ),
                              );
                            },
                          ),
                        ))
                  ],
                ))

Desired output:

But in this if I don't put vertical listview in SizedBox and don't give fixed height then it causes an issue.

I want to have expanded or something like wrap_content for vertical inside listview so it takes the required space on it's own.

So what to do for this? Can someone help?

Thanks in advance.

Answer 1

have you tried height: double.maxFinite,

in the SizedBox... this will le