ㅅㅈㅍ ㅈㅂㅈㅇ (신제품 정보좀요)

컬럼이나 로우에 자식 위젯을 넣으면 expansion이라는 속성이 추가됩니다.

확장(expansion)은 디폴트, 유연(flexible), 확장(expanded) 세 가지 옵션으로 나뉘며, 화면 구성 요소의 너비가 고정되어 있을 때는 디폴트를 사용하면 되지만, 나머지 공간을 채우고 싶을 때에는 유연(flexible) 또는 확장(expanded)를 사용합니다.

이러한 확장(expansion) 속성은 컬럼과 로우에서만 볼 수 있습니다.

Column과 Row에서 expanded를 사용하면 위젯은 추가 공간을 항상 모두 채우게 된다고 해요.

하지만, flexible은 위젯이 추가 공간보다 커지면 오버플로를 방지하면서 최대 너비를 설정해준다고 해요.

이렇게 하면 위젯이 부모 위젯에서 주어진 공간보다 커지면 계속 확장될 때 생기는 오류를 방지할 수 있어요.

이를 통해 어떻게 하면 오버플로 없이 추가 공간을 적절히 활용할 수 있는지, 실용적인 예시까지 살펴볼 수 있어요.

채팅 UI를 예시로 들어 Flexible과 Expanded를 사용한 과정을 설명합니다.

Flexible는 실제 텍스트의 길이를 고려해 최대 너비를 지정해줍니다.

따라서 너비를 넘어가면 자동으로 다음 라인으로 넘어가게 됩니다.

다른 방법인 Expanded는 Flexible과 비슷하지만, 남은 공간을 채우기 위해 강제로 차지합니다.

이에 따라 만약 적은 양의 텍스트가 있다면 여전히 전체 길이를 가지게 됩니다.

어떤 방법을 사용할 지는 디자인에 따라 다르다는 점 참고해주세요.

Expanded와 Flexible의 주요한 차이점은, 사용자가 원하는 공간 차지 비율 설정에 있어요요.

Expanded는 남은 공간을 차지하기 위해 사용되고, Flexible은 오버플로 에러를 방지하면서 공간을 유연하게 처리해요요.

추가적인 속성인 Flex값을 설정할 수도 있는데요요.

Expanded는 두 개 이상의 자식 위젯을 동일 비율로 확장할 때 사용하고, Flexible은 유연하게 오버플로 처리를 하고 싶을 때 사용해요요.

Flex 값은 각 자식 위젯이 공간을 어떻게 나눌지 지정할 수 있는 기능이에요.

Expanded 속성이 설정된 두 개의 컨테이너가 있는 행(Row)이 있다고 가정해보면, 오렌지 컨테이너는 첫 번째 컨테이너의 공간의 두 배만큼 차지하도록 하려면 첫 번째 컨테이너에는 flex 값 1을 주고, 오렌지 컨테이너에는 flex 값 2를 주면 되요.

flex 값은 가감이 가능한데, 여기서는 총 flex 값이 3이므로 오렌지 컨테이너는 2/3, 보라색 컨테이너는 1/3을 차지합니다.

하지만 flex 값은 flexible 또는 expanded 속성의 제약 내에서 작동한다는 것이 중요합니다.

칼럼과 로우는 앱을 만들 때 가장 기본적인 위젯이에요.

대부분의 앱은 칼럼을 쌓거나 로우를 나란히 배치하여 구성돼요.

칼럼과 로우는 모든 앱에서 사용되며, 모든 페이지에서 사용돼요.

칼럼과 로우는 두 개의 축을 가지고 있어요.

메인 축과 크로스 축으로 구분돼요.

칼럼은 세로로 정렬되고, 로우는 가로로 정렬돼요.

칼럼과 로우의 속성을 사용하여 공간을 최대한 활용할 수 있어요.

Column 위젯을 다룰 때, main axis size, main axis alignment, space evenly, space around, space between의 설정이 중요해요.

main axis size는 Column 위젯의 크기를 결정해요.

main axis alignment은 Column의 내부 위젯을 어디에 배치할지 결정해요.

start, center, end 중에서 선택할 수 있어요.

space evenly는 위젯과 위젯 사이의 간격을 동일하게 맞추고 양옆에도 동일한 간격을 둬요.

space around는 위젯과 위젯 사이 간격을 평균으로 맞추고 양옆에는 해당 위젯만큼의 간격을 둬요.

space between는 첫번째와 마지막 위젯은 끝으로 배치하고 내부 위젯들은 동일한 간격으로 배치해요.

Column의 수평축에 대해 설명하며, 자식 위젯들이 column 안에서 어떻게 정렬되는 지 정할 수 있음을 이야기 해요.

그러나 모든 자식 위젯이 같은 width를 가질 때는 수평 정렬 설정이 바뀌지 않기 때문에 fill width하는 child를 추가해야 하죠.

기존 자식 중 fill width를 가지게 하면, column이 모든 공간을 다 채울 수 있어요.

이 때 width 크기로 Infinity를 주면 되고, 이렇게 하면 column이 화면 전체 크기의 공간을 채우게 됩니다.

Flutter에서 자식 위젯의 레이아웃 크기를 더 크게 만드는 방법 중 하나는, 부모 위젯이 크기 제약을 더 크게 혹은 무한대로 가져오는 것이에요.

부모 위젯에서 몇 가지 설정을 바꿔주면, 자식 위젯을 높이와 너비가 가득 차게 할 수도 있어요.

또한, Cross-Axis Alignment Stretch 속성을 사용하여 부모 위젯에 자식 위젯들을 늘려줄 수도 있지만, 이렇게 할 경우, 자식 위젯들의 크기도 함께 커지게 돼요.

Column 위젯은 대개 영역을 최대한 채우기 때문에 자식 위젯들이 해야 할 작업이나 채워야 할 공간에 맞게 레이아웃을 바꿔준다는 것도 알아두면 좋아요.

'scrollable' 프로퍼티 사용 시 두 가지 문제가 발생해요.

우선 Column은 인자로 전달된 위젯에 대한 공간 할당을 alignment를 통해 수행하는데, 스크롤 기능이 'on'으로 되어있으면 할당할 공간이 무한대로 늘어버려 'unbounded height error'가 발생하죠.

두 번째로 스크롤 기능이 'on'일 때 위젯 목록에 수록된 위젯을 스크롤할 수 있게 됩니다요.

스크롤은 보통 위젯의 높이 제약에 이루어져요.

높이 제약은 스크롤의 기반이 되는 스크린 크기 또는 부모 위젯에서 결정돼요.

예를 들어, 컨테이너 위젯의 높이를 200픽셀로 지정하면, 스크롤 될 것이에요.

높이제약을 걸지 않는 대신 위젯을 더욱 커지게 해서 overflow되게 할 수도 있어요.

row는 기존 위젯을 바꿔서 쓰는데요, column과 비슷한 역할을 해요.

주축 사이즈를 Max로 설정하면 가로 공간 전체를 채우고, Min으로 설정하면 자식 요소에 맞게 축소돼요.

이 때, 크로스 축은 마찬가지로 문제가 발생하여 자식 요소에 맞게 높이가 축소돼요.

이전과 마찬가지로 그 위에 스트레치나 비슷한 작업을 할 수 있어요.

하지만, 이 문제를 해결하기 위해 컨테이너에 감싸서 높이를 500픽셀로 설정해줘야하며, 가운데로 정렬되어 크로스 축 정렬 작업을 수행할 수 있어요.

마지막으로, 에러가 발생할 수 있지만, 이 비디오를 통해 이해하고 쉽게 해결할 수 있게 될 거예요.

Flutter에서 레이아웃이 잘못되어 높이값을 알 수 없다면 Infinite height 오류가 발생하죠.

페이지를 새로고침하여 해결할 수 있어요.

'Column' 위젯을 사용 중인 경우 자식 위젯의 개수와 그 크기에 따라 컨테이너의 높이가 결정되므로 높이값이 유연해야 하는 경우 Infinite height 오류가 발생할 수 있어요.

해결 방법으로는 컨테이너에 명시적인 높이 값을 설정하여 해결하거나, 'Expanded' 위젯을 사용하여 자식 위젯의 크기가 유연하게 변하도록 할 수 있어요.

Flutter에서는 'expanded' 위젯을 사용하여 스크린의 전체 높이를 채울 수 있어요.

'Expanded'는 컬럼 또는 로우에서 남은 공간을 채우는 역할을 하죠.

또는 퍼센트로 높이를 지정하여 더 명시적으로 설정할 수 있어요.

또한, 컬럼에서 자식들 간에 간격을 추가하는 'item spacing property'도 사용할 수 있어요.

이로써 반복적인 패딩 작업을 피하고 한 번 설정으로 모든 자식 아이템 사이에 간격을 추가할 수 있어요.

컬럼의 시작과 끝 부분에 간격을 추가하고 싶다면 'Apply to start and end' 토글 버튼을 사용하면 돼요.

변수로 아이템 간격을 설정하여 다이나믹한 간격을 가질 수 있어요.

예를 들어, 첫 번째 아이템 이후에 큰 간격을 주고 싶은 경우, highlight를 위해서라면 변수로 아이템 간격을 설정할 수 있어요.

이렇게 설정된 컬럼과 로우는 FlutterFlow에서 사용할 수 있어요.

빈도 높은 하이레벨 소개에 따르면, 오른쪽에 있는 '프로퍼티 패널'에서 선택한 위젯 또는 페이지에 대한 옵션을 설정할 수 있어요.

프로퍼티 패널에는 페이지와 위젯에 대한 옵션이 나타나고, 위젯에 대한 옵션은 해당 위젯의 구성에 따라 달라집니다.

추가적으로, 페이지와 위젯 프로퍼티에 대한 자세한 내용은 다음 영상에서 다룰 예정이에요.

페이지 속성은 페이지 맨 위에서 시작되며, 페이지 매개변수는 페이지간 데이터 전달 시 사용돼요.

iOS, Android 앱 및 웹에서 사용할 수 있으며 라우트 설정과 함께 네비게이션 기능을 제공합니다.

페이지 복제, 삭제, 이름 설정 등의 옵션이 있으며 탭을 통해 페이지 속성 및 위젯 속성 설정을 할 수 있습니다.

또한, 액션은 애플리케이션 논리를 정의하는 곳으로, 백엔드 호출, 애니메이션 트리거, 로컬 상태 변수 업데이트 등을 다룹니다.

백엔드 쿼리는 데이터베이스나 API 호출과 같은 백엔드 서비스에 데이터를 바인딩하는 곳이죠.

위젯이나 디자인 시스템 속성을 보기 위해서는 위젯을 클릭하면 됩니다.

위젯 이름을 명명하는 것이 중요한데, 검색 및 식별에 유용한 이름을 사용하는 것이 좋아요.

여기에서는 디자인 시스템에 대한 3가지 옵션이 있으며, 각각 위젯을 재사용 가능한 구성 요소로 만들어줘요.

테마 위젯으로 저장하면, 이전에 저장된 스타일과 동일하게 현재 스타일을 적용할 수 있어요.

선택한 위젯을 구성 요소로 저장하면, 어느 페이지에서든 사용 가능하고, 마지막으로, 여러 프로젝트에서 사용할 위젯이나 구성 요소를 템플릿으로 저장할 수 있습니다요.

웹 위젯의 공통 속성은 조건부 가시성, 반응형 가시성, 패딩 및 정렬로 구성돼요.

특정 위젯의 속성은 해당 위젯에만 적용되며, 조건부 가시성은 위젯을 언제 보이고 숨길지에 대한 설정이에요.

반응형 가시성은 장치별로 보일지 숨을지를 결정하며, 패딩과 정렬은 일반적인 레이아웃 속성이죠.

또한, 모든 위젯에서 볼 수 있는 공통 기능은 변수 아이콘이에요.

이 아이콘은 값의 설정을 위한 대화 상자를 제공하고, 동적인 값을 바인딩하는 것이 중요하답니다.

마지막으로 문서화와 접근성 및 의미 레이블은 위젯에 관한 주석 및 설명을 추가하는 옵션이에요.

이는 팀원들과의 조직화를 위해 유용하며, 접근성과 SEO에도 도움이 돼요.

위젯에서 다중 자식 요소를 가질 수 있는 경우, 다이나믹 자식 요소를 생성하는 옵션을 제공해요.

예를 들어, API 호출 또는 로컬 상태 배열 변수에서 항목을 가져와 자식 요소를 생성할 수 있어요.

API 반환된 배열을 기반으로 카드 또는 텍스트 목록을 생성할 수 있어요.

설정은 플루터플로우의 프로퍼티 패널에서 설정할 수 있어요.

FlutterFlow에서 앱은 위젯으로 이루어져 있어요.

주요 위젯과 각 위젯의 타입에 대해 알려줄게요.

유저 인터페이스(UI) 빌더에서 2가지 주목할 만한 점은: 첫번째, 위젯의 타입, 두번째로 위젯이 가질 수 있는 자식 수이에요.

플러터플로우에서 위젯을 4가지 카테고리로 나누는데, 초보자가 많이 사용하는 것은 'Commonly Used' 위젯입니다.

위젯은 'Layout', 'Base', 'Page', 'Form'과 같이 4가지 유형으로 구분할 수 있어요.

앱의 대부분은 위젯을 쌓는 것이라서, 가장 많이 쓰이는 primitive layout 위젯과 그를 보조하는 레이아웃 위젯이 있어요.

primitive layout 위젯에는 row, column이 있으며, 2D gridview에서는 staggered view, 페이지뷰를 사용할 때는 tabs, 페이지 전체에 적용할 수 있는 Base elements가 있어요.

이렇게 기초적인 레이아웃 위젯 사용 방법에 대한 소개가 이루어진 후, 페이지 위젯들이 소개될 거에요.

FlutterFlow에서는 앱의 메인 본문(main body)에는 한 개의 자식(child) 위젯을 가질 수 있어요.

이 자식 위젯은 여러 개의 다른 자식 위젯을 가질 수 있지만, 메인 본문의 자식으로 추가하려고 시도하면 오류가 발생하죠.

다음으로, Form Element 위젯은 주로 폼과 필터링에 사용되며, Base Element 위젯은 나머지 모든 종류의 위젯을 포함해요.

FlutterFlow에서는 위젯을 카테고리별로 찾을 수 있어요.

또한, 위젯은 0개, 1개 또는 여러 개의 자식을 가질 수 있다는 점을 알아두어야 해요.

위젯은 아무 자식도 받지 않는 것이 있고, 하나의 자식만 받는 것이 있으며, 여러 자식을 받을 수 있는 것으로 나뉘어져요.

하나의 자식만 받는 위젯 예시로는 컨테이너가 있고, 여러 자식을 받을 수 있는 위젯 예시로는 컬럼, 로우, 스택 등이 있어요.

일부 위젯은 아이콘이나 이름으로 확인할 수 있지만, 명확하지 않을 수도 있으므로 실험을 통해 자식을 받을 수 있는 위젯을 확인해볼 수도 있어요.

FlutterFlow 프로젝트 내에서 페이지를 이동하는 방법을 설명합니다.

위젯 트리와 페이지 선택기가 다른 탭 또는 섹션으로 분리되어 있어 페이지를 선택하고 이동할 수 있습니다.

두 번째 방법으로는 위젯 트리와 페이지를 한 화면에 겹쳐서 볼 수 있는 기능을 제공합니다.

또한 페이지나 컴포넌트를 필터링하여 원하는 것만 표시하거나 새 폴더, 페이지, 또는 컴포넌트를 생성하는 기능을 제공합니다.

'커맨드 팔레트'가 제공되며 이를 사용하여 페이지를 빠르게 찾아 갈 수 있으며, 이를 위해서 페이지와 컴포넌트 이름에 좋은 의미론적인 이름을 붙여야 해요.

커맨드 팔레트는 command K 키를 입력하면 나타나며, 페이지, 컴포넌트 또는 탭 등 빠르게 찾을 수 있도록 도와줘요.

이를 통해 바로 원하는 페이지로 이동이 가능하며, 위와 같이 특정 검색어 입력 후 화면에서 상/하 방향키로 선택해 클릭하여 이동할 수도 있어요.

스토리보드 기능을 사용하면 앱 전체 레이아웃을 시각적으로 확인하고 네비게이션을 도와줘요.

스토리보드를 통해 페이지를 클릭하여 해당 페이지로 바로 이동하고, 마지막으로 본 페이지로 쉽게 돌아와 재개할 수 있어요.

또한, 스토리보드에서는 네비게이션 및 로그인 경로뿐만 아니라 바닥 시트 액션도 시각화돼요.

스토리보드를 사용하면 앱 내에서 사용되는 요소들의 배치를 조정하고, 큰 규모의 사용자 이동 패턴을 확인하는 데 도움이 돼요.

대부분의 위젯은 보이는 상태이지만, 탭 밑 또는 조건부 표시와 같은 이유로 숨겨진 위젯이 있을 수 있어요요.

숨겨진 위젯이 있다면, 격자 아이콘이 나와요요.

'이 위젯은 숨겨져 있지만 내부에 있는 네비게이션을 확인할 수 있다'는 것을 알 수 있어요요.

페이지를 선택하면 라우트들이 강조되어 페이지 내 유저 네비게이션과 위젯에만 집중할 수 있어요요.

위젯 위치를 변경한 후, 초기 레이아웃으로 다시 시작하려는 경우, Reset 버튼을 클릭하면 가능해요요.

FlutterFlow 프로젝트 내에서 위젯 및 네비게이션을 관리하는 데 유용하게 활용할 수 있어요요.

FlutterFlow의 위젯 트리는 웹 및 앱 UI를 구성하는 위젯들의 구조와 레벨을 시각적으로 확인할 수 있어요.

위젯 트리에서는 현재 앱 바와 홈 페이지만 존재하며, '버튼'을 통해 더 많은 위젯을 추가할 수 있어요.

추가된 위젯은 계층 구조에 따라 더 들여쓰인 선으로 표시되고, 일부 위젯은 자식 위젯을 추가할 수 있는 '아이콘'을 가지고 있어요.

또한, 위젯 트리에 위젯을 직접 추가할 수도 있고, 애니메이션 효과가 적용된 아이콘이 나타나요.

하단의 UI 빌더에서도 위젯을 추가할 수 있는데, 해당 기능은 단축키(Command + F)를 사용하여 수행할 수 있어요.

위젯을 추가할 때, 강조된 위젯은 형제 또는 자식으로 추가되는 기준이에요.

또한 위젯을 드래그하여 추가할 때, 아이콘을 통해 형제 또는 자식으로 추가되는지 확인할 수 있어요.

보라색과 두 개의 동일한 막대는 형제 관계를 나타내며, 아래 짧은 막대는 자식 관계를 나타내요.

위젯을 추가하는 경우, 자식으로 추가할 수 있는 경우 먼저 자식으로 추가되며, 형제로 추가하고자 할 경우에는 더 오래 누르고 있어야 해요.

FlutterFlow에서는 가끔씩 원하는 조직이 허용되지 않아서 동등한 값이 있는 형제를 추가할 수 없어요.

그렇지만 오류만 발생하는 것이 아니라, 문제가 무엇인지와 해결 방법을 알려주는 팝업 창이 뜨죠.

예를 들어, 형제로 추가하려는데 Flutter의 규칙에 어긋나서 루트 위젯은 하나의 자식만 가질 수 있다는 것을 알려줘요.

그러면 문제를 설명한 후에 문제를 해결할 수 있는 몇 가지 옵션을 제시해줘요.

FlutterFlow는 "container와 column을 형제로 가지려면 무언가로 감싸야 한다.

column, row, stack 중 하나로 감싸면 된다"라고 말하죠.

위젯 축소됐을 때는 화살표 아이콘 눌러 확대 가능.

잠금 아이콘은 기본 위젯 선택 패턴 정의가 목적임.

기본 위젯 선택 시 자동으로 스크롤되는데, 이를 잠금 아이콘으로 제어 가능.

일반적으로 잠금 해제하고 사용하나, 작업 중인 위젯 위치 확인할 시 잠금 사용할 수 있음.

스크롤 유지 시에는 잠금 유용.

그렇지 않다면 작업하면서 자동으로 위치 바뀌게 해제해도 되어요.

위젯 트리에서 아이템을 드래그하여 순서를 바꿀 수 있고, 우클릭 시 옵션을 제공해요.

계층 구조 파악이 쉬워 유용하며, 중요한 요소를 파악하며 선택할 수 있어요.

창고에는 정보가 부족할 때, 위젯 트리에서 작업하면 도움이 돼요.

루트 위젯을 복사하여 다른 페이지에 적용할 수 있어요.

이 때 빈 페이지에서 복사를 해야 한다요.