페이지 이동

Flutter에 페이지이동(Routing) 메커니즘

• 명령형 라우팅 메커니즘 : Navigator 위젯
• 선언적 라우팅 메커니즘 : Router 위젯

두 시스템을 함께 사용할 수 있다(실제로 선언적 시스템은 명령형 시스템을 사용하여 구축됨).

작은 응용 프로그램은  MaterialApp.routes 속성을 통해 Navigator API를 사용하여 잘 제공된다.

더 정교한 애플리케이션은 일반적으로 MaterialApp.router 생성자를 통해 Router API에서 더 잘 제공된다.

이를 위해서는 애플리케이션에 대한 딥 링크를 구문 분석하는 방법과 애플리케이션 상태를 활성 페이지 세트에 매핑하는 방법을 설명하기 위해 더 많은 선행 작업이 필요하지만 장기적으로 더 많은 표현이 가능하다.

flutter 에서 기본적인 페이지간 이동에 관해 알아보자

같은 이미지를 보여주는 두개의 screen 을 만든다고 가정 하자

 

1. 두 화면에 동일한 이미지를 표시한다.
2. 사용자가 이미지를 탭하면 첫 번째 화면에서 두 번째 화면으로 이동한다. 
3. 다음 단계에서 화면 이동시에 애니메이션을 적용해 보자

 

두 화면에 동일한 이미지를 표시

lib/navigation/show_images.dart

import 'package:flutter/material.dart';

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Screen'),
      ),
      body: Image.network(
        'https://picsum.photos/250?image=9',
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

 

사용자가 이미지를 탭하면 첫 번째 화면에서 두 번째 화면으로 이동

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

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

...

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

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

...

MainScreen 의 GestureDector 의 onTap() 에서 Navigator.push 를 통해 DetailScreen 로 이동한다. 

DetailScreen 의 GestureDector 의 onTap() 에서 Navigator.pop 을 통해 page 를 back 하여 MainScreen  으로 이동한다.

 

 화면 이동시에 애니메이션을 적용

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

 

Hero 라는 widget 을 통해 화면이동시에 animation 을 줄수 있다.

tag 를 이전 screen 의 Hero tag 와 맞추어 주면 된다. 

 

 

 

관련영상

https://youtu.be/y-UgI5VktYc