Modal BottomSheet scrollControlled doesn't work for a list

user_11215440 0
Viewed 3139

I need to close a bottom sheet when the inner list is scrolled up. The bottom sheet contains only a list. According to the documentation, the parameter isScrollControlled in showModalBottomSheet is what I need. The documentation for the function.

The isScrollControlled parameter specifies whether this is a route for a bottom sheet that will utilize DraggableScrollableSheet. If you wish to have a bottom sheet that has a scrollable child such as a ListView or a GridView and have the bottom sheet be draggable, you should set this parameter to true.

My code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: ModalBottomSheetSample(),
    );
  }
}

class ModalBottomSheetSample extends StatelessWidget {

  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            isScrollControlled: true,
            enableDrag: true,
            isDismissible: true,
            builder: (BuildContext context) {
              return Container(
                height: 248,
                child: ListView.builder(itemBuilder: (context, index) {
                  return ListTile(title: Text("i'm tile ${index}"));
                }),
              );},
          );},
      ),
    );
  }
}

Modal BottomSheet is opened, but when I scroll the list up, it doesn't affect the sheet, it's not dragged down.

Why it doesn't work and how can I make this work?

flutter-listview flutter
2 Answers

'isDismissable' does not seem to play well with 'SingleChildScrollView'

The material guidelines for full screen bottom sheets advises us to include a header (similar to an app bar in a scaffold) at the top of the bottom sheet with a leading icon for closing the sheet.

The flutter docs also recommend you use a CloseButton in this scenario.

user_1644670

Try this:

... 
ScrollController listScrollController = ScrollController();
...

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  isDismissible: true,
  controller: scrollController,
  builder: (context) {
return Container(
          color: Colors.white,
          child: ListView.builder(
            controller: scrollController,
            // itemCount: 25,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(title: Text('Item $index'));
            },
          ),
        );
    }
);
user_109010930
Related