이번 글에서는 플러터(Flutter) 앱에서 화면 전환과 라우팅을 구현하는 방법에 대해 알아보겠습니다. 플러터는 화면 전환을 위한 Navigator 클래스와 MaterialPageRoute 클래스를 제공합니다. 이를 활용하여 간단하게 화면 전환이 가능합니다.

1. 기본 라우팅

가장 기본적인 형태의 화면 전환은 MaterialPageRoute를 사용하여 새로운 화면으로 이동하는 것입니다.

FlatButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
  },
  child: Text('두 번째 화면으로 이동'),
),

위 코드는 버튼이 클릭되면 SecondScreen으로 화면이 전환됩니다. Navigator.push 메서드를 사용하여 새로운 화면을 시작하고, MaterialPageRoute를 이용하여 새로운 화면을 정의합니다.

2. 화면 닫기

새로운 화면으로 이동했을 때, 이전 화면으로 돌아가는 방법은 다음과 같습니다.

FlatButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: Text('이전 화면으로 돌아가기'),
),

위 코드는 버튼이 클릭되면 이전 화면으로 돌아가게 됩니다.

3. 이름 있는 라우팅

MaterialPageRoute 를 이용하여 다음 화면으로 이동할 때, 이름을 지정하여 명시적인 라우팅을 구현할 수 있습니다.

FlatButton(
  onPressed: () {
    Navigator.pushNamed(context, '/second');
  },
  child: Text('두 번째 화면으로 이동'),
),

라우트를 설정할 때 아래와 같이 라우트 테이블에 이름과 화면을 설정합니다.

MaterialApp(
  routes: {
    '/second': (context) => SecondScreen(),
  },
);

이제 이름으로 라우팅을 할 수 있게 됩니다.

이렇게 하여 플러터 앱에서 간단하게 화면 전환과 라우팅을 구현해볼 수 있습니다. 추가적으로 애니메이션과 다른 화면 전환 효과를 적용하는 방법에 대해서도 알아보시기 바랍니다.

더 자세한 사항은 플러터 공식 문서를 참고하세요.

• 참고 문서 : 플러터 공식 문서