Swapping two widgets in Flutter, inverting their positions with or without animation

Goals

Invert the position of two widgets

Invert the position of two widgets with animation

Inverting two widgets in Flutter, swapping their positions with or without animation

If you want to swap two widgets in Flutter (like swapping two addresses on Google Maps) you can use the Stack and Positioned widgets, optionally adding an animation effect.

In this article I will show you two examples:

the first code sample simply swaps the two widgets, so that their positions on the screen are inverted.
the second code sample achieves the same result with an animation effect, obviously more pleasing to the eye.

Swapping two widgets (no animation)

This sample code inverts the position of two widgets (it swaps their place on the screen) when the user taps a button.

source code
run in dartpad

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: SwapWidget(),
        ),
      ),
    );
  }
}

class SwapWidget extends StatefulWidget {
  @override
  createState() => _SwapWidgetState();
}

class _SwapWidgetState extends State<SwapWidget> {
  final double widgetATop = 20;
  final double widgetBTop = 110;
  bool swapped = false;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 150,
      child: Stack(
        children: <Widget> [
          // Widget A
          Positioned(
            top: swapped ? widgetBTop : widgetATop,
            left: 20,
            child: const Text("This is widget A"),
          ),
          // Widget B
          Positioned(
            top: swapped ? widgetATop : widgetBTop,
            left: 20,
            child: const Text("This is widget B"),
          ),
          // Swap button
          Positioned(
            top: 50,
            right: 20,
            child: TextButton(
              onPressed: () => setState(() {
                swapped = !swapped;
              }),
              child: const Text("swap"),
            ),
          ),
        ],
      ),
    );
  }
}

Swap two widgets with animation

This sample code inverts the position of two widgets (it swaps their place on the screen) by moving them with an animation when the user taps a button.

source code
run in dartpad

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: AnimatedSwapWidget(),
        ),
      ),
    );
  }
}

class AnimatedSwapWidget extends StatefulWidget {
  @override
  createState() => _AnimatedSwapWidgetState();
}

class _AnimatedSwapWidgetState extends State<AnimatedSwapWidget> 
  with TickerProviderStateMixin {

  final double widgetATop = 20;
  final double widgetBTop = 110;
  bool swapped = false;

  late AnimationController controller;
  late Animation<double> addressAnimation;
  animationListener() => setState(() { }); 

  @override
  void didChangeDependencies() async {
    super.didChangeDependencies();

    // Initialize animations
    controller = AnimationController(
      duration: const Duration(milliseconds: 300), 
      vsync: this,
    );

    addressAnimation = Tween(
      begin: 0.0, 
      end: widgetBTop - widgetATop,
    )
    .animate(
      CurvedAnimation(
        parent: controller, 
        curve: const Interval(0.0, 1.0, curve: Curves.easeInOut),
      )
    )
    ..addListener(animationListener);
  }

  @override
  dispose() {
    // Dispose of animation controller
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var tweenValue = addressAnimation.value;

    return SizedBox(
      width: 300,
      height: 150,
      child: Stack(
        children: <Widget> [
          //Widget A
          Positioned(
            top: widgetATop + tweenValue,
            left: 20,
            child: const Text("This is widget A"),
          ),
          // Widget B
          Positioned(
            top: widgetBTop - tweenValue,
            left: 20,
            child: const Text("This is widget B"),
          ),
          // Swap button
          Positioned(
            top: 50,
            right: 20,
            child: TextButton(
              onPressed: () => setState(() {
                swapped ? controller.reverse() : controller.forward();
                swapped = !swapped;
              }),
              child: const Text("swap"),
            ),
          ),
        ],
      ),
    );
  }
}

I hope you have enjoyed learning how to swap two widgets. You can find more useful Flutter articles here in my blog: https://alex.domenici.net/tags/flutter

Happy Coding ;)

Swapping two widgets in Flutter, inverting their positions with or without animation

Alex Domenici