Colin's Blog
[flutter] 플러터에서의 네비게이션 처리 방법

Flutter는 Google에서 개발한 UI 프레임워크로서, 네비게이션 처리는 앱의 다양한 화면 간 전환과 관련된 기능입니다. Flutter에서는 다양한 방법을 통해 네비게이션을 처리할 수 있습니다. 이 글에서는 가장 일반적인 네비게이션 처리 방법에 대해 알아보겠습니다.

1. 기본 네비게이션

Flutter에서 가장 간단한 네비게이션 처리 방법은 Navigator를 사용하는 것입니다.

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

위의 코드는 현재 화면에서 SecondScreen으로 전환하는 코드입니다. Navigator.push는 현재 컨텍스트와 목적지로 사용할 Route를 받아 새로운 화면으로 전환하는 역할을 합니다.

또한, Navigator를 사용하여 이전 화면으로 돌아가는 것도 가능합니다.

Navigator.pop(context);

Navigator.pop은 현재 화면을 제거하고 이전 화면으로 돌아갑니다.

2. Named Routes를 이용한 네비게이션

Named Routes는 Flutter에서 화면 전환을 편리하게 관리하기 위한 방법입니다.

// MaterialApp 위젯에서 routes 프로퍼티를 설정하여 Named Routes를 정의한다.
routes: {
  '/': (context) => HomeScreen(),
  '/second': (context) => SecondScreen(),
},

위의 코드는 루트 경로(/)와 /second 경로에 대한 화면을 정의한 예시입니다.

이렇게 Named Routes를 정의한 후에는 아래와 같이 경로를 이용하여 화면 전환을 할 수 있습니다.

Navigator.pushNamed(context, '/second');
Navigator.popAndPushNamed(context, '/');

위의 코드는 /second로 이동하고, 현재 화면을 제거하고 루트 경로(/)로 이동하는 예시입니다.

3. Route Arguments 전달하기

앱에서 화면 전환 시 데이터를 전달하려면 Route Arguments를 사용할 수 있습니다.

class SecondScreen extends StatelessWidget {
  final String message;

  SecondScreen({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(message),
      ),
    );
  }
}

// 전환 시 데이터를 전달한다.
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(
      message: 'Hello, Flutter!',
    ),
  ),
);

위의 코드는 SecondScreen 클래스에 message라는 인자를 전달하여 데이터를 화면으로 전달하는 예시입니다.

이렇게 전달된 데이터는 해당 화면에서 사용할 수 있게 됩니다.

결론

Flutter에서는 다양한 방법을 통해 네비게이션 처리를 할 수 있습니다. 이 글에서는 기본 네비게이션, Named Routes를 사용한 네비게이션, 그리고 Route Arguments 전달 방법에 대해 알아보았습니다. 세부적인 동작 방식과 더 많은 기능들은 공식 문서를 참고하시기 바랍니다.

References:

© 2018 Colin. All rights reserved.