Draggable Scrollable Sheet becomes unscrollable when we set it's child to a column

Question

I have the following code for a DraggableScrollableSheet in Flutter.

DraggableScrollableSheet(
  builder: (BuildContext context, ScrollController scrollController) {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(35),
        topRight: Radius.circular(35),
      ),
      child: Container(
        color: ColorData.secondaryColor,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 10,
            horizontal: 15,
          ),
          child: Column(
            children: [
              Container(
                height: 3,
                width: 30,
                decoration: BoxDecoration(
                  color: ColorData.primaryDividerColor,
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
              const SizedBox(
                height: 18,
              ),
              SizedBox(
                width: _screenWidth,
                child: const Text(
                  'Exchange Houses',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              SizedBox(
                width: _screenWidth,
                child: const Text(
                  '(Tap to select)',
                  textAlign: TextAlign.start,
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Expanded(
                child: ListView.separated(
                  itemCount: 5,
                  itemBuilder: (context, index) => const ExchangeHouseCard(
                    id: 1,
                    houseName: 'Test House',
                    houseContactNumber: '+94 77123456',
                    houseUrl:
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                    houseImageUrl:
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                    houseLatitude: 7.0012345,
                    houseLongitude: 20.301456,
                    userCurrencyName: 'USD',
                    convertingCurrencyName: 'LKR',
                    exchangeRate: 200.00,
                    change: 500.00,
                    changeInConvertingCurrency: 1200.00,
                  ),
                  separatorBuilder: (context, index) => const SizedBox(
                    height: 5,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  },
),

In the above code, I am trying to make my DraggableScrollableSheet be able be to dragged upwards or collapsed downwards when user drags the sheet. No matter how I try, I can not drag or collapse the sheet. It stays where it is.

Furthermore, something interesting happens if I set controller property of my ListView to the scrollController I get from the builder method in DraggableScrollableSheet. In this case, the DraggableScrollableSheet becomes draggable if we try to scroll the ListView.

But I want the DraggableScrollableSheet to be draggable if I drag from a general area of the sheet. How to implement this to the above DraggableScrollableSheet?

(I also tried wrapping the widget that is being returned inside the builder method with a ListView and setting controller property of the ListView to scrollController that I get from the builder method. But this also gives a render error. I could not find a way to fix this.)

Can someone please help?

Answer 1

It only happens when initialChildSize equals to minChildSize. So the solution is to set different values. For example:

    DraggableScrollableSheet(
      expand: false,
      maxChildSize: 0.7,
      initialChildSize: 0.5001,
      minChildSize: 0.5,
      builder: (context, controller) {},

Answer 2

You just need to pass the scrollController of the DraggableScrollableSheet to the SingleChildScrollView.

      DraggableScrollableSheet(
          initialChildSize: 0.6,
          minChildSize: 0.6,
          builder: (BuildContext context, ScrollController scrollController) {
            return SingleChildScrollView(
              controller: scrollController,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: [Container(height: 2000)],
              ),
            );
          },
        ),
        

Answer 3

it works:

         onTap: () => showModalBottomSheet<void>(
            context: context,
            useRootNavigator: true,
            isScrollControlled: true, // set this to true
            builder: (_) => DraggableScrollableSheet(
              initialChildSize: 0.9,
              maxChildSize: 1.0,
              expand: false,
              builder: (_, controller) => SingleChildScrollView(
                controller: controller,
                child: const Column(
                  children: [
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                    ListTile(title: Text('Item ')),
                  ],
                ),
              ),
            ),
          ),

Answer 4

You need to give isScrollControlled to true and set the height

    showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.9,
        maxChildSize: 0.9,
        builder: (BuildContext context, ScrollController scrollController) {
          return ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(35),
              topRight: Radius.circular(35),
            ),
            child: Container(
              color: ColorData.secondaryColor,
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  vertical: 10,
                  horizontal: 15,
                ),
                child: Column(
                  children: [
                    Container(
                      height: 3,
                      width: 30,
                      decoration: BoxDecoration(
                        color: ColorData.primaryDividerColor,
                        borderRadius: BorderRadius.circular(16),
                      ),
                    ),
                    const SizedBox(
                      height: 18,
                    ),
                    SizedBox(
                      width: _screenWidth,
                      child: const Text(
                        'Exchange Houses',
                        textAlign: TextAlign.start,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    SizedBox(
                      width: _screenWidth,
                      child: const Text(
                        '(Tap to select)',
                        textAlign: TextAlign.start,
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    Expanded(
                      child: ListView.separated(
                        itemCount: 5,
                        controller: scrollController,
                        itemBuilder: (context, index) =>
                            const ExchangeHouseCard(
                          id: 1,
                          houseName: 'Test House',
                          houseContactNumber: '+94 77123456',
                          houseUrl:
                              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                          houseImageUrl:
                              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
                          houseLatitude: 7.0012345,
                          houseLongitude: 20.301456,
                          userCurrencyName: 'USD',
                          convertingCurrencyName: 'LKR',
                          exchangeRate: 200.00,
                          change: 500.00,
                          changeInConvertingCurrency: 1200.00,
                        ),
                        separatorBuilder: (context, index) =>
                            const SizedBox(
                          height: 5,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      );
    });