[flutter] 06 화면 구성의 시작 3, Expanded

* 참고사항 : 플러터 관련 포스팅들은 해커스HRD에 있는 플러터 강의를 수강하며 기록해두고 있는 나만의 강의노트임. 

해커스HRD 챔프스터디 (hackershrd.com)

 

- 이번에 해 볼 것 -

• ExpandedWidget 의 개념 이해 및 활용
• Context Action 활용
• Flutter Outline Tool 사용

 

1. 선행사항

코드와 결과물

앞선 실습에서 만들었던 Strong Guy 앱과는 이제 작별하고, 새로 앱을 만든다.

이름하여 burpee Test 라는 이름의 앱으로, 

새 프로젝트를 만들고, 필요한 폰트나 이미지를 assets 폴더에 넣고

stainlessWidget에 MaterialApp을 넣은 뒤

home은 Scaffold로, 

appBar에 text로 burpee Test 라는 내용을 넣은 뒤, Lobster 폰트를 적용한다.

위 내용들은 앞선 포스팅에 있으므로 이번 기록에는 구축 과정은 생략한다.

 

2. ExpandedWidget

overflowed

 

body영역을 새로 만들고, Row를 통해 좌, 우 화살표 이미지를 삽입하려 했다.

그러나, 이미지사진이 큰 관계로 overflow가 발생했다.

*overflow : 넘쳐흘렀다는 뜻으로, 이미지 등이 화면을 넘어설 때 노란 빗금이 나타남(실제앱에선 안보임)

이를 위해서는 이미지 가로 사이즈를 부여하면 된다. 가로만 주면 세로는 자동으로 비율에 맞게 반영됨.

 

galaxy S9 기준이다.

 

width로 크기를 맞추었지만, 이는 임시방편에 불과하다. 왜냐하면 다른 크기의 기종에서 는 여전히 오버플로우가 발생하거나 혹은 의도보다 작게 보여질 수 있기 때문이다. 즉, 강제 사이즈 부여는 다양한 디바이스에 대응하지 못하므로 해결방법이 될 수 없다. 해결을 위해서는 화면 크기별로 알아서 반응하는 반응형 위젯을 두어야 한다.

 

이 때 사용할 수 있는 위젯이 Expanded이다. 이 위젯은 (1) 단독으로 사용할 수 없고 (2) Row 나 Column의 Children에게 가용공간을 확보해주는 역할을 한다.

 

예시는 다음과 같다.
위 그림의 긴 푸른 막대는 Row 영역 안에 있는 8개의 Children 요소들을 나타낸 것이다.

이때, 상단의 일반 Row는 8개의 Children들이 숫자가 있건 빈공간이건 간에 각각 동일한 공간을 차지하는 반면,
하단의 Expanded를 적용하면 아래의 바와 같이 Expanded가 적용된 요소들(2번, 4번)이 빈공간을 차지하게 된다.

 

참고로, 여러 개의 Expanded를 적용하면 빈 공간을 같은 비율로 나눠갖게 되며, flex 비율을 주면 그 비율만큼 나눠갖게 된다. Expanded가 없는 위젯들은 위젯이 필요로 하는 최소한의 공간만 갖는다.

 

body: Row(
  children: [
    Expanded(child: Image(image: AssetImage('assets/images/prev.png'),),
    ),
    Expanded(child: Image(image: AssetImage('assets/images/next.png'),),
    ),

 

적용법은 위와 같다. 간단하게, Expanded로 기존의 이미지 위젯을 감싸준다고 생각하면 된다. 기존 이미지 위젯을 잘라내기 한 뒤, 익스팬디드 안에 붙여넣으면 끝이다. 결과물은 기존에 width로 맞추었던 것과 동일하게 나올 것이다. 하지만, 다른 디스플레이 크기를 가진 기기에서 열거나, 기기를 가로로 회전해도 적정한 오버플로우 없이 적정한 크기로 보여질 것이다.

 

 

 

 

 

3. Context Actions

 

한편, 이미지 위젯을 익스팬디드 위젯으로 감싸는 과정에서 잘라내고 붙여넣고 하는 번거로운 과정을 거쳤었는데 이를 편리하게 도와주는 도구가 있다. 내가 수정하기를 원하는 범위를 정하고 우클릭을 하거나 Alt+엔터를 하면 'Show Context Action' 이 나타나는데, 그 다음 Wrap with Widget을 선택하면 위젯으로 감싸진 코드로 자동으로 변환된다. 위젯명만 Expandid로 바꿔주면 끝이다.

 

 

내가 바꾸기를 희망하는 코드 앞에 커서를 두면, 좌측에 전구모양 아이콘이 뜬다. 이 아이콘을 통해서도 컨택스트 액션을 사용할 수 있다.

 

 

 

 

4. Flutter Outline

Flutter Outline은 플러터 코드의 구조를 시각적으로 보여주어 편집에 도움을 주는 기능이다.

코드의 성능향상 및 유지보수에 도움이 될 수 있다.

 

 

안드로이드 스튜디오 우측 바에 플러터 아웃라인을 띄울 수 있는 아이콘이 있다. 이를 누른 뒤, 내 코드 중 희망하는 코드를

ctrl 버튼을 누른 채 클릭하면, 예시 사진과 같이 내용이 나온다.

 

그리고 플러터 아웃라인 내부 상단에 보이는 툴바에 Wrap with Column이나 다른 기능들이 있다. 이를 활용해서도 컨택스트 액션에서 보았던 것과 동일하게 위젯을 감쌀 수 있다.

 

 

 

 

5. ExpandedWidget과 Context Actions의 활용

이번에는 배운 내용들을 종합한 콤비네이션으로 이미지로 삽입한 좌우 화살표를 색을 바꾸고, 아래쪽으로 위치시키는 등의 편집을 해보자.

먼저 위에서 배운 컨택스트 액션 등을 통해 위젯을 감싸주는 것 부터 시작이다.

 

현재 가로 화면을 구성하는 Row 위젯의 칠드런을 통해 좌, 우 화살표 이미지가 익스팬디드 되어 보여지고 있다.

세로로 내리기 위해서는 Row를 Column으로 감싸주는 작업을 하면 된다.

이제는 잘라내고 붙여넣지 말고, 컨택스트 액션 등을 활용해보자.

이렇게 감싸주면, 이제는 컬럼 아래에 묶여있는 좌우화살표 Row 위젯이 상하로 움직일 준비가 된 상태이다.

 

 

body: Row 였던 단순했던 코드가 일견 보기에는 꽤나 복잡하게 바뀐 것 같아보인다.

하지만 하나하나 차근차근 따라가 보면 그리 복잡하지도 않다.

 

일단 우리는 위에서 Row 위젯을 Column에 넣어줌으로써 화살표들이 세로로 움직일 수 있는 준비를 마쳤다.

그 뒤로는 다음 단계를 차근차근 따라가 보자.

 

1단계

이제 화살표 위에 성인 남성 사진을 넣어줌으로써 화살표가 자연스럽에 하단에 배치되도록 만들었다.

이 때, 그냥 배치만 하면 이미지 고유의 크기로 배치가 되어 오버플로우가 뜨므로 

Expanded를 먹이되, Flex를 삽입하여 성인남자 6 : 화살표 1의 비율로 배치되도록 했다.

Expanded 위젯을 씌우는 건 이제 Context Actions를 통해서 손쉽게 할 수 있게 되었다.

 

2단계

Row의 칠드런 아래에 있는 좌, 우 두 화살표를 좀 더 다듬어주었다.

먼저 이미지로 되어있던 것을 컨테이너로 감싸줌으로써 컬러나 패딩 등의 속성을 줄 수 있게 만들었다.

다음으로 Padding 속성으로 내부여백을 줌으로써 화살표가 좀 더 보기 좋게 크기가 줄어들었다.

그 뒤 컨테이너 배경색과, 화살표 색을 지정해주었다.

마지막으로 좌, 우 컨테이너에 각각 마진을 좌,우로 2픽셀씩 주었다. 좌우로 땡겨지면서 자연스레 가운데 구분선이 생겼다.

 

3단계

은근슬쩍 appBar로 다시 올라가서 backgroundColor 속성을 주어, 화살표 배경과 깔맞춤을 했다.