SlideTransition

slide_transition.dart

import 'package:flutter/material.dart';

void main(){
  runApp(const SlideTransitionExample());
}

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

  @override
  State<SlideTransitionExample> createState() => _SlideTransitionExampleState();
}

class _SlideTransitionExampleState extends State<SlideTransitionExample> {
  late Widget child = _buildContainer(Colors.red, const ValueKey<int>(1));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 200),
              child: child,
              transitionBuilder: (child, animation) {
                final offsetAnimation =
                    Tween<Offset>(begin: const Offset(1.0, 0.0), end: const Offset(0.0, 0.0)).animate(animation);
                return SlideTransition(
                  position: offsetAnimation,
                  child: child,
                );
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                    onPressed: () {
                      setState(() {
                        child = _buildContainer(Colors.blue, const ValueKey<int>(0));
                      });
                    },
                    child: const Text('Switch')),
                ElevatedButton(
                    onPressed: () {
                      setState(() {
                        child = _buildContainer(Colors.red, const ValueKey<int>(1));
                      });
                    },
                    child: const Text('Cancel')),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildContainer(Color color, Key? key) {
    return Card(
      key: key,
      color: color,
      child: const SizedBox(
        width: 200,
        height: 400,
      ),
    );
  }
}