개요

이번 포스트에서는 플러터(Flutter)앱에서 Column을 이용하여 라우팅 하는 방법에 대해 알아보겠습니다. 라우팅은 화면간의 전환을 관리하는 매우 중요한 역할을 합니다.

Column 위젯

Column은 세로로 구성된 레이아웃을 생성하는데 사용되며, 여러 개의 자식 위젯을 포함할 수 있습니다. 각 자식 위젯은 화면을 세로로 나타냅니다.

라우팅의 기본

라우팅을 구현하기 위해서는 MaterialPageRoute를 사용해야 합니다. 이를 통해 새로운 페이지로 이동하게 됩니다.

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

위 코드에서 Navigator.push 메서드는 현재 화면에서 새로운 화면으로 이동하도록 해줍니다. 또한 MaterialPageRoute를 통해 새로운 화면을 정의할 수 있습니다.

Column과 라우팅의 활용

Column 위젯 내에서 각각의 자식 위젯에 라우팅을 적용할 수 있습니다.

Column(
  children: <Widget>[
    RaisedButton(
      child: Text('Go to Screen 2'),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => SecondScreen()),
        );
      },
    ),
    RaisedButton(
      child: Text('Go to Screen 3'),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => ThirdScreen()),
        );
      },
    ),
  ],
)

위 코드에서 Column 내의 각 RaisedButton은 클릭 시 각각의 SecondScreen과 ThirdScreen 페이지로 이동하도록 설정되어 있습니다.

결론

이렇게하면 플러터(Column)을 이용하여 간단하게 라우팅을 구현할 수 있습니다. 각각의 자식 위젯을 통해 사용자 경험을 향상시킬 수 있으며, 페이지 간의 전환을 관리하는데 유용합니다.

이상으로 플러터 Column을 이용한 라우팅 처리에 대해 알아보았습니다.

해당 내용에 대한 궁금한 점이 있으시다면 부담없이 물어봐주시면 감사하겠습니다!

라우팅과 네비게이션 - 플러터 공식 문서