Flutter desktop web DraggableScrollableSheet scrolling problem

Question

There is a strange behavior in Flutter I faced recently that I can not explain. Consider the following code being built for WEB platform:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({this.title = "Home Page"});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const Center(
        child: Text(
          'Hello, World!',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          builder: (_) => DraggableScrollableSheet(
            expand: false,
            builder: (_, ScrollController scrollController) {
              return ListView(
                controller: scrollController,
                children: [for (var i = 0; i < 250; i++) Text("Item: $i")],
              );
            },
          ),
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        ),
        tooltip: "Open Sheet!",
        child: const Icon(Icons.add),
      ),
    );
  }
}

It works perfectly fine and as expected when opened from mobile device: the DraggableScrollableSheet gets opened, takes 50% of the screen height, and then the ListView inside it may be scrolled along with Sheet itself, so it will take from 0% to 100% of the screen.
However, if opened in desktop browser, the DraggableScrollableSheet just refuses to be scrolled together with ListView on mouse wheel rotation. It just sticks to 50% and can only be closed and never expanded!
An I missing something? Is it a flutter bug? How do I make it work in desktop browsers as expected?

P.S. here is a slightly more complex example of the behavior in my app, hosted on GitHub pages; for ModalBottomSheet to get opened, you should touch Flutter icon in the center of St. Petersburg.

https://github.com/flutter/flutter/issues/101903 – Flafy Jun 04 '22 at 12:05 — Flafy, Jun 04 '22 at 12:05

score 0 · Answer 1 · answered Mar 22 '22 at 12:29

0

This is probably a bug, you can work around this problem using the following parameter (next to "Expand"): "initialChildSize: 1.0" This will set the initial size to 100% DraggableScrollableSheet parameters

answered Mar 22 '22 at 12:29

Vitor Sorato

1

2

Yeah, thanks, I've already found it. However my initial intention was to set initial size to something less than 100% and provide user ability to expand it to 100% or collapse it. – pseusys Mar 22 '22 at 19:43

Flutter desktop web DraggableScrollableSheet scrolling problem

1 Answers1