flutter ROW, COLUMN 알아보기

flutter 에서 기본으로 위젯들을 정렬할때 사용하는 2개의 키워드를 알아봅시다

 

 

 

 

 

 

이것은 공식 사이트에서 의 두 키워드를 설명할때 사용하는 이미지입니다

 

 

ROW

배치를  행  즉  수평 형태로 (왼쪽에서 오른쪽) 위젯을 순차적으로 배치 합니다.

 

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo01',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row - MainAxisAlignment.start'),
        ),
        body: Row (
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.black),
          ],
        ),
      ),
    );
  }
}

 

이걸 그대로 COLUMN 으로 변경을 해봅시다. 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo01',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row - MainAxisAlignment.start'),
        ),
        body: Column ( // Row 에서 Column 으로 변경 
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.black),
          ],
        ),
      ),
    );
  }
}

 

 

 

기타 설정

crossAxisAlignment (상하좌우 양축 정렬)

• CrossAxisAlignment.baseline : 폰트크기가 다르거나 할때 기본 라인 축에 맞춰 정렬할때 유용
• CrossAxisAlignment.start : 시작지점으로 맞춤, 이후 좌우(Column인 경우) 또는 상하(Row인 경우) 간격을 맞춤
• CrossAxisAlignment.stretch : 늘림(최대화)
• CrossAxisAlignment.center : 중앙정렬

mainAxisSize 메인 축의 크기(컨테이너 영역)

• MainAxisSize.min : 최소화
• MainAxisSize.max : 최대화