[flutter] 플러터 앱의 라우팅 (Routing)과 내비게이션 (Navigation)

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로서, 다양한 플랫폼에서 동작하는 앱을 만들 수 있습니다. 앱 개발 과정에서 중요한 요소 중 하나는 사용자 간의 화면 전환을 원활하게 처리하는 라우팅(Routing)과 내비게이션(Navigation)입니다. 이를 통해 사용자는 앱 내에서 다른 화면으로 이동하고 정보를 전달할 수 있습니다.

라우팅 (Routing)

라우팅은 앱 내에서 다른 화면을 보여주는 과정을 말합니다. 플러터에서는 MaterialApp 위젯을 사용하여 앱의 라우트를 설정할 수 있습니다. MaterialApp 위젯 내에서 routes 맵에 경로와 해당 화면을 등록하면, 특정 경로로 이동할 때 해당 화면을 보여줍니다.

다음은 routes 맵에 경로와 해당 화면 위젯을 등록하는 예시입니다.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

위의 예시에서는 ‘/’ 경로에는 HomePage 위젯, ‘/second’ 경로에는 SecondPage 위젯을 등록했습니다. 이제 해당 경로로 이동하면 각각의 화면이 표시됩니다.

내비게이션 (Navigation)

내비게이션은 사용자의 앱 내에서의 화면 전환과 정보 전달을 관리하는 방법입니다. 사용자가 버튼을 클릭하거나 다른 이벤트를 통해 화면을 전환하려는 경우, 해당 화면으로 이동하기 위해 내비게이션을 사용합니다.

내비게이션을 사용하기 위해서는 Navigator 클래스를 사용합니다. 플러터에서는 주로 push() 메서드를 사용하여 다른 화면으로 이동합니다. push() 메서드는 새로운 화면을 스택에 쌓고 보여줍니다.

다음은 버튼을 클릭해서 다른 화면으로 이동하는 예시입니다.

RaisedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondPage()),
    );
  },
  child: Text('Go to Second Page'),
),

위의 예시에서는 RaisedButton 위젯을 사용하여 버튼을 생성하고, 버튼이 클릭되었을 때 Navigator.push() 메서드를 호출하여 SecondPage로 이동합니다.

push() 메서드를 사용하여 화면을 이동하면, 스택에 새로운 페이지가 쌓이게 됩니다. 이전 화면으로 되돌아가기 위해서는 Navigator.pop() 메서드를 사용할 수 있습니다.

정리

플러터를 사용하여 앱을 개발할 때 중요한 요소 중 하나는 라우팅과 내비게이션입니다. 라우팅은 앱 내에서 다른 화면으로 이동하는 과정을 정의하고, 내비게이션은 이동한 화면에서 다시 이전 화면으로 돌아갈 수 있도록 관리하는 것입니다. 이를 통해 사용자에게 직관적이고 원활한 사용자 경험을 제공할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참조하시기 바랍니다.