[flutter] 플러터 Column에서의 네비게이션 구성 방법

20 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면 여러 화면 간의 네비게이션을 구성해야 하는 경우가 있습니다. 이때 Column 위젯 안에서의 네비게이션 구성은 조금 다를 수 있습니다. 이 포스트에서는 Column 위젯 안에서의 네비게이션 구성 방법에 대해 알아보겠습니다.

Column 위젯과 네비게이션

Column 위젯은 세로로 위젯을 배열하는데 사용됩니다. 일반적으로 각 위젯은 자식(children) 목록을 가지고 있으며, 자식 위젯들은 세로로 쌓이게 됩니다.

네비게이션은 화면 간의 전환을 의미하며, 일반적으로 터치 이벤트나 버튼 클릭과 같은 사용자 입력을 통해 이루어집니다.

Column에서의 네비게이션 구성

Column 위젯 안에서의 네비게이션을 구성하기 위해서는 Navigator 클래스를 사용하여 화면을 전환할 수 있습니다. 아래는 Column 안에 RaisedButton을 사용하여 다른 화면으로 이동하는 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column 네비게이션'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('두 번째 화면으로 이동'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 화면'),
      ),
      body: Center(
        child: Text('두 번째 화면'),
      ),
    );
  }
}

위 예제에서는 RaisedButton을 터치하면 Navigator.push 함수를 사용하여 두 번째 화면으로 이동하는 것을 볼 수 있습니다.

결론

Column 위젯 안에서의 네비게이션 구성은 기존의 네비게이션과 동일하게 Navigator 클래스를 사용하여 가능합니다. Column이나 다른 레이아웃 위젯 안에서의 네비게이션 구성에 대해 자세히 알아보고 싶다면 여기를 참조해주세요.