Flutter animate changes on DraggableScrollableSheet border radius - flutter

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