AnimatedCrossFade.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showPost = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(
        title: const Text("AnimatedCrossFade"),
      ),
      body: Center(
          child: AnimatedCrossFade(
        crossFadeState:
            !showPost ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        duration: const Duration(seconds: 1),
        firstChild: GestureDetector(
          onTap: () {
            setState(() {
              showPost = true;
            });
          },
          child: Container(
            width: 300,
            height: 400,
            color: Colors.black,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  "Spoiler Alert",
                  style: TextStyle(fontSize: 18, color: Colors.white),
                ),
                const SizedBox(
                  height: 20,
                ),
                OutlinedButton(
                    onPressed: () {
                      setState(() {
                        showPost = true;
                      });
                    },
                    child: const Text("Show me"))
              ],
            ),
          ),
        ),
        secondChild: GestureDetector(
          onTap: () {
            setState(() {
              showPost = false;
            });
          },
          child: Container(
              width: 300,
              height: 400,
              color: Colors.blueGrey,
              child: Image.network(
                  "https://memegenerator.net/img/instances/60138700.jpg")),
        ),
      )),
    );
  }
}