DraggableScrollableSheet内のリストビューがフラッターでスクロールしない

私は以下のように非常に重いネストされたデザインを設計しています、私のリストがリストビューを展開するときの問題は、これの理由がスクロールしているようではないようです。 「営業時間」のテキストに触れるとスクロールが始まりますが、上に行くと下にスライドできません。

_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")),
    );
  }
}

出力：