[Flutter] Column과 Row에 대하여(Axis Alignment)

 

 

MainAxisAlignment와

CrossAxisAlignment

MainAxisSize

Expanded, Flexible에 대해 알아보즈아

 

그냥 이해를 위한 것은 눈으로 보면 되고

따라하면서 이해하실 분들은 아래 코드를 기본베이스로 해보시면 될 것이다.

 

 

사전세팅

 

일단 main.dart에 

 

import 'package:axispractice/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeScreen(
      ),
    ),
  );
}

 

 

그리고 다른 dart파일에 아래 코드를 입력하고 import 해옵니다.

 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Container(
          color: Colors.black,
          child: Column(
            children: [
              Container(
                color: Colors.red,
                width: 70.0,
                height: 70.0,
              ),
              Container(
                color: Colors.orange,
                width: 70.0,
                height: 70.0,
              ),
              Container(
                color: Colors.blue,
                width: 70.0,
                height: 70.0,
              ),

              Container(
                color: Colors.green,
                width: 70.0,
                height: 70.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드를 보면

 

background color가 black인 Containger에

child로 Column을 여러가지 색의 세운다.

 

 

위와 같이 되는데 이제

축정렬에 대해 하나씩 파해쳐 보자!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

---

 

MainAxisAlignment - 주축정렬

 

 

Column들에 대하여 정렬을 할 것이기 떄문에

Column 하단에 mainAxisAlignmnet: MainAxisAlignment.'정렬이름' 으로 정의한다.

 

어떤 정렬들이 어떻게 변하나 하나씩 살펴 보자

 

 

start

center

end

spaceBetween

spaceEvenly

spaceAround

 

 

 

하나씩 살펴보자

 

---

 

MainAxisAlignment.start

 

 

 

시작화면과 똑같다.

다만

 

start(시작)에 배치하는 것인데,  상단부터 Column들이 배치된다.

 

 

---

 

MainAxisAlignment.center

 

 

center(가운데)에 배치하는 것

 

---

MainAxisAlignment.end

 

 

 

 

end(끝)에 배치하는 것인데,  하단부터 Column들이 배치된다.

 

 

---

 

 

MainAxisAlignment.spaceBetween

 

 

 

 

위젯과 위젯사이에 동일한 간격으로 Column들이 배치되는 것이다.

위젯이 끝과 끝부터 배치가 된다.

 

---

 

MainAxisAlignment.spaceEvenly

 

 

           

 

 

위젯을 같은 간격으로 배치한다.

끝과 끝은 위젯이 아닌 빈 background로 간격이 시작
           

 

---

 

MainAxisAlignment.spaceAround

 

spaceAround는

 

spaceEvenly 와 같은 느낌인데

 

+ 끝과 끝의 간격은 빈 간격의 1/2만큼 준다

 

---

---

---

 

반대축정렬(CrossAxisAlignmnet)을 이해하기 위해

주축 정렬을 한 후에 코드를 좀 변형해보자. (어차피 반대축정렬하기 위해 필요한 과정)

 

 

주축정렬에서는

Row와 Column은 기본적으로

주축에서 남는 공간이 있다면,

최대할 수 있는 사이즈를 차지한다 

그리고

반대축은 최소한의 사이즈만 구성을 한다.

 

 

이게 무슨말이냐면

 

 

위 사진에서 주축은 우리가 Container에 Column을 세웠으므로

주축은 Column이다.(Container에 Row를 세우면 주축은 Row)

위 그림과 같이 Column에는 우리가 사이즈 70*70을 줬으므로

남는 공간을 background color인 black으로 채운다.

 

반대축이란 Column에 대한 반대 즉 Row를 정렬하는 것인데

현재는 Column에서 정의한 width 70.0만큼만 행으로 차지하고 나머지는 빈 공백이다

 

이게 또 무슨말이냐면

 

 

 

그렇기 때문에 반대축을 정렬하고자하면

최소한의 사이즈로 Row를 차지하고 나머지는 정의가 되지 않았기 떄문에

정렬을 할 수가 없다.

 

그래서 위 기준 Column에 대한 Width의 배경을 넖혀주기 위해

Container의 width에 MediaQuery.of(context).size로 배경을 넓혀주자

 

MediaQuery.of(context).size는 실행하는 기기의 size를 의미한다.

width를 넓혀줘야하기 떄문에

width: MediaQuery.of(context).size.width를 Container에 추가한다

 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Container(
          color: Colors.black,
          
//width넓혀주기
          width: MediaQuery.of(context).size.width,
          
          child: Column(
          
//crossAxisAlignment          
            crossAxisAlignment: CrossAxisAlignment.start,
            
            
            children: [
              Container(
                color: Colors.red,
                width: 70.0,
                height: 70.0,
              ),
              Container(
                color: Colors.orange,
                width: 70.0,
                height: 70.0,
              ),
              Container(
                color: Colors.blue,
                width: 70.0,
                height: 70.0,
              ),

              Container(
                color: Colors.green,
                width: 70.0,
                height: 70.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

결과를 일단 봐보자

요딴식으로 Container에 배경이 넓어진 것을 확인 해 볼 수 있다.

이제 반대축 정렬을 해보자...

 

 

 

---

 

CrossAxisAlignment - 반대축 정렬

 

 

start

center

end

stretch

baseline(얘는 다음 시간에 알아보자 / 간략히 말하면 서로 다른 위젯의 하단부를 정렬하는 것)

 

하나씩 또 알아보자

MainAxisAlignment는 고정시키고 crossAxisAlignmnet만 수정해보겠다.

 

---

 

crossAxisAlignment.start

 

 

Column의 crossAxis인 Row가 처음(start)에 있다. 

 

---

 

crossAxisAlignment.center

 

 

 

 

Column의 crossAxis인 Row가 가운데(center)에 있다. 

 

 

---

 

crossAxisAlignment.end

 

 

 

 

Column의 crossAxis인 Row가 끝(end)에 있다. 

 

---

 

crossAxisAlignment.stretch

Column의 crossAxis인 Row가 기기의 width만큼 쭉 뻗어(Stretch)있다.

 

정의한 (width 70을 무시하고 Stretch됨을 알 수 있다)

 

 

---

---

 

 

MainAxisSize

 

 

MainAxisSize에는 max와 min이 있다

 

 

 

MainAxisSize.max

 

Column이 주축이므로

주축인 Column의 사이즈를 max로 넓힌다는 것이다.

 

 

 

그렇다면

 

MainAxisSize.min은?

 

 

 

요딴식으로 Column의 사이즈를 위젯으로 정한 사이즈 외에 최소로 축소 시킨 것을 볼수 있다.

 

 

 

---

---

 

 

Expanded, Flexible

 

 

Expanded나 Flexible은 주의할 점이 있는데

 

Row나 Column위젯의 Children에서만 사용할 수 있다.

 

 

 

사용은

Container들을 Expanded 나  Flexible로 감싸주면 된다.

 

 

Wrap with widget..

 

 

---

 

Expanded

 

 

구별을 위해

Container하나만 감싸보자

 

children: [
  Expanded(
    child: Container(
      color: Colors.red,
      width: 70.0,
      height: 70.0,
    ),
  ),
  Container(
    color: Colors.orange,
    width: 70.0,
    height: 70.0,
  ),
  Container(
    color: Colors.blue,
    width: 70.0,
    height: 70.0,
  ),

  Container(
    color: Colors.green,
    width: 70.0,
    height: 70.0,
  ),
],

 

 

요딴식으로 빨간애만 감싸보면

 

 

 

감싼 부분이 빨간색으로 확장(Expanded)됐음을 볼 수 있다.

남은 size를 모두 차지하라는 의미이다

 

Expanded로 n개의 Container를 감쌀 경우 n개의 Container가 공간을 n의 비율로 차지하게 된다

3개만 더 감싸보자

 

 

 

 

 

Expanded에는 Flexible말고

 

flex값을 넣어줄 수 있다

 

Expanded(
  flex: 2,
  child: Container(
    color: Colors.red,
    width: 70.0,
    height: 70.0,
  ),
),

 

 

기본값이 1이고 그 이상의 수를 넣어주면

위와 같이 2를 넣게 되면

 

 

 

2배로 expanded된 결과를 얻을 수 있다.

 

 

 

---

Flexible

 

빨간 부분만 Expanded -> Flexible로 바꿔보면

 

children: [
  Flexible(
    child: Container(
      color: Colors.red,
      width: 70.0,
      height: 70.0,
    ),
  ),
  Expanded(
    child: Container(
      color: Colors.orange,
      width: 70.0,
      height: 70.0,
    ),
  ),
  Expanded(
    child: Container(
      color: Colors.blue,
      width: 70.0,
      height: 70.0,
    ),
  ),

  Container(
    color: Colors.green,
    width: 70.0,
    height: 70.0,
  ),
],

 

 

Flexible은 원래 Extended로 확보한 공간에서 원래 정의한 공간의 크기를 뺸 공간을 버리는 것이다.

일단 정의한 

공간을 차지하고

child 내부 위젯이 공간을 차지하지 못하면 남은 공간은 버리게 되는 것이다.

 

나머지 위젯을 Expanded로 채워도 빈공간은 채워지지 않는다

 

 

 

추가로 Flexible도 flex를 설정해 줄 수 있다.

 

Flexible(
  flex: 2,
  child: Container(
    color: Colors.red,
    width: 70.0,
    height: 70.0,
  ),
),

 

 

 

1. Extended로 빨간색이 2배로 차지한 공간만 확보하고

2. 빨간색 위젯이 70*70이므로 공간을 차지한 후에

1. - 2. 를 한 공간을 Column의 background로 확보하는 것이다.