[플러터] 위젯 세로 정렬하기 - Cloumn 클래스 사용법

Column 클래스의 세로 정렬

Column 클래스는 수직 방향으로 위젯을 배치하는데 사용됩니다. 각 위젯은 children 매개변수에 리스트 형태로 추가할 수 있습니다.

기본 구조

아래는 Column 위젯에 두 개의 Text 위젯을 추가한 기본 예제입니다:

Column(
  children: [
    Text('Hello'),
    Text('World!'),
  ],
)

children 매개변수에 여러 위젯 추가

children 매개변수에는 여러 개의 위젯을 리스트로 입력할 수 있습니다. 아래는 MyApp 클래스의 예시입니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text('Hello'),
            Text('World!'),
          ],
        ),
      ),
    );
  }
}

Column 위젯의 세로 정렬 방법

mainAxisAlignment 매개변수를 사용하여 Column 내 위젯의 세로 정렬을 제어할 수 있습니다. 이 매개변수에는 MainAxisAlignment enum 값을 입력합니다.

가운데 정렬

위젯을 세로로 가운데 정렬하려면 mainAxisAlignment 매개변수에 MainAxisAlignment.center를 입력합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Hello'),
            Text('World!'),
          ],
        ),
      ),
    );
  }
}

위쪽 정렬

위젯을 상단에 정렬하려면 mainAxisAlignment 매개변수에 MainAxisAlignment.start를 입력합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text('Hello'),
            Text('World!'),
          ],
        ),
      ),
    );
  }
}

아래쪽 정렬

위젯을 하단에 정렬하려면 mainAxisAlignment 매개변수에 MainAxisAlignment.end를 입력합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Text('Hello'),
            Text('World!'),
          ],
        ),
      ),
    );
  }
}

균등 분배 정렬

위젯을 균등하게 분배하려면 mainAxisAlignment 매개변수에 MainAxisAlignment.spaceEvenly를 입력합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Hello'),
            Text('World!'),
          ],
        ),
      ),
    );
  }
}

공간 배분 정렬

위젯 사이에 동일한 간격을 두려면 mainAxisAlignment 매개변수에 MainAxisAlignment.spaceBetween를 입력합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Hello'),
            Text('World!'),
          ],
        ),
      ),
    );
  }
}

위의 방법들을 통해 Column 위젯 내에서 원하는 대로 세로 정렬을 설정할 수 있습니다. 이를 통해 보다 유연하고 다양한 레이아웃을 구현할 수 있습니다.

결론

Column 위젯은 수직 방향으로 위젯을 배치하는 데 사용되며, children 매개변수에 여러 위젯을 추가할 수 있습니다. mainAxisAlignment 매개변수를 사용하면 위젯을 상단, 중앙, 하단, 균등 분배, 또는 공간 배분 방식으로 정렬할 수 있습니다. 이를 통해 다양한 레이아웃을 손쉽게 구현할 수 있습니다.