Wrap 공간이 충분하지않은 경우에 남은 위젯이 교차 축으로 정렬된다. 이와 같이 태그명 길이가 제각각인 경우에 자동으로 다음 행에 배치된다. IndexedStack, BottomNavigationBar 위젯 사용자가 하단 아이콘 버튼 탭 시 위젯들의 상태가 변경되는 화면에 필요 IndexedStack 은 현재 인덱스에 해당하는 하나의 위젯만 표시되며 현재 인덱스 값만 표시된다. 값은 0부터 시작하며 BottomNavigationBar의 아이콘이 선택될 때마다 Index가 변경되며 해당 Index에 대응하는 화면이 출력된다.

Stateful 위젯과 Stateless 위젯의 차이 화면이 그려진 후 사용자와 상호작용을 통해 위젯을 다시 그려야하는 경우 Stateful 위젯을 사용해야 한다. 상태를 가지는 위젯은 final 변수가 아닌 변경가능한 일반적인 변수를 가질 수 있다. Stateless 위젯은 상태가 없기때문에 화면이 동적으로 다시 그려지지 않는다. 따라서 final 변수를 선언하는 것이 좋다. 만약, Stateless 위젯인데 일반 변수를 사용한다면...? 경고 메세지가 뜬다. 어차피 다시 그릴 일도 없는 일반 변수가 아닌 변경 불가능한(@immutable) 변수를 사용하는게 좋다고.. 그림 그리기 : build stateful 위젯에서는 setState() 를 통해 build() 함수가 재실행되는데, 상태 변경이 일어..

Expanded, Spacer, ListView 위젯 Expanded 또는 Spacer 위젯은 화면의 남은 공간만큼 확장하는 위젯인데 ListView위젯은 스크롤 위젯으로 최대 높이는 무한이므로 Expanded 또는 Spacer 위젯을 사용할 수 없다. 그래서 SizedBox 를 사용하여 적절한 높이를 준다. Column을 사용하지않고 ListView로 전체화면을 구성하는 이유 1. 방향이 세로 방향이기때문에 Column과 ListView 둘 다 사용가능 2. TextFormField를 터치하게 되면 아래에서 키보드가 올라오는데 이 때 화면에 그림을 그릴 수 없는 영역이 생긴다. 이 영역을 inset 영역이라고 하는데 이 영역에 그릴 수 없어서 화면에 스크롤이 없으면 그림을 그릴 수 있는 영역이 줄어들어..

Tabbar 탭바는 앱이 실행되고 난 후 사용자의 요청에 의해 그림을 다시 그리기 위해서는 Tabbar를 클릭하면 화면이 동적으로 변경되기 때문에 StatefulWidget 을 사용해야 한다. Scaffold의 endDrawer 속성 앱에서 탐색 링크(네비에기션)를 표시하기 위해 Scaffold의 가장자리에서 수평으로 슬라이드하는 위젯이다. 왼쪽에서 오른쪽으로 슬라이드하는 드로어 : drawer 속성 사용 오른쪽에서 왼쪽으로 슬라이드하는 드로어 : endDrawer 속성 사용 CircleAvatar 이 위젯은 이미지를 둥글게 만들어주는 위젯으로 프로필 이미지를 표시할 때 사용한다. 위젯을 둥글게 만드는 방법 1. Container 위젯을 사용해서 decoration 속성으로 Container를 둥글게 만..

Container 위젯 빈 박스 위젯으로 SizedBox 위젯과 차이점이 있다. Container는 내부에 decoration 속성이 있어서 박스에 색상을 입히거나 박스의 모양을 바꾼다던가 테두리 선을 줄 수 있다. Container - Column - Icon - Text SizedBox은 보통 마진을 줄 때 사용한다. 컨테이너 위젯의 특징 1. 자식이 없는 컨테이너는 가능한 한 박스를 크게 만들려고 한다. => 늘어난다. 2. 자식이 있는 컨테이너는 자식의 크기에 맞게 조정된다. => 줄어든다. 리스트아이템에서 overflow 문제 발생 시 보통 Column 위젯에서 여러 위젯들을 나열할 때 스크롤이 안되서 발생하는데 Column을 ListView로 변경해주면 세로로 스크롤이 가능해진다. ListVi..

UI 구조 휴대폰 > Material App > Scaffold Spacer 위젯 Row 또는 Column 과 같은 Flex 공간에서 위젯과 위젯 사이의 간격을 조정하는데 사용한다. Padding 위젯 위젯의 여백을 주기위해 사용한다. - EdgeInsets.symmectric : 수직이나 수평 중 선택해서 여백을 줄 때 사용. Image 위젯 이미지 배치 - 이미지 위젯 사용 시 fit 속성으로 이용 - BoxFit.contain : 원본사진의 가로 세로 비율 변화없음 - BoxFit.fill : 원본사진의 비율을 무시하고 지정한 영역에 사진을 맞춤 - BoxFit.cover : 원본사진의 가로 세로 비율을 유지한 채 지정한 영역에 사진을 맞춤 장점 : 사진비율을 유지 단점 : 사진이 지정한 크기를 벗..