Listview ข้างใน DraggableScrollableSheet ไม่ได้เลื่อนเป็น flutter

ฉันออกแบบการออกแบบซ้อนกันอย่างหนักเช่นด้านล่างปัญหาเมื่อรายการของฉันขยาย listview ดูเหมือนจะไม่เลื่อนสิ่งที่เป็นสาเหตุของสิ่งนี้แผ่นด้านล่างได้รับการขยาย แต่ไม่มีความสำคัญใน listview ภายในถ้าฉันเลื่อนตาม การแตะที่ข้อความ 'เวลาทำการ' มันจะเริ่มเลื่อน แต่เมื่อเลื่อนขึ้นไปข้างบนฉันไม่สามารถเลื่อนลงได้

_showDialog(BuildContext context) {
    print("_showDialog");
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return DraggableScrollableSheet(
          expand: false,
          builder: (context, scrollController) {
            return Container(
              child: Stack(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Align(
                          alignment: Alignment.topCenter,
                          child: Container(
                              margin: EdgeInsets.symmetric(vertical: 8),
                              height: 8.0,
                              width: 70.0,
                              decoration: BoxDecoration(
                                  color: Colors.grey[400],
                                  borderRadius: BorderRadius.circular(10.0)))),
                      SizedBox(height: 16),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Text('Operational Hours',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: widget.isTab(context)
                                    ? TabTextStyles.mediumText
                                        .copyWith()
                                        .fontSize
                                    : PhoneTextStyles.mediumText
                                        .copyWith()
                                        .fontSize)),
                      ),
                    ],
                  ),
                  ListView(
                    controller: scrollController,
                    children: <Widget>[
                      SizedBox(height: 54.0),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 24),
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              SizedBox(height: 20.0),
                              Text('Select days to add hours',
                                  style: widget.isTab(context)
                                      ? TabTextStyles.mediumText.copyWith()
                                      : PhoneTextStyles.mediumText.copyWith()),
                            ]),
                      ),
                      DaysList()
                    ],
                  ),
                ],
              ),
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                color: Theme.of(context).backgroundColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24.0),
                  topRight: Radius.circular(24.0),
                ),
              ),
            );
          },
        );
      },
    );
  }

มีข้อผิดพลาดสองสามอย่างที่คุณทำ ครั้งแรกที่ใส่เครื่องมือในการColumnที่มักจะสามารถมองเห็นได้ที่ด้านบนสองห่อของคุณDaysListในExpandedและผ่านScrollControllerไป

นี่คือวิธีการของคุณ:

void _showDialog(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return DraggableScrollableSheet(
        expand: false,
        builder: (context, scrollController) {
          return Column(
            children: <Widget>[
              // Put all heading in column.
              column,
              // Wrap your DaysList in Expanded and provide scrollController to it
              Expanded(child: DaysList(controller: scrollController)),
            ],
          );
        },
      );
    },
  );
}

นี่คือของคุณColumn:

Widget get column {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Align(
        alignment: Alignment.topCenter,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 8),
          height: 8.0,
          width: 70.0,
          decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(10.0)),
        ),
      ),
      SizedBox(height: 16),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Text('Operational Hours', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 20.0),
            Text('Select days to add hours'),
          ],
        ),
      ),
      SizedBox(height: 16),
    ],
  );
}

และนี่คือลักษณะที่คุณDaysListควรมีลักษณะดังนี้:

class DaysList extends StatelessWidget {
  final ScrollController controller;

  const DaysList({Key key, this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: controller, // assign controller here
      itemCount: 20,
      itemBuilder: (_, index) => ListTile(title: Text("Item $index")),
    );
  }
}

เอาท์พุท: