Flutter Animation: как анимировать виджет за пределами экрана

Чтобы анимировать виджет Flutter за пределами экрана, вы можете использовать различные методы анимации, предоставляемые платформой Flutter. Вот несколько методов с примерами кода:

Метод 1: переход слайдов

import 'package:flutter/material.dart';
class SlideTransitionScreen extends StatefulWidget {
  @override
  _SlideTransitionScreenState createState() => _SlideTransitionScreenState();
}
class _SlideTransitionScreenState extends State<SlideTransitionScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<Offset> _animation;
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    _animation = Tween<Offset>(
      begin: Offset.zero,
      end: Offset(-1.0, 0.0),
    ).animate(_animationController);
    _animationController.forward();
  }
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation,
      child: YourWidget(), // Replace YourWidget with the widget you want to animate
    );
  }
}

Метод 2: преобразование перехода

import 'package:flutter/material.dart';
class TransformTransitionScreen extends StatefulWidget {
  @override
  _TransformTransitionScreenState createState() =>
      _TransformTransitionScreenState();
}
class _TransformTransitionScreenState extends State<TransformTransitionScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    _animation = Tween<double>(
      begin: 0.0,
      end: -1.0,
    ).animate(_animationController);
    _animationController.forward();
  }
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.translationValues(
          _animation.value * MediaQuery.of(context).size.width, 0.0, 0.0),
      child: YourWidget(), // Replace YourWidget with the widget you want to animate
    );
  }
}

Метод 3. Пользовательская анимация

import 'package:flutter/material.dart';
class CustomAnimationScreen extends StatefulWidget {
  @override
  _CustomAnimationScreenState createState() => _CustomAnimationScreenState();
}
class _CustomAnimationScreenState extends State<CustomAnimationScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    _animation = Tween<double>(
      begin: 0.0,
      end: -1.0,
    ).animate(_animationController);
    _animationController.forward();
  }
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return Transform(
          transform: Matrix4.translationValues(
              _animation.value * MediaQuery.of(context).size.width, 0.0, 0.0),
          child: YourWidget(), // Replace YourWidget with the widget you want to animate
        );
      },
    );
  }
}

Это всего лишь несколько примеров анимации виджета за пределами экрана во Flutter. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям.