Flutter_Transition_Animation

sample_segue.dart

import 'package:flutter/material.dart';
import 'package:sample_segue/sample_widget.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController controller;
  GlobalKey key = GlobalKey();

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    animation = Tween<double>(
      begin: 0,
      end: 0,
    ).animate(controller);
    animation.addListener(() {
      if (controller.isAnimating) {
        animation = Tween<double>(
          begin: 0,
          end: MediaQuery.of(context).size.width + 100.0,
        ).chain(CurveTween(curve: Curves.easeInOut)).animate(controller);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.white,
      child: Stack(
        children: [
          TextButton(
            onPressed: () {
              if (key.globalPaintBounds?.center.dx == 50.0) {
                _segue();
              }
            },
            child: const Center(
              child: Text(
                'segue_page1',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
            ),
          ),
          AnimatedBuilder(
            animation: animation,
            builder: (context, child) {
              return AnimatedContainer(
                duration: const Duration(seconds: 1),
                transform: Matrix4.translationValues(animation.value, 0, 0),
                child: Container(
                  key: key,
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  void _segue() {
    controller.forward().whenComplete(() {
      Navigator.push(
        context,
        PageRouteBuilder<void>(
          settings: const RouteSettings(name: '/lib/sample_widget'),
          pageBuilder: (context, animation, secondaryAnimation) =>
              const SampleWidget(),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            if (animation.isCompleted) {
              return FadeTransition(
                opacity: animation,
                child: child,
              );
            } else {
              return Container();
            }
          },
        ),
      ).then((_) => controller.reset());
    });
  }
}

extension GlobalKeyEx on GlobalKey {
  Rect? get globalPaintBounds {
    final renderObject = currentContext?.findRenderObject();
    final translation = renderObject?.getTransformTo(null).getTranslation();
    if (translation != null && renderObject?.paintBounds != null) {
      return renderObject!.paintBounds
          .shift(Offset(translation.x, translation.y));
    } else {
      return null;
    }
  }
}

import 'package:flutter/material.dart';


class SampleWidget extends StatelessWidget {
  const SampleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        alignment: Alignment.topRight,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.popUntil(context, (route) => route.isFirst);
            },
            child: Material(
              child: Container(
                alignment: Alignment.center,
                child: const Text(
                   'segue_page2',
                  style: TextStyle(
                    color: Colors.black,
                  ),
                ),
              ),
            ),
          ),
          const SampleWidget2(),
        ],
      ),
    );
  }
}

class SampleWidget2 extends StatelessWidget {
  const SampleWidget2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

2022-11-19.18.01.46.mov

https://github.com/daisukenagata/AnimationSegue