Hero

Widżet Hero to po prostu element jednego ekranu „przelatujący” do następnego, gdy aplikacja przechodzi na następną stronę.

Ten widżet przyjmuje element, w tym przypadku jest to zdjęcie, które jest nazywane „Hero”, a po uruchomieniu przejścia między stronami, zwykle przez kliknięcie, to zdjęcie przechodzi na następną stronę. Kiedy użytkownik nawiguje z powrotem do poprzedniej strony, animacja idzie w innym kierunku, a zdjęcie wraca na swoje miejsce.

---

Tworzenie podstawowej animacji Hero

Animacja Hero jest prawdopodobnie jedną z najłatwiejszych animacji we Flutterze i nie wymaga zbytniej konfiguracji. Patrząc na poniższy przykład, widzimy, że na obu stronach istnieje ten sam widżet, czyli zdjęcie. Wszystko, czego potrzebujemy, to sposób, aby przekazać Flutterowi, że oba widżety są połączone. Robimy to, owrapowując element, w tym przypadku zdjęcie, w widżet Hero. Należy pamiętać aby parametr o nazwie tag posiadał tę samą nazwę na obu stronach.

class FirstPage extends StatelessWidget {
  const FirstPage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[50],
      appBar: AppBar(
        title: const Text(
          'Pierwsza strona',
        ),
      ),
      body: InkWell(
        onTap: () => Navigator.of(context).push(
          MaterialPageRoute(
            builder: (_) => const SecondPage(),
          ),
        ),
        child: Hero(
          tag: 'tag',
          child: Image.network(
            'url',
            width: 200,
          ),
        ),
      ),
    );
  }
}


class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green[50],
      appBar: AppBar(
        title: const Text(
          'Druga strona',
        ),
      ),
      body: Hero(
        tag: 'tag',
        child: Image.network(
            'url'),
      ),
    );
  }
}

PODSUMOWANIE

To tyle w tym krótkim artykule jak stworzyć przejście animacji Hero we Flutterze. Mam nadzieję, że Wam się podobało. Będę publikowała więcej o widżetach Flutter, więc bądźcie czujni 🙂