[Flutter] row and column

MainAxisAlignment.

end - 끝

center - 가운데

spaceBetween - 위젯과 위젯의 사이가 동일하게 배치된다.

spaceEvenly - 위젯을 같은 간격으로 배치하지만 끝과 끝에도 위젯이 아닌 빈 간격으로 시작한다.

spaceAround - spaceEvenly + 끝과 끝의 간격은 1/2

spaceBetween

spaceEvenly

spaceAround

실습 CODE - MainAxisAlignment.

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(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.amber,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

CrossAxisAlignment.

반대축 정렬. 반대축은 기본적으로 column,row 모두 최소한의 사이즈만 차지한다.

start - 시작

end - 끝

center - 가운데

strech - 최대한으로 늘린다.

 

strech

실습 CODE - CrossAxisAlignment.

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: MediaQuery.of(context).size.width, // 칼럼이 전체 사이즈를 차지하도록 늘린다.
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.amber,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

실습 CODE - strech

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,
          height: MediaQuery.of(context).size.height, // 칼럼이 전체 사이즈를 차지하도록 늘린다.
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.amber,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

mainAxisSize.

주축 크기

max - 주축 기준 최대 크기 차지

min - 주축 기준 최소 크기 차지

 

 

Expanded / Flexible

! row나 column 위젯의 children에만 사용할 수 있다.

 

Expanded

남아 있는 공간을 Expanded로 감싸져 있는 위젯들끼리 나누어 먹는다.

Row나 Column 중에 Expanded를 사용하는 경우 메인 축에만 영향을 받는다

 

flex

남아 있는 공간을 나누어 먹는 비율을 의미한다. 첫번째 위젯 flex: 2, 두번째 위젯 flex: 3 일 경우 2:3 비율로 나누어 먹는다.

빨강 위젯만 expanded했을때 / 빨강,노랑 위젯 모두 expanded했을때

 

Flexible

비율만큼 공간을 차지하고, child 아래 있는 위젯이 공간을 다 차지하지 않으면 남는 공간은 버린다.

Flexible은 child의 요소가 부모 영역보다 작으면 아무런 변화를 하지 않는다.

child 요소의 크기가 부모보다 클 때는 그 최대 사이즈로 맞춰서 그려지게 된다.

 

Expanded

 

ex) 아래에서 red 50.0을 채우고 남는 공간은 버린다.

실습 CODE - Expand / Flexible

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(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: [
              Flexible(
                child: Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 50.0,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.orange,
                  width: 50.0,
                  height: 50.0,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.amber,
                  width: 50.0,
                  height: 50.0,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.green,
                  width: 50.0,
                  height: 50.0,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

👀 Flexible, Expanded 차이점 정리

Expanded : 최대 사이즈로 확장

Flexible : child가 부모보다 작은 경우엔 크기변화가 없고, child가 부모보다 큰 경우에는 최대 사이즈로 확장한다.

 

---

참고

          width: MediaQuery.of(context).size.width, // 칼럼이 전체 사이즈를 차지하도록 늘린다.
          child: Column(...

          height: MediaQuery.of(context).size.height, // Row가 전체 사이즈를 차지하도록 늘린다.
          child: Row(...