widget Ui를 구축하는데 사용되는 클래스이다.
widget layout과 UI 요소 모두에 사용됩니다.
flutter의 layout의 핵심은 widget입니다
flutter는 화면에 표시되는 이미지,아이콘,텍스트 모두 위젯으로 되어있으며, 보이지않는 위젯을 정렬,제한,정열하는 행과 열 ,그리드 도 위젯으로 관리됩니다
분홍색 표시된 컨테이너는 하위 위젯을 사용자 정의할수 있는 위젯 클래스이며,
컨테이너 안에 가로열 정렬 안에 세로열 정렬되어있는 아이콘과 텍스트가 들어가있는 컨테이너를 활용해서, 패딩, 여백, 테두리 또는 배경색을 추가하고 일부 기능의 이름을 지정할수 있고, 추가로 여백을 추가하는 기능인 패딩도 컨테이너에서 사용할 수있다
이 예에서 UI의 나머지 부분은 속성에 의해 제어됩니다.
color 속성을 사용하여 아이콘의 색상을 설정합니다.
Text.style 속성을 사용하여 글꼴, 색상, 두께 등을 설정합니다.
열과 행에는 하위 항목이 수직 또는 수평으로 정렬되는 방식과 하위 항목이 차지해야 하는 공간의 양을 지정할 수 있는 속성이 있습니다
-> row,column사용하기때문에 패딩사용가능
위젯 배치 (큰 틀짜기)
1. 레이아웃 위젯 선택(Single-child layout widgets,Multi-child layout widgets,Sliver widgets )
2. 보이는 위젯 만들기 ex) 프로필에 사용될 이미지 또는 텍스트
3. 레이아웃 위젯 안에 보이는 위젯 넣기.
4. 페이지에 레이아웃 위젯 추가 (Material,Cupertino)
모든 레이아웃 위젯에는 다음 중 하나가 있습니다.
- 자녀 한 명을 데리고 가는 경우의 재산 child- 예를 들어, Center또는Container
- children위젯 목록(예: Row, Column, ListView또는 ) 을 사용하는 경우 속성 입니다 Stack.
5.추가적으로 위젯 위치 조정 및 Material 앱이 아닌 경우 Center앱의 build()메서드에 위젯을 추가 진행
Row - 가로 ,Column -세로 ) 가장 많이 사용하는 레이아웃 패턴임
여러 위젯을 수직 및 수평 배치하는 기본 위젯이며 위젯을 통해서 많은 컨트롤 가능
대부분 세로형 타입으로 만듬 가장 큰 틀을 잡는 형태로 사용됨 , 거의 모든 하위목록의 위젯을 선택하여 사이즈조절 가능
위젯정렬
mainAxisAlignment및 속성을 사용하여 행이나 열이 하위 항목을 정렬하는 방법
crossAxisAlignment. 행의 경우 기본 축은 수평으로 실행되고 교차 축은 수직으로 실행
위젯크기조정
Expanded 이미지 행이 렌더링 상자에 비해 너무 넓은 이전 예를 수정하려면 각 이미지를 위젯으로 래핑하세요.
안에 하위 flex 사용하면 2배로 커지는효과 사용가능
Packing widgets
하위 요소를 묶어표시하기 mainAxisSize로 설정
ex) 별 5개 연속 찍기 ,가로세로열 겹쳐서 표현
