Flutter Hero Animations: плавные переходы между страницами

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

Метод 1: использование виджета Hero

// Screen 1
class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 1'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => Screen2()),
          );
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network('https://example.com/image.jpg'),
        ),
      ),
    );
  }
}
// Screen 2
class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 2'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network('https://example.com/image.jpg'),
          ),
        ),
      ),
    );
  }
}

Метод 2: использование PageRouteBuilder

// Screen 1
class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 1'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            PageRouteBuilder(
              transitionDuration: Duration(milliseconds: 500),
              pageBuilder: (_, __, ___) => Screen2(),
              transitionsBuilder: (_, animation, __, child) {
                return FadeTransition(
                  opacity: animation,
                  child: child,
                );
              },
            ),
          );
        },
        child: Image.network('https://example.com/image.jpg'),
      ),
    );
  }
}
// Screen 2
class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 2'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network('https://example.com/image.jpg'),
        ),
      ),
    );
  }
}

Метод 3: использование SharedAxisTransition

// Screen 1
class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 1'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            PageRouteBuilder(
              transitionDuration: Duration(milliseconds: 500),
              pageBuilder: (_, __, ___) => Screen2(),
              transitionsBuilder: (_, animation, __, child) {
                return SharedAxisTransition(
                  animation: animation,
                  secondaryAnimation: __,
                  transitionType: SharedAxisTransitionType.horizontal,
                  child: child,
                );
              },
            ),
          );
        },
        child: Image.network('https://example.com/image.jpg'),
      ),
    );
  }
}
// Screen 2
class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 2'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network('https://example.com/image.jpg'),
        ),
      ),
    );
  }
}

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