In this post, I'm going to share with you the example for AnimatedPositioned Widget example in Flutter.
We will be creating a sample App with few buttons which will animate the container within the stack.
Here is how the example output is going to look.
![](https://fluttercentral.com/Uploads/8945873c-b74f-48ac-a872-eff108f6fd05.gifwidth="50%height="auto](
Here is the code from main.dart file. You can copy paste this to your sample project and run it to see the final output.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #6a9955;](// This widget is the root of your application. color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( title: color: #ce9178;]('AnimatedPositioned Demo', theme: color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('AnimatedPositioned Demo'), ); }}
color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key);
color: #569cd6;](final color: #4ec9b0;](String title;
color: #569cd6;](@override color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyHomePageState();}
color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](double pos_l = color: #b5cea8;](0; color: #4ec9b0;](double pos_r = color: #b5cea8;](0; color: #4ec9b0;](double pos_t = color: #b5cea8;](0; color: #4ec9b0;](double pos_b = color: #b5cea8;](0;
color: #569cd6;](void color: #dcdcaa;](_movewidget(color: #4ec9b0;](String pos) { color: #dcdcaa;](setState(() { color: #c586c0;](if (pos == color: #ce9178;]("Up") { pos_l = color: #b5cea8;](0; pos_r = color: #b5cea8;](0; pos_t = color: #b5cea8;](0; pos_b = color: #b5cea8;](100; } color: #c586c0;](else color: #c586c0;](if (pos == color: #ce9178;]("Right") { pos_l = color: #b5cea8;](100; pos_r = color: #b5cea8;](0; pos_t = color: #b5cea8;](0; pos_b = color: #b5cea8;](0; } color: #c586c0;](else color: #c586c0;](if (pos == color: #ce9178;]("Down") { pos_l = color: #b5cea8;](0; pos_r = color: #b5cea8;](0; pos_t = color: #b5cea8;](100; pos_b = color: #b5cea8;](0; } color: #c586c0;](else color: #c586c0;](if (pos == color: #ce9178;]("Left") { pos_l = color: #b5cea8;](0; pos_r = color: #b5cea8;](100; pos_t = color: #b5cea8;](0; pos_b = color: #b5cea8;](0; } }); }
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(widget.title), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](Container( child: color: #4ec9b0;](Stack( children: [ color: #4ec9b0;](AnimatedPositioned( left: pos_l, right: pos_r, top: pos_t, bottom: pos_b, duration: color: #4ec9b0;](Duration(milliseconds: color: #b5cea8;](500), child: color: #4ec9b0;](Center( child: color: #4ec9b0;](Container( color: color: #4ec9b0;](Colors.red, width: color: #b5cea8;](100.0, height: color: #b5cea8;](100.0, ), ), ), color: #4ec9b0;](Positioned( bottom: color: #b5cea8;](100, left: color: #b5cea8;](160, child: color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](_movewidget(color: #ce9178;]("Up"); }, child: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.keyboard_arrow_up), ), ), color: #4ec9b0;](Positioned( bottom: color: #b5cea8;](60, left: color: #b5cea8;](260, child: color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](_movewidget(color: #ce9178;]("Right"); }, child: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.keyboard_arrow_right), ), ), color: #4ec9b0;](Positioned( bottom: color: #b5cea8;](10, left: color: #b5cea8;](160, child: color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](_movewidget(color: #ce9178;]("Down"); }, child: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.keyboard_arrow_down), ), ), color: #4ec9b0;](Positioned( bottom: color: #b5cea8;](60, left: color: #b5cea8;](60, child: color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](_movewidget(color: #ce9178;]("Left"); }, child: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.keyboard_arrow_left), ), ) ], ), )), ); }}
Hope this example is useful to you.
Thanks,Srikanth