inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

Flexible에서 flex 쓰는것이 너무 헷갈립니다. 기준을 못잡겠습니다.

557

vadain2000

작성한 질문수 83

0

 

Expanded에서 flex를쓰면 전체적인 비율에 적용되는건 이해했습니다.

Flexible 적용하면 container안에 heigth크기를 잡아먹고 나머지는 빈공간으로 되는데요.

flex 적용하면 헷갈립니다. 구체적인 예좀 들어주세요

버리는공간이 많아 지잖아요. 왜 많아지는지 모르겠습니다.

 

flutter 클론코딩

답변 1

0

코드팩토리

안녕하세요!

Expanded 위젯과 Flexible 위젯의 차이는 Expanded는 Flexible을 extend 하고 있고 fit: FlexFit.tight를 사용하고 있다는 점입니다. Flexible 위젯의 기본 fit 세팅은 FlexFit.loose 입니다.

결국 기본 세팅상 둘의 차이는 FlexFit.tight를 사용하냐 FlexFit.loose를 사용하냐의 차이를 두고 있습니다.

FlexFit.tight를 사용하게되면 부모의 크기만큼 (상위 위젯에서 차지 할 수 있는 크기만큼) 위젯이 늘어납니다. 이는 예제에서 보여드린 것 처럼 50x50의 박스를 만들었지만 결국 최대 크기를 차지하게 강제되는걸로 알 수 있습니다.

FlexFit.loose를 사용하게되면 최소한의 크기만 차지하게 됩니다. 그래서 50x50 박스의 크기만큼 Flex 위젯이 차지하게됩니다. 하지만 여기서 flex 크기를 조절했을때 Column이나 Row 안에서 사용되는 Expanded 위젯과 Flexible 위젯은 모두 비율을 존중해야합니다. 모두가 Expanded 1:1:1 비율로 flex 값이 적용 됐다면 굉장히 쉽습니다. 모두가 같은 공간을 나눠 갖으면 됩니다. 하지만 Flexible 1: Expanded 1: Expanded 1 이 적용이 된다면 Flex 룰에 의해서 모두 똑같은 공간을 나눠 갖기는 하지만 Flexible은 자식 위젯이 최소한의 공간만 차지하기때문에 50x50의 공간만 차지하게되고 나머지 두 Expanded 위젯은 Flexible 위젯이 얼마나 적은 공간을 실제 차지했는지와 무관하게 1:1:1 비율을 기준으로 위젯의 크기가 정해집니다. 그렇기때문에 Flexible 위젯의 flex 값을 올렸을때 버리는 공간이 계속 '많아져 보이는겁니다'. 거꾸로 얘기하면 Expanded 위젯들이 차지하는 공간이 '적어진다'로 볼 수 있습니다.

감사합니다!

198강 (){onTap(e);}의 이해 돕기

0

39

1

video_call 플러그인 설치후 에러 발생

0

47

1

SDK 안드로이드 설치 질문!

0

62

1

코드팩토리 디스코드 링크 다시 부탁드려요~

0

92

1

Webview를 이용해서 URL 상의 페이지 출력 불가

0

71

1

홈스크린 함수를 함축해서 main.dart에 옮기는 문제

0

56

1

플레이스토어

0

60

1

아고라 엔진 init 함수의 반환타입이 Future<void> 이것의 의미는 무엇인가요?

0

56

1

가이드라인 질문

0

59

0

emulator 에러 환경설정 뭐가 문제 일까요??

0

78

1

emulator 실행 오류

0

95

3

Column을 가로방향 최대 사이즈를 차지하도록 하는 방법에 관련

0

73

1

pubspec.yaml에서 font를 추가하면서 weight 값을 지정하는 것이 의미가 있는 것인지 문의

0

44

1

setState()를 호출하지 않으면 build가 실행 안되는 건가요?

0

54

1

video_call 플러그인 설치시 에러문제

0

66

1

children 안의 if 문에서 { } 못쓰는 이유?

0

51

1

이렇게 오류가 떠요

0

66

1

AppBar 사용했는데

0

63

2

[문제해결] '오늘도 출첵!' 의 171번 강의에서 중요한 문제를 발견했습니다

0

58

1

StatefulWidget 실습 에러가 발생합니다.[해결완료]

0

65

1

Video Player 프로젝트에 대한 추가 질문

0

54

0

Row위젯이나 column위젯의 위치는 누가 정하나요??

0

43

1

geolocator 오류때문에 개발진행이 불가능입니다

0

64

1

API 관련 이슈

0

89

2