DraggableScrollableSheet 边框半径上的 Flutter 动画更改

Question

在下面的代码中，我想动画化更改 DraggableScrollableSheet 边框半径，然后实现粘在屏幕顶部，例如 AppBar，为此实现了动画更改边框半径，但它不起作用，我收到此错误:

错误:

The following assertion was thrown building _BottomBarControllerScope: 'package:flutter/src/animation/animations.dart': Failed assertion: line 376 pos 15: 'parent != null': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. In either case, please report this assertion by filing a bug on GitHub:

https://github.com/flutter/flutter/issues/new?template=BUG.md When the exception was thrown, this was the stack: 2 new CurvedAnimation (package:flutter/src/animation/animations.dart:376:15) 3 _HomeState.initState (package: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'));
                              },
                            ),
                          ),
                        );
                      },
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}