How to create stack vertical listview and horizontal listview in flutter draggablescrollablesheet?

Question

I'm trying to create a horizontallistview inside a verticalistview which is part of draggablescrollablesheet, confused? Basically I'm trying to create something similar to this page Horizontal ListView inside a Vertical ScrollView in Flutter , but inside a draggablescrollablesheet. So far I keep on running to errors from incorrectparentwidget to unbounded height problems, I tried searching everywhere but no solutions so far if anyone can help that would be helpful. Here is the code

main.dart

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

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

class _WeatherState extends State<Weather> {
  late image_switch testing;
  late time_identifier time;

  late weather_screen_data data_weather;
  late weather_data weather;//the method to get the variable below
  late String iconurl;
  late String image;
  late String timeofday;
  late String year;
  late String weekdate;
  late String weekday;
  late String month;

  @override
  void initState() {
    super.initState();
    testing = image_switch();
    time = time_identifier();
    initializeDateFormatting();
    testing.check_time();
    setState(() {
      timeofday = time.time_switcher();
      image = testing.image_switcher();
      year = time.year();
      weekdate = time.weekdate();
      weekday = time.weekday();
      month = time.month();
    });
  }
  Future<weather_screen_data> data= weather_data.get_data();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder<weather_screen_data>(
          future: data,
          builder: (BuildContext context, AsyncSnapshot<weather_screen_data> snapshot) {
            if (snapshot.hasData) {
              return Stack(
                  fit: StackFit.expand,
                  children: [
                  Container(
                      decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage(image),
                            fit: BoxFit.cover,
                            colorFilter: ColorFilter.mode(
                                Colors.black.withOpacity(0.3),
                                BlendMode.darken),
                          )),
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Container(
                                margin: EdgeInsets.only(top: 30.h, left: 11.w),
                                child: Text("Selamat $timeofday, Dwika",
                                    style: TextStyle(
                                      fontSize: 20.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 310.h, left: 23.w),
                                child: Text("${snapshot.data!.description.variable}",
                                    style: TextStyle(
                                      fontSize: 48.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 22.h, left: 23.w),
                                child: Text(weekday,
                                    style: TextStyle(
                                      fontSize: 34.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 22.h, left: 23.w),
                                child: Text("$weekdate $month",
                                    style: TextStyle(
                                      fontSize: 34.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 22.h, left: 23.w),
                                child: Text("$year",
                                    style: TextStyle(
                                      fontSize: 34.sp,
                                      color: Colors.white,
                                    )))
                          ])),
                  Positioned(
                    top:82.h,
                    left:12.w,
                    child: Container(
                        width: 160.w,
                        height: 160.w,
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              image:NetworkImage("http://openweathermap.org/img/w/" + snapshot.data!.icon.variable + ".png"),
                              fit:BoxFit.cover),
                        )),
                  ),
                  Positioned(
                    top: 220.h,
                    left: 12.w,
                    child: Row(
                      children: [
                        Text("${snapshot.data!.temprature.variable.round()}°",
                            style: TextStyle(fontSize: 96, color: Colors.white)),
                        Text("C",
                            style: TextStyle(
                              fontSize: 96,
                              color: Colors.white,
                            )),
                      ],
                    ),
                  ),
                  Positioned(
                      top: 21.h,
                      right: 30.w,
                      child: IconButton(
                        iconSize: 40.sp,
                        color: Colors.white,
                        icon: Icon(Icons.refresh),
                        onPressed: () {
                          time_identifier().generate_days();
                          setState(() {
                            data=weather_data.get_data();
                            testing.check_time();
                            image = testing.image_switcher();
                            timeofday = time.time_switcher();
                            image = testing.image_switcher();
                            year = time.year();
                            weekdate = time.weekdate();
                            weekday = time.weekday();
                            month = time.month();
                          });
                        },
                      )),
                  bottomsheet()
                ]);
            }else{
              return Center(
                child:CircularProgressIndicator()
              );
            }
          }
          ));
  }
}

just focus on the part where I put the bottomsheet, you can ignore the other parts

bottomsheet.dart

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

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

class _bottomsheetState extends State<bottomsheet> {
  @override
  // void initState() {
  //   super.initState();
  //   // days=time_identifier().generate_days();
  //   setState(() {
  //     days=time_identifier().generate_days();
  //   });
  // }
  @override
  Widget build(BuildContext context) {
    List<String> days = time_identifier().generate_days();
    return DraggableScrollableSheet(
        initialChildSize:0.06,
        minChildSize:0.05,
        maxChildSize:0.8,
        builder: (BuildContext context, ScrollController scrollController)
    {
      return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50),
              topRight: Radius.circular(50),
            )
        ),
        child: ListView.builder(itemCount:5,itemBuilder: (BuildContext context, int index) {
          return
            Expanded(
              child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children:[
                Expanded(
                  child: ListView.builder(shrinkWrap:true,
                      scrollDirection:Axis.horizontal,itemCount:5,itemBuilder:(BuildContext context, int index){
                    return Text("Hello World");
                  }),
                )
              ]),
            );
        },)

      );},
    );
  }
  }

As you can see I have tried everything in the book, wrapping the widget with Expanded, and then using Columns, shrinkwrap,etc but it always gives me incorrect ParentWidget Use or unbounded height problems.

Answer 1

Based on the first sentence of your question (I didn't read much of the rest), I made a quick demo for you. Let me know if you have any follow-up questions, by directly replying to this answer.

Full code for the demo above:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHome()));
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BottomSheet Demo')),
      body: Center(
        child: ElevatedButton(
          child: Text('Show DraggableScrollableSheet'),
          onPressed: () async {
            final result = await showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              builder: (_) => DraggableScrollableSheet(
                expand: false,
                builder: (context, ScrollController controller) {
                  return ListView.builder(
                    controller: controller,
                    itemCount: 100,
                    itemExtent: 200,
                    itemBuilder: (context, index) {
                      return ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (BuildContext context, int index) {
                          return FlutterLogo(
                            size: 200,
                            style: FlutterLogoStyle.stacked,
                          );
                        },
                      );
                    },
                  );
                },
              ),
            );
            print(result);
          },
        ),
      ),
    );
  }
}

Answer 2

After much fidgeting around it turns out I have to wrap my ListView.builder inside a container so it becomes like this in the bottomsheet.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:intl/intl.dart';
import '../weather/time_identifier.dart';

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

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

class _bottomsheetState extends State<bottomsheet> {
  @override
  // void initState() {
  //   super.initState();
  //   // days=time_identifier().generate_days();
  //   setState(() {
  //     days=time_identifier().generate_days();
  //   });
  // }
  @override
  Widget build(BuildContext context) {
    List<String> days = time_identifier().generate_days();
    return DraggableScrollableSheet(
        initialChildSize:0.06,
        minChildSize:0.05,
        maxChildSize:0.8,
        builder: (BuildContext context, ScrollController scrollController)
    {
      return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50),
              topRight: Radius.circular(50),
            )
        ),
        child: ListView.builder(controller: scrollController,itemCount:5,itemBuilder: (BuildContext context, int index) {
          return
            Container(
              height:200,
              child: ListView.builder(shrinkWrap:true,
                  scrollDirection:Axis.horizontal,itemCount:10,itemBuilder:(BuildContext context, int index){
                return Text("Hello World");
              }),
            );
        },)

      );},
    );
  }
  }