Flutter – AnimatedPositioned Widget

The AnimatedPositioned widget in Flutter is used to create animated transitions for a widget’s position within a Stack. It allows you to smoothly change the position of a child widget by animating the values of the left, top, right, and bottom properties. In this article, we are going to implement the AnimatedPositioned widget and explore some properties of it. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of AnimatedPosition Widget

AnimatedPositioned(
  duration: Duration(milliseconds: 500), // Animation duration
  left: 0.0, // Initial left position
  top: 0.0, // Initial top position
  right: null, // or provide a value if needed
  bottom: null, // or provide a value if needed
  width: null, // or provide a value if needed
  height: null, // or provide a value if needed
  curve: Curves.easeInOut, // Animation curve
  onEnd: () {
    // Callback function when animation ends (optional)
  },
  child: YourChildWidget(),
)

Required Tools

To build this app, you need the following items installed on your machine:

• Visual Studio Code / Android Studio
• Android Emulator / iOS Simulator / Physical Device device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

Step By Step Implementations

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      title: 'AnimatedPositioned Example',
      home: AnimatedPositionedExample(),
    );
  }
}

Step 5: Create AnimatedPositionedExample Class

In this class we are going to Implement the AnimatedPositioned widget whenever the user click the button the container will start the animation. Comments are added for better understanding.

 AnimatedPositioned(
              duration: Duration(seconds: 1), // Animation duration
              left: _isLeft ? 50 : 150, // Change the left position based on the _isLeft state
              top: 50, // Fixed top position
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),

Dart

class AnimatedPositionedExample extends StatefulWidget {
  @override
  _AnimatedPositionedExampleState createState() =>
      _AnimatedPositionedExampleState();
}

class _AnimatedPositionedExampleState extends State<AnimatedPositionedExample> {
  bool _isLeft = true;

  // Function to toggle the position of the animated widget
  void _togglePosition() {
    setState(() {
      _isLeft = !_isLeft;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedPositioned Example'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            // AnimatedPositioned widget to create the animated transition
            AnimatedPositioned(
              duration: Duration(seconds: 1), // Animation duration
              left: _isLeft ? 50 : 150, // Change the left position based on the _isLeft state
              top: 50, // Fixed top position
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
      // Floating action button to trigger the position toggle
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePosition, // Call _togglePosition when pressed
        child: Icon(Icons.swap_horiz), // Icon to display on the button
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      title: 'AnimatedPositioned Example',
      home: AnimatedPositionedExample(),
    );
  }
}

class AnimatedPositionedExample extends StatefulWidget {
  @override
  _AnimatedPositionedExampleState createState() =>
      _AnimatedPositionedExampleState();
}

class _AnimatedPositionedExampleState extends State<AnimatedPositionedExample> {
  bool _isLeft = true;

  // Function to toggle the position of the animated widget
  void _togglePosition() {
    setState(() {
      _isLeft = !_isLeft;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedPositioned Example'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            // AnimatedPositioned widget to create the animated transition
            AnimatedPositioned(
              duration: Duration(seconds: 1), // Animation duration
              left: _isLeft ? 50 : 150, // Change the left position based on the _isLeft state
              top: 50, // Fixed top position
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
      // Floating action button to trigger the position toggle
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePosition, // Call _togglePosition when pressed
        child: Icon(Icons.swap_horiz), // Icon to display on the button
      ),
    );
  }
}

Output: