颤动动画更改 DraggableScrollableSheet 边框半径

Question

在下面的代码中，我想对DraggableScrollableSheet 边框半径进行动画更改，然后实现坚持到屏幕顶部，例如AppBar，为此实现了动画更改边框半径，但它不起作用，我明白了错误：

错误：

在构建 _BottomBarControllerScope 时引发了以下断言： 'package:flutter/src/animation/animations.dart'：断言失败： 第 376 行 pos 15: 'parent != null': 不正确。

断言 表示框架本身有错误，或者我们应该提供 此错误消息中的更多信息可帮助您 确定并解决根本原因。无论哪种情况，请报告 通过在 GitHub 上提交错误来断言：

https://github.com/flutter/flutter/issues/new?template=BUG.md 当 抛出异常，这是堆栈： 2 个新的 CurvedAnimation（包：flutter/src/animation/animations.dart:376:15） 3 _HomeState.initState（包：cheetah/screens/home/main/view/home.dart:45:7）

因为home.dart:45:7 是：CurvedAnimation 在这部分代码中：

borderRadius = BorderRadiusTween(
  begin: BorderRadius.circular(75.0),
  end: BorderRadius.circular(0.0),
).animate(
  CurvedAnimation(
    parent: _borderRadiusController,
    curve: Curves.ease,
  ),
);

我的代码：

class _HomeState extends State<Home> with TickerProviderStateMixin {
  AnimationController _draggableBottomSheetController;
  AnimationController _borderRadiusController;
  Animation<BorderRadius> borderRadius;
  Duration _duration = Duration(milliseconds: 500);
  Tween<Offset> _draggableBottomSheetTween = Tween(begin: Offset(0, 1), end: Offset(0, 0));

  @override
  void initState() {
    super.initState();
    _draggableBottomSheetController = AnimationController(vsync: this, duration: _duration);

    borderRadius = BorderRadiusTween(
      begin: BorderRadius.circular(75.0),
      end: BorderRadius.circular(0.0),
    ).animate(
      CurvedAnimation(
        parent: _borderRadiusController,
        curve: Curves.ease,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: AnimatedBuilder(
          animation: _borderRadiusController,
          builder: (BuildContext context, Widget widget){
            return Scaffold(
              backgroundColor: Theme.of(context).canvasColor,
              extendBody: true,
              primary: true,
              appBar: ApplicationToolbar(title: Strings.appName),
              resizeToAvoidBottomInset: false,
              resizeToAvoidBottomPadding: false,
              body: Container(
                color: applicationBackgroundColor,
                child: Stack(children: <Widget>[
                  Container(
                    width: double.infinity,
                    height: double.infinity,
                    child: PageView(
                      children: <Widget>[
                        FollowersFeedsPage(),
                      ],
                    ),
                  ),
                  SizedBox.expand(
                    child: SlideTransition(
                      position: _draggableBottomSheetTween.animate(_draggableBottomSheetController),
                      child: DraggableScrollableSheet(
                        builder: (BuildContext context, ScrollController scrollController) {
                          return ClipRRect(
                            borderRadius: borderRadius.value,
                            child: Container(
                              color: pageBackgroundColor,
                              child: ListView.builder(
                                controller: scrollController,
                                itemCount: 5,
                                itemBuilder: (BuildContext context, int index) {
                                  return ListTile(title: Text('Item $index'));
                                },
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                ]),
              ),
            );
          }
      ),
    );
  }
}

Answer 1

这应该是正确的做法。

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 = 0.7;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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) {
                    return AnimatedBuilder(
                      animation: controller,
                      builder: (context, child) {
                        return ClipRRect(
                         borderRadius: borderRadius.evaluate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
                          child: Container(
                            height: 500.0,
                            color: Colors.blue[800],
                            child: ListView.builder(
                              controller: controller,
                              itemCount: 5,
                              itemBuilder: (BuildContext context, int index) {
                                return ListTile(title: Text('Item $index'));
                              },
                            ),
                          ),
                        );
                      },
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}