AnimatedPositioned Widget Example in Flutter

<p>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.</p> <p>Here is how the example output is going to look. ![](https://fluttercentral.com/Uploads/8945873c-b74f-48ac-a872-eff108f6fd05.gifwidth="50%height="auto](</p> <p id="ce9178;]("Left");" pos_l="color:" pos_r="color:" pos_t="color:" pos_b="color:" color:="">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") color: #c586c0;](else color: #c586c0;](if (pos == color: #ce9178;]("Right") color: #c586c0;](else color: #c586c0;](if (pos == color: #ce9178;]("Down") color: #c586c0;](else color: #c586c0;](if (pos == color: #ce9178;]("Left") }); } 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: () , 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: () , 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: () , 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: () , child: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.keyboard_arrow_left), ), ) ], ), )), ); }}</p> <p>Hope this example is useful to you. Thanks,Srikanth</p>