[flutter] 플러터 Column을 사용한 화면 전환 처리 방법

20 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 다양한 화면 전환 처리를 구현해야 하는데, Column 위젯을 활용하여 간단한 화면 전환을 구현하는 방법에 대해 알아보겠습니다.

1. Column 위젯

Column은 세로로 요소를 배열하는 데 사용되는 플러터 위젯입니다. Column은 자식 위젯들을 수직으로 배열하고, 화면 크기를 채우기 위해 자식 위젯의 가로 너비를 확장합니다.

아래는 Column을 사용하여 두 개의 화면을 처리하는 방법에 대한 기본적인 예제 코드입니다.

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: MyColumnScreen(),
      ),
    );
  }
}

class MyColumnScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            // 화면 전환 처리
          },
          child: Text('화면 1로 이동'),
        ),
        ElevatedButton(
          onPressed: () {
            // 화면 전환 처리
          },
          child: Text('화면 2로 이동'),
        ),
      ],
    );
  }
}

2. 화면 전환 처리

위의 예제 코드에서는 ElevatedButton 위젯을 사용하여 두 개의 버튼을 생성하고, 각 버튼에 대한 화면 전환 처리를 할 수 있습니다.

화면 1로 이동하는 버튼의 onPressed 콜백에는 해당 화면으로 이동하는 코드를 작성하고, 화면 2로 이동하는 버튼의 onPressed 콜백에는 해당 화면으로 이동하는 코드를 작성하면 됩니다.

3. 화면 전환 처리 예제

아래는 간단한 화면 전환 처리 예제 코드입니다.

void navigateToScreen1(BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => Screen1()),
  );
}

void navigateToScreen2(BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => Screen2()),
  );
}

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

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

마무리

위의 예제를 참고하여 Column을 사용하여 간단한 화면 전환을 처리하는 방법에 대해 알아보았습니다. Column을 이용하면 세로 방향으로 요소를 배열하고, 버튼을 통해 간단한 화면 전환을 구현할 수 있습니다.

참고문헌: Flutter Column Class