在DraggableScrollableSheet Flutter中设置childSize的位置

Question

我正在尝试制作 DraggableScrollableSheet 的动画，以便当用户在 notification.extent 上的任意位置放开滚动条时，该栏（或称为弹出窗口？）将被设置设置为 minChildSize 或 maxChildSize （范围相近）。像这样使用的应用程序的一个例子是Airbnb。

到目前为止，这是我的编码：

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

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tips',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  double _percent = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors. deepPurple.shade600,
      body: Stack(
        children: [
          Container(
            width: 400,
            height: 600,
            child: Image.asset(
              "assets/diamond.png",
              fit: BoxFit.contain,
            ),
          ),
          Positioned(
            child: Text(
              "Todos",
              style: TextStyle(
                color: Colors.white,
                fontSize: 40,
              ),
            ),
            top: 40,
            left: 20,
          ),
          Positioned.fill(
            child: NotificationListener<DraggableScrollableNotification>(
              onNotification: (notification) {
                setState(() {
                  _percent = ((10 * notification.extent)/9) - (1/9);
                });

                return true;
              },
              child: DraggableScrollableSheet(
                minChildSize: 0.1,
                initialChildSize: 0.1,
                maxChildSize: 1.0,
                builder: (BuildContext c, s){
                  return Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(20),
                        topLeft: Radius.circular(20),
                      ),
                    ),
                    child: MediaQuery.removePadding(
                      context: context,
                      removeTop: true,
                      child: ListView(
                        controller: s,
                        children: [
                          SizedBox(
                            height: 6,
                          ),
                          Center(
                            child: Container(
                              height: 6,
                              width: 50,
                              decoration: BoxDecoration(
                                color: Colors.grey,
                                borderRadius: BorderRadius.circular(5),
                              ),
                            ),
                          ),
                          Center(
                            child: Container(
                              height: MediaQuery.of(context).size.height/10,
                              width: MediaQuery.of(context).size.width ,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                              ),
                              child: Center(
                                child: Text(
                                  "300 store nearby",
                                  style: TextStyle(
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          SizedBox(
                            height: 20,
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}