BoxConstraints has a negative minimum width - flutter

Question

in this class as an widget which i use animation to show and hide, when i multiple show or hiding by click, sometimes i get this error:
BoxConstraints has a negative minimum width.The offending constraints were: BoxConstraints(w=-0.8, 0.0<=h<=Infinity; NOT NORMALIZED)
this part of code has problem
child: Row( //<--- problem cause on this line of code
children: <Widget>[
...
],
),
My class code:
class FollowingsStoryList extends StatefulWidget {
final List<Stories> _stories;
FollowingsStoryList({#required List<Stories> stories}) : _stories = stories;
#override
_FollowingsStoryListState createState() => _FollowingsStoryListState();
}
class _FollowingsStoryListState extends State<FollowingsStoryList> with TickerProviderStateMixin {
List<Stories> get stories => widget._stories;
bool _isExpanded = false;
AnimationController _barrierController;
#override
void initState() {
super.initState();
_barrierController = AnimationController(duration: const Duration(milliseconds: 400), vsync: this);
}
#override
Widget build(BuildContext context) {
return AnimatedContainer(
curve: _isExpanded ? Curves.elasticOut : Curves.elasticIn,
duration: Duration(milliseconds: 800),
child: Row(
children: <Widget>[
AnimatedContainer(
curve: _isExpanded ? Curves.elasticOut : Curves.elasticIn,
duration: Duration(milliseconds: 800),
width: _isExpanded ? 90 : 1,
color: Colors.white,
padding: EdgeInsets.only(bottom: 65.0),
child: Column(
children: <Widget>[
],
),
),
GestureDetector(
onTap: _toggleExpanded,
child: StoriesShapeBorder(
alignment: Alignment(1, 0.60),
icon: Icons.adjust,
color: Colors.white,
barWidth: 4,
),
),
],
),
);
}
_toggleExpanded() {
setState(() {
_isExpanded = !_isExpanded;
if (_isExpanded) {
_barrierController.forward();
} else {
_barrierController.reverse();
}
});
}
}

Answer 1

Because Curves.elasticOut and Curves.elasticIn are
oscillating curves that grows/shrinks in magnitude while overshooting
its bounds.
When _isExpanded is false, you are expecting the width to go from 90 to 1 however Curves.elasticOut overshoots and becomes much less than 1 (hence a negative width) for a short period of time.
This is what is causing the error imho. Plus for what reason do you have nested AnimatedContainers? Top AnimatedContainer seems unnecessary.
Try getting rid of the top AnimatedContainer and changing all 4 of the Curves to Curves.linear and I think your error will be gone. Actually you can use any Curves which don't overshoot.
If you really need Elastic Curve, then maybe this would work too:
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
AnimatedContainer(
curve: _isExpanded ? Curves.elasticOut : Curves.easeInSine,
duration: Duration(milliseconds: 800),
width: _isExpanded ? 90 : 1,
color: Colors.white,
padding: EdgeInsets.only(bottom: 65.0),
child: Column(
children: <Widget>[
],
),
),
GestureDetector(
onTap: _toggleExpanded,
child: StoriesShapeBorder(
alignment: Alignment(1, 0.60),
icon: Icons.adjust,
color: Colors.white,
barWidth: 4,
),
),
],
);
}
Try it and let me know.

Answer 2

For example, you can use AnimatedController, to (oddly enough) control your animation value and set minimum value "0".
import 'dart:math' as math;
double getValue(...) {
// some logic / curves
// ....
return math.max(0, value);
}