플러터(flutter) - Column 세로 정렬 방법 (MainAxisAlignment)

MainAxisAlignment 속성을 이용하여 Column의 child 위젯을 정렬할 수 있다.

• 웹 개발을 해본 사람은 쉽게 이해할 수 있다.

 

기본 코드

      

      

      

    
    

      <java />
    
import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "Column 위젯 정렬 예시", home: ColumnExample());
  }
}

class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            )
          ],
        ),
      ),
    );
  }
}

 

1. 상단에서부터 정렬

MainAxisAlignment.start를 이용하여 상단부터 차곡차곡 쌓는다.

      

      

      

    
    

      <java />
    
class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start, // 상단에 맞춰 정렬
          children: [
            ..중략..
          ],
        ),
      ),
    );
  }
}

start

 

2. 가운데 정렬

MainAxisAlignment.center를 이용하여 가운데로 정렬한다.

      

      

      

    
    

      <java />
    
class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 가운데 정렬
          children: [
            ..중략..
          ],
        ),
      ),
    );
  }
}

center

 

3. 하단에서부터 정렬

MainAxisAlignment.end를 이용하여 하단부터 차곡차곡 쌓는다.

      

      

      

    
    

      <java />
    
class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end, // 하단에 맞춰 정렬
          children: [
            ..중략..
          ],
        ),
      ),
    );
  }
}

end

 

4. 같은 간격만큼 공간을 두고 정렬

4.1. MainAxisAlignment.spaceAround

spaceAround는 각 위젯간에 여백이 생긴다. 그리고, 양끝에 여백이 생긴다.

      

      

      

    
    

      <java />
    
class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround, // 같은 간격을 두고 정렬
          children: [
            ..중략..
          ],
        ),
      ),
    );
  }
}

spaceAround

 

4.2. MainAxisAlignment.spaceBetween

spaceAround와 비슷하지만, 양끝에 여백이 없이 정렬이 된다.

      

      

      

    
    

      <java />
    
class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment:
              MainAxisAlignment.spaceBetween, // 같은 간격을 두고 정렬 (양끝 여백 없음)
          children: [
            ...중략...
          ],
        ),
      ),
    );
  }
}

spaceBetween

4.3. MainAxisAlignment.spaceEvenly

spaceAround와 똑같아 보이지만 미세하게 차이가 있다.

• spaceAround는 각 위젯의 간격의 절반만 앞뒤로 여백을 가진다.
• spaceEvenly는 각 위젯의 간격만큼 앞뒤로 여백을 가진다.

      

      

      

    
    

      <java />
    
class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 같은 간격을 두고 정렬
          children: [
            ...중략...
          ],
        ),
      ),
    );
  }
}

spaceEvenly

 

왼 - spaceEvenly / 우 - spaceAround

 

5. 다른 글

2021/01/03 - [Flutter] - 플러터(flutter) - Column 가로 정렬 방법 (CrossAxisAlignment)

플러터(flutter) - Column 가로 정렬 방법 (CrossAxisAlignment)

2021/01/02 - [Flutter] - 플러터(flutter) - 기본 레이아웃 (Column, Row, Container)

플러터(flutter) - 기본 레이아웃 (Column, Row, Container)

2021/01/02 - [Flutter] - 플러터(flutter) - Container와 SizedBox의 차이

플러터(flutter) - Container와 SizedBox의 차이