SlidingUpPanelでscrollController.jumpTo(0)を実行したあとにパネルを動かせない問題をどう解決するか

Question

実現したいこと

FlutterでSlidingUpPanelを使った画面を構築しています。
panelが最大化している状態でpanelをダブルタップした時に、panelが最小化するように実装したいです。

しかし、panelを最大化してから、panel内のウィジェットを下スクロールしてからダブルタップすると、panelが最小化したあと、最大化ができず、panel内のウィジェットがスクロールされます。
panel内のウィジェットをスクロールせずにダブルタップをした場合はpanelが正しく動作します。

正しく動作するためにどこを修正すればいいでしょうか。

該当のソースコード

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'SlidingUpPanelDemo',
      home: MyHomePage(title: 'SlidingUpPanelDemo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PanelController panelController = PanelController();
  DateTime lastTapTime = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidingUpPanel(
        controller: panelController,
        minHeight: MediaQuery.of(context).size.height * 0.45,
        maxHeight: MediaQuery.of(context).size.height * 0.8,
        panelBuilder: (ScrollController scrollController) {
          return Listener(
            onPointerDown: (event) {
              final now = DateTime.now();
             
              if (now.difference(lastTapTime) <
                  const Duration(milliseconds: 300)) {
                if (panelController.isPanelOpen) {
                  scrollController.jumpTo(0);
                  panelController.close();
                }
              }
              lastTapTime = now;
            },
            child: GestureDetector(
              onDoubleTap: () {},
              child: SingleChildScrollView(
                controller: scrollController,
                child: Column(
                  children: [
                    for (int i = 0; i < 6; i++) ...{
                      Container(
                        height: 200,
                        color: Colors.blue,
                      ),
                      const Divider(color: Colors.grey),
                    }
                  ],
                ),
              ),
            ),
          );
        },
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(24.0),
          topRight: Radius.circular(24.0),
        ),
        body: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(24),
          ),
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).size.height * 0.5,
          ),
        ),
      ),
    );
  }
}

試したこと

SingleChildScrollViewに下記を加えてましたが、やはり正しく動作しませんでした。

physics: panelController.isPanelClosed ? const NeverScrollableScrollPhysics() : const AlwaysScrollableScrollPhysics(),

Answer 1

たぶん利用側の改良では実現できないと思う。

SlidingUpPanelの中身をざっと見たけど、panelがスクロール可能な場合、ドラッグでスクロールするかそれともパネルの開閉をするかの判断は、内部で持っているフラグで行ってました。

ダブルクリック相当でパネルを閉じて自前のスクロールコントローラーでトップに持って行ってもこのフラグは変更されず、パネル内のドラッグ操作はスクロールするという動作になってしまいます。

_SlidingUpPanelStateの_scrollingEnabledがその変数に当たります。

変更の起点がListenerを使ったイベントのためAPIでどうにかする、ということもできないと思う。

---

追記
sliding_up_panelは3年前から更新が停止していて、それに不満を持ったと思うユーザーがクローンを作って改訂しているようです。
それがsliding_up_panel2で、そちらであればコードをちょっと修正しないといけないようだけど対応可能なようです。

sliding_up_panelがpanelBuilderからscrollControllerを取得して利用する形になってますが、sliding_up_panel2は事前に用意しておいてSlidingUpPanelに渡す形式になってます。

Comments

[Johnny]

ご回答いただきありがとうございます。
なるほど、sliding_up_panel2について確認してみます。

[Johnny]

sliding_up_panel2に代替した結果、求めていた動作を実装することができました。ありがとうございました。