AnimatedPositioned Widget Example in Flutter

This Article is posted by seven.srikanth at 10/10/2019 6:06:45 AM



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.
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. 
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AnimatedPositioned Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'AnimatedPositioned Demo'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  double pos_l = 0;
  double pos_r = 0;
  double pos_t = 0;
  double pos_b = 0;
  void _movewidget(String pos) {
    setState(() {
      if (pos == "Up") {
        pos_l = 0;
        pos_r = 0;
        pos_t = 0;
        pos_b = 100;
      } else if (pos == "Right") {
        pos_l = 100;
        pos_r = 0;
        pos_t = 0;
        pos_b = 0;
      } else if (pos == "Down") {
        pos_l = 0;
        pos_r = 0;
        pos_t = 100;
        pos_b = 0;
      } else if (pos == "Left") {
        pos_l = 0;
        pos_r = 100;
        pos_t = 0;
        pos_b = 0;
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
        child: Stack(
          children: <Widget>[
            AnimatedPositioned(
              left: pos_l,
              right: pos_r,
              top: pos_t,
              bottom: pos_b,
              duration: Duration(milliseconds: 500),
              child: Center(
                child: Container(
                  color: Colors.red,
                  width: 100.0,
                  height: 100.0,
                ),
              ),
            ),
            Positioned(
              bottom: 100,
              left: 160,
              child: RaisedButton(
                onPressed: () {
                  _movewidget("Up");
                },
                child: Icon(Icons.keyboard_arrow_up),
              ),
            ),
            Positioned(
              bottom: 60,
              left: 260,
              child: RaisedButton(
                onPressed: () {
                  _movewidget("Right");
                },
                child: Icon(Icons.keyboard_arrow_right),
              ),
            ),
            Positioned(
              bottom: 10,
              left: 160,
              child: RaisedButton(
                onPressed: () {
                  _movewidget("Down");
                },
                child: Icon(Icons.keyboard_arrow_down),
              ),
            ),
            Positioned(
              bottom: 60,
              left: 60,
              child: RaisedButton(
                onPressed: () {
                  _movewidget("Left");
                },
                child: Icon(Icons.keyboard_arrow_left),
              ),
            )
          ],
        ),
      )),
    );
  }
}
Hope this example is useful to you.
Thanks,
Srikanth

Tags: AnimatedPositioned; Animation example in Flutter; Move widget position on button click; Move widget smoothly;








0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.


© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com