animated positioned took too much space while changing the position. the question is there is any way to minimize this space ? it ascends to safeare
the source code is below so you can try it:
class Test extends StatefulWidget {
const Test({Key? key}) : super(key: key);
@override
State<Test> createState() => _TestState();
}
class _TestState extends State<Test> with TickerProviderStateMixin {
bool selected = false;
late AnimationController colorController;
late Animation animation;
@override
initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) {
setState(() {
selected = true;
});
});
}
@override
Widget build(BuildContext context) {
changeStatusColor(colorPrimary);
return Scaffold(
backgroundColor: colorPrimary,
body: Stack(
alignment: Alignment.bottomCenter,
children: [
AnimatedPositioned(
curve: Curves.elasticOut,
duration: Duration(milliseconds: 10000),
width: MediaQuery.of(context).size.width,
height: selected
? MediaQuery.of(context).size.height
: MediaQuery.of(context).size.height * .7,
top: selected
? 50.0
: MediaQuery.of(context).size.height -
MediaQuery.of(context).size.height * .7,
child: Container(
padding: EdgeInsets.fromLTRB(26, 0, 26, 25.51),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(40)),
),
child: Column(children: [])),
),
],
),
);
}
}
Solution 1: Yeasin Sheikh
The animation curve: Curves.elasticOut
is responsible for this. You can switch to difference one or reduce the top animation point.
You can check this elasticOut
behavior
Check Curves
class and choose the one you need