#5 flutter Flexible, Expanded | DevTools 사용하기

*해당 블로그는 코딩애플의 쉬운 플러터 강의를 보고 제작되었습니다.

 

Flexible 사용해보기

---

 

1. Flexible

flutter에서는 크기를 퍼센트로 지정할 수 없다. 하지만 특정 크기에 비율을 맞추어 제작하고 싶은 경우에 사용할 수 있는 Flexible이라는 기능이 마련이 되어있다.

 

ReactNative 와 같이 flex라는 파라미터에 값을 주어 특정 비율로 제작하는것이 그것이다.

 

 body: Row(
        children: [
          Flexible(child: Container(color:Colors.blue), flex: 3,),
          Flexible(child: Container(color: Colors.green,), flex: 7,),
        ],
        )

 

가로로 Container를 배치한다고 했을 때 배치할 Container 에 Flexible을 감싸주고 flex라는 파라미터 값에 원하는 비율을 배치하게 되면 해당 비율에 맞는 Container가 생긴다.

 

 

<결과물>

 

해당 코드는 Row 뿐만 아니라 Column 에서도 작동된다.

 

<결과물>

 

2. Expanded

flex: 1인 박스를 생성해 꽉 채우고 싶다면 사용할 수 있는 위젯이다.

body: Row(
        children: [
          Expanded(child: Container(color:Colors.blue)),
          Container(color: Colors.green, width: 200,),
        ],
    )

 

해당 코드 처럼 width가 200인 컨테이너와 같이 존재한다면, Expanded에 감싸진 Container는 200을 제외하고 화면을 꽉 채우게 된다.

 

<결과물>

 

 

 

내 코드 문제점 찾기

---

 

박스를 디자인 했는데 의도와 다른 결과물이 나온다면?

 

1. 사이즈가 이상해서
2. 박스 위치가 이상해서

둘 다 문제가 없는데도 확인이 안된다면?? => DevTools를 켜서 확인해라!

 

DevTools 확인하기

 

 

하단의 Run을 누르면 보이는 console에서 저 파란색 모양을 클릭하게 되면 아래와 같은 화면이 뜰 것이다.

 

 

이 화면에서 상단에 Flutter inspector을 클릭하고 왼쪽 Widget Tree에서 보고자 하는것을 선택하면 실제 박스들이 얼만큼의 폭을 가지고 있는지 확인할 수 있게 된다.