Блог

Недавно я столкнулся с странным поведением Flutter, которое я не могу объяснить. Рассмотрим следующий код, создаваемый для веб-платформы:

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

Он работает отлично и, как и ожидалось, при открытии с мобильного устройства: DraggableScrollableSheet открывается, занимает 50% высоты экрана, а затем ListView его внутренняя часть может прокручиваться вместе с самим листом, поэтому он займет от 0% до 100% экрана.
Однако, если он открыт в браузере рабочего стола, DraggableScrollableSheet just отказывается прокручиваться вместе с ListView вращением колесика мыши. Он просто придерживается 50% и может быть только закрыт и никогда не расширяется!
Я что-то упустил? Это ошибка flutter? Как мне заставить его работать в настольных браузерах, как ожидалось?

PS вот немного более сложный пример поведения в моем приложении, размещенном на страницах GitHub; для ModalBottomSheet открытия вы должны коснуться значка Flutter в центре Санкт-Петербурга.

Вероятно, это ошибка, вы можете обойти эту проблему, используя следующий параметр (рядом с «Развернуть»): «initialChildSize: 1.0» Это установит начальный размер на 100% параметров перетаскиваемой таблицы прокрутки