Card Swap Z-Index Hack

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isSwap = false;
  bool changeIndex = false;
  _animate() {
    setState(() {
      isSwap = !isSwap;
    });

    Future.delayed(const Duration(milliseconds: 500), () {
// Here you can write your code

      setState(() {
        isSwap = !isSwap;
//      changeIndex = !changeIndex;
      });
    });

    if (isSwap)
      Future.delayed(const Duration(milliseconds: 500), () {
        setState(() {
          changeIndex = !changeIndex;
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          overflow: Overflow.visible,
          //alignment: Alignment.center,
          children: <Widget>[
            AnimatedPositioned(
              duration: Duration(milliseconds: 500),
              left: isSwap ? 60 : 10,
              bottom: isSwap ? 60 : 10,
              child: Container(
                height: 100,
                width: 100,
                child: Center(child: Text('1')),
                color: Colors.cyan,
              ),
            ),
            AnimatedPositioned(
              duration: Duration(milliseconds: 500),
              right: isSwap ? 60 : 10,
              top: isSwap ? 60 : 10,
              child: Container(
                height: 100,
                width: 100,
                child: Center(child: Text('2')),
                color: Colors.amber,
              ),
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.transparent,
            ),
            AnimatedPositioned(
              duration: Duration(milliseconds: 500),
              left: isSwap ? 60 : 10,
              bottom: isSwap ? 60 : 10,
              child: Opacity(
                  opacity: changeIndex ? 1.0 : 0.0,
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(child: Text('2')),
                    color: Colors.cyan,
                  )),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _animate,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}