Оценок пока нет Анимируем виджет по экранам

Часто бывает полезно направлять пользователей через приложение при переходе с экрана на экран. Распространенная техника, позволяющая проводить пользователей через приложение, — анимировать виджет с одного экрана на другой. Это создает визуальную привязку, соединяющую два экрана.

Используйте виджет «Герой»(Hero), чтобы анимировать виджет с одного экрана на другой. Этот рецепт использует следующие шаги:

1. Создайте два экрана, показывающие одно и то же изображение.
2. Добавьте виджет Hero на первый экран.
3. Добавьте виджет Hero на второй экран.

1. Создаем два экрана, показывающие одно и то же изображение

В этом примере отобразите одно и то же изображение на обоих экранах. Анимируйте изображение с первого экрана на второй, когда пользователь нажимает на изображение. Пока создайте визуальную структуру; обрабатывать анимацию на следующих шагах.

[info] Примечание. Этот пример основан на Navigate to a new screen and back и рецептов Handle taps . [/info]

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
        child: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

2. Добавляем виджет Hero на первый экран.

Чтобы соединить два экрана вместе с анимацией, оберните виджет Image на обоих экранах в виджет Hero. Виджет Hero требует двух аргументов:

• tag — Объект, который идентифицирует Hero. Он должен быть одинаковым на обоих экранах.
• child — Виджет для анимации по экранам.

Виджет для анимации по экранам.

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
);

3. Добавьте виджет Hero на второй экран

Чтобы завершить соединение с первым экраном, оберните Image на втором экране виджетом Hero, который имеет тот же tag, что и герой Hero на первом экране.

После применения виджета Hero ко второму экрану анимация между экранами просто работает.

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
);

[info] Примечание: этот код идентичен тому, что у вас есть на первом экране. Рекомендуется создавать многократно используемый виджет вместо повторяющегося кода. Этот пример использует идентичный код для обоих виджетов, для простоты. [/info]

Полный пример

import 'package:flutter/material.dart';

void main() => runApp(HeroApp());

class HeroApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Transition Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

Данная статься была переведена с официального ресурса по ссылке Animating a widget across screens.