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

Categories: Software Development

Posted in: Flutter, Dart, Android, iOS, Web, Widget

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.

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.

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/flutterOpen link in a new tab

Happy Coding ;)

 

 

Author

Alex Domenici