본문 바로가기

프레임워크/플러터

플러터로 UI 만들 때 필요한 Column 위젯 알아보기

반응형

플러터로 앱을 만들다 보면 화면에 여러 요소를 세로로 나열할 때가 많아요. 그럴 때 사용하는 게 바로 Column 위젯이에요. 오늘은 이 Column에 대해 쉽게 알아볼까 합니다.

  1. Column 위젯이 뭐야?
    Column은 간단하게 말하면 여러 요소들을 세로로 쭉 나열해 주는 친구입니다. 화면에 글, 그림, 버튼 등을 세로로 배치하고 싶을 때 사용해요.
  2. 어떻게 쓰는 거지?
    Column은 아주 쉽게 쓸 수 있어요. children이라는 곳에 원하는 요소들을 리스트로 넣어주면 됩니다.
Copy code
Column(
  children: <Widget>[
    Text('첫 번째 글귀'),
    Text('두 번째 글귀'),
    Text('세 번째 글귀'),
  ],
)

위의 코드는 세 줄의 글을 세로로 나열한 거에요.

  1. 뭐가 특별해?
    Column은 여러 가지 기능이 있어서 원하는 대로 배치할 수 있어요. 중앙에 놓을 수도 있고, 위나 아래에 맞출 수도 있습니다. 이런 걸 설정해 주는 것들이 mainAxisAlignment이나 crossAxisAlignment 같은 옵션이에요.
  2. 다른 예시는 어떻게 되지?
    Column은 다른 위젯, 예를 들면 Row와 조합하면 화면 구성이 더 다양해져요.
Copy code
Column(
  children: <Widget>[
    Text('제목'),
    Row(
      children: <Widget>[
        Icon(Icons.star),
        Text('4.7점'),
      ],
    ),
    Text('아래에는 다른 내용이 들어가요.'),
  ],
)

이렇게 Column 안에 Row를 넣어서 별 아이콘과 점수를 옆으로 나열할 수도 있어요.

  1. 마무리
    Column 위젯은 플러터로 앱 만들 때 정말 유용하게 쓰이는 친구에요. 이 친구를 잘 활용하면 화면을 쉽게 꾸밀 수 있답니다.

그럼 오늘은 여기까지! 다음에는 또 다른 유용한 위젯들에 대해 같이 알아보아요!

반응형