Flutter animate changes on DraggableScrollableSheet border radius

Question

in this below code i want to animate change DraggableScrollableSheet border radius after that achieve to stick to top of screen such as AppBar, implemented animate change border radius for that, but it doesn't work and i get this error:

Error:

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)

in that home.dart:45:7 is: CurvedAnimation in this part of code:

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

my code:

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

This should be the correct way of doing it.

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'));
                              },
                            ),
                          ),
                        );
                      },
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}