Flutter 将 Sliver 添加到 DraggableScrollableSheet

Question

将 SliverAppBar 添加到 DraggableScrollableSheet 后，我无法将工作表向上或向下滚动到屏幕，但 SliverAppbar 内的列表工作正常，

完整源代码:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  BorderRadiusTween borderRadius;
  Duration _duration = Duration(milliseconds: 500);
  Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));
  double _height, min = 0.1, initial = 0.3, max = 1;
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: _duration);
    borderRadius = BorderRadiusTween(
      begin: BorderRadius.circular(10.0),
      end: BorderRadius.circular(0.0),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('DraggableScrollableSheet'),
      ),
      floatingActionButton: GestureDetector(
        child: FloatingActionButton(
          child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller),
          elevation: 5,
          backgroundColor: Colors.deepOrange,
          foregroundColor: Colors.white,
          onPressed: () async {
            if (_controller.isDismissed)
              _controller.forward();
            else if (_controller.isCompleted) _controller.reverse();
          },
        ),
      ),
      body: SizedBox.expand(
        child: Stack(
          children: <Widget>[
            FlutterLogo(size: 500),
            SizedBox.expand(
              child: SlideTransition(
                position: _tween.animate(_controller),
                child: DraggableScrollableSheet(
                  minChildSize: min, // 0.1 times of available height, sheet can't go below this on dragging
                  maxChildSize: max, // 0.7 times of available height, sheet can't go above this on dragging
                  initialChildSize: initial, // 0.1 times of available height, sheet start at this size when opened for first time
                  builder: (BuildContext context, ScrollController controller) {
                    if (controller.hasClients) {
                      var dimension = controller.position.viewportDimension;
                      _height ??= dimension / initial;
                      if (dimension >= _height * max * 0.9)
                        _onWidgetDidBuild(() {
                          _scaffoldKey.currentState.showSnackBar(SnackBar(
                            content: Text('ON TOP'),
                            duration: Duration(seconds: 3),
                          ));
                        });
                      else if (dimension <= _height * min * 1.1)
                        _onWidgetDidBuild(() {
                          _scaffoldKey.currentState.showSnackBar(SnackBar(
                            content: Text('ON BOTTOM'),
                            duration: Duration(seconds: 3),
                          ));
                        });
                    }
                    return AnimatedBuilder(
                      animation: controller,
                      builder: (context, child) {
                        return ClipRRect(
                          borderRadius: borderRadius.evaluate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
                          child: Container(
                            color: Colors.blue[800],
                            child: CustomScrollView(
                              slivers: <Widget>[
                                SliverAppBar(
                                  title: Text("What's Up?"),
                                  backgroundColor: Colors.orange,
                                  automaticallyImplyLeading: false,
                                  primary: false,
                                  floating: true,
                                  pinned: true,
                                ),
                                SliverList(
                                  delegate: SliverChildBuilderDelegate(
                                        (context, idx) => ListTile(
                                      title: Text("Nothing much"),
                                      subtitle: Text("$idx"),
                                    ),
                                    childCount: 100,
                                  ),
                                )
                              ],
                            ),
                          ),
                        );
                      },
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
  _onWidgetDidBuild(Function callback) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      callback();
    });
  }
}

Answer 1

CustomScrollView(
  controller: controller, // you missed this
  ...
)