플러터 강좌, 10.2 라우트와 화면 이동

이번 강좌에서는 플러터에서 화면 간의 이동을 처리하는 방법과 라우트의 개념에 대해 깊이 있게 다루어 보겠습니다. 화면 전환은 모바일 애플리케이션의 중요한 기능 중 하나로, 사용자에게 매끄러운 경험을 제공해야 합니다. 따라서, 라우트와 네비게이션을 사용하는 법을 잘 이해하는 것이 중요합니다.

1. 라우트란 무엇인가?

라우트(route)는 모바일 앱의 각 화면을 지칭하는 개념입니다. 플러터는 두 가지 유형의 라우트를 제공합니다: 기본 라우트와 네임드 라우트. 기본 라우트는 특정 위젯을 가리키며, 네임드 라우트는 문자열을 사용하여 특정 라우트를 식별합니다.

2. 플러터의 네비게이션 구조

플러터의 네비게이션 구조는 기본적으로 스택 구조를 사용합니다. 사용자가 새로운 화면으로 이동할 때마다 이전 화면은 스택에 추가되고, 새 화면이 최상위에 위치하게 됩니다. 사용자가 뒤로 가기를 누르면 최상단의 화면이 제거되고 이전 화면으로 돌아갑니다.

2.1 네비게이터 위젯

네비게이터는 라우트를 관리하는 위젯으로, 여러 개의 라우트를 쌓아 놓고 관리할 수 있는 방식입니다. 이를 통해 다양한 화면 전환 애니메이션과 효과를 구현할 수 있습니다.

3. 라우트를 이용한 화면 전환하기

라우트를 사용하여 화면을 전환하는 방법은 크게 두 가지로 나눌 수 있습니다. 첫 번째는 Navigator.push()를 사용하는 방법이고, 두 번째는 Navigator.pushNamed()를 이용하는 방법입니다.

3.1 Navigator.push()

Navigator.push() 메서드는 현재 화면에 새로운 화면을 추가합니다. 다음은 이 메서드를 활용하여 새로운 화면을 전환하는 방법입니다.

Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()));

3.2 Navigator.pushNamed()

네임드 라우트를 사용하면 코드가 더 간결해지는 장점이 있습니다. 네임드 라우트를 사용하려면 먼저 MaterialApp의 routes 속성에 라우트를 정의해야 합니다.

MaterialApp(
    routes: {
        '/': (context) => HomeScreen(),
        '/new': (context) => NewScreen(),
    },
);

이후 화면 간 전환은 다음과 같이 할 수 있습니다.

Navigator.pushNamed(context, '/new');

4. 화면 전환 애니메이션

플러터에서는 화면 전환 시 다양한 애니메이션을 적용할 수 있습니다. PageRouteBuilder를 사용하여 커스터마이즈 할 수 있습니다. 이 방법을 사용하면 전환 애니메이션의 시작과 끝, 그리고 전환 시의 위젯을 세밀하게 조정할 수 있습니다.

Navigator.push(context, PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NewScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(1.0, 0.0);
        const end = Offset.zero;
        const curve = Curves.easeInOut;

        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
            position: offsetAnimation,
            child: child,
        );
    },
));

5. 라우트를 이용한 데이터 전달

라우트를 통해 화면 간 데이터 전달이 가능합니다. 새로운 화면으로 데이터를 전달하려면 위젯을 생성할 때 생성자에 데이터를 전달하면 됩니다.

class NewScreen extends StatelessWidget {
    final String data;

    NewScreen(this.data);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("New Screen")),
            body: Center(child: Text(data)),
        );
    }
}

데이터 전달은 다음과 같이 가능하죠:

Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen("Hello, Flutter!")));

6. 라우트를 통한 결과 반환

화면 전환 후, 이전 화면으로 결과를 반환할 수 있습니다. 이를 통해 사용자에게 입력을 받고, 그 결과에 따라 다음 행동을 취할 수 있습니다. Navigator.pop() 메서드를 사용할 수 있습니다.

Navigator.pop(context, "Returned Data");

7. 결론

이번 강좌에서는 플러터의 라우트 및 화면 이동에 대해 다루어 보았습니다. 라우트를 사용하는 것은 화면 간의 전환을 효율적으로 관리하고, 사용자 경험을 개선하는 데 필수적입니다. 다양한 방법으로 화면을 이동하고 데이터도 교환할 수 있으니, 실제 앱 개발에서 적극 활용해보시기 바랍니다.

이 글이 여러분의 플러터 학습에 도움이 되기를 바라며, 다음 강좌에서는 플러터의 상태 관리에 대해 다루어 보겠습니다. 감사합니다!