[이론] Row and Column (4) Expanded 위젯, Flexible 위젯

들어가기 앞서...

무조건 Expanded 와 Flexible 은 Row 와 Column 위젯 안에서만 사용이 가능하는 것을 알고 있어야 한다.

개발 초보자자들은 아무데나 Expanded 와 Flexible 을 사용해서 에러를 만들어낸다고 하니 주의하자!

 

주의 깊게 봐야하는 점...

Expㅁnded 와 Flexible 은 무조건!! Row 와 Column 위젯안에서만 사용해라!

---

본문으로...

Expanded 는 최대한으로 남아있는 사이즈를 차지해라라는 뜻이다.

• Expanded 를 추가해보자!

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: [
              // Expanded /Flexible 추가
              Expanded(
                child: Container(
                  color: Colors.red,
                  width: 50.0,
                  height: 50.0,
                ),
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.yellow,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.green,
                width: 50.0,
                height: 50.0,
              )
            ],
          ),
        ),
      )

    );
  }
}

왼) 빨간색 Container 만 Expanded 적용한 모습, 오) 빨간색, 주황색만 Expanded 를 적용한 모습

만약, 밑의 주황색도 Expanded 로 감싸게 되면, 빨간색과 주황색이 사이즈를 같이 나눠진것을 볼 수 있다.

전부 다 Expanded 한 모습

이렇게 Expanded 는 Expanded 를 쓴 애들과 같이!  남아있는 공간을 나눠서 공간을 차지한다. 

• flex 를 추가해보자!

기본적으로 flex : 1 이 default 이다! 그래서 현재 1 : 1 : 1 : 1 비율로 형성 되어있다!

그렇다면 flex 를 다르게 적용해보겠다! 

flex 2 : 3 : 1 : 1 비율

flex 값은 차지하겠다는 비율을 의미한다.

 

• flex 코드를 제거하고, Flexible 를 적용해보자!

 

빨간색 Container 에만 Flexible 위젯을 적용한 모습

 

왼) 기본 빨간색만 Flexible 한 모습, 오) 빨간색만 Flexible flex : 2 적용한 모습

Flexible 은 일단은 원래 지정한 width 과 height 의 비율만큼 공간을 차지하는데, 만약child 안의 위젯의 그 공간을 다 차지하지 않는다면 남는 공간을 버려버린다! 그래서 남은 공간이 background 가 black 이 되는것을 볼 수 있다! 

 

그래서 현재 비율은 빨간색 + 검은색 (1) : 주황색 (1) : 노란색 (1) : 초록색 (1) 이다!

 

만약, 빨간색의 Flexible 위젯에 flex : 2 로 추가한다면! 위의 오른쪽 사진 처럼 버리는 공간이 더 많아지는 것이다!

빨간색 + 검은색 (2) : 주황색 (1) : 노란색 (1) : 초록색 (1) 비율이다!

빨간색만 Flexible flex: 2 로 추가한 코드

 

만약, 주황색 까지 Flexible 위젯을 추가한다면 밑의 공간이 더 버려진다!!

왼) 빨간색과 주황색 Flexible 적용, 빨간색을 flex : 2 인 코드, 오) 결과 

보면은 현재 비율은 빨간색 + 검은색 (2) : 주황색 + 검은색 (1) : 노란색 (1) : 초록색 (1) 이다!

 

---

끝으로...

1. Expanded 위젯과 Flexible 위젯을 알고 적용할 수있다!
2. flex를 통해서 expanded 의 비율을 조절할 수있다!
3. Flexible 의 정의를 알고 코드적용은 물론 Flexible과 flex 를 같이 적용했을때의 결과를 알수 있다!

---