“Everything is a widget”은 Google에 Flutter를 소개하는 문구입니다. Flutter에서 화면에 표시되는 사용자 인터페이스와 관련된 모든 요소는 위젯으로 구성됩니다. 위젯은 현재 상태에 따라 구현할 UI를 정의합니다. 즉, Flutter는 선언적 사용자 인터페이스로 구성됩니다.
명령형 UI와 달리 선언형 UI는 런타임 시 뷰를 생성하지 않습니다. 처음 생성(선언)한 UI에 대한 값에 따라 변경되도록 구성되어 있습니다. 따라서 가치에 따른 변화로 인한 View의 오버헤드를 걱정할 필요가 없어 생산성이 향상됩니다. 다음은 선언적 UI라고 생각하는 것입니다.
A Widget (property, property)
- property
- property: 설정방법
텍스트 관련 위젯
– 텍스트 위젯(텍스트만)
– 스타일: TextStyle(글꼴 크기, 글꼴 크기, 글꼴 두께, 색상, 색상)
– RichText 위젯(회원이 아니신가요? 등록하다)
– 단락 클래스
버튼 관련 위젯
– TextButton(onPressed, style, child): 텍스트만 있는 버튼
– OutlinedButton(onPressed, style, child): 테두리가 있는 버튼
– 스타일: OutlinedButton.styleForm (전경색: Colors.red, 배경색: ),
– FilledButton(onPressed, style, child): 채워진 타원형 버튼
– ElevatedButton(onPressed, style, child): 3차원 상승 버튼, 채워진 사각형 버튼, 작은 반경 적용
– IconButton(onPressed, icon): (글리프 기반의 아이콘) https://fonts.google.com/icons) 기존 기호에 사용할 수 있습니다.
– FloatingActionButton(onPressed, child): Scaffold와 함께 사용되는 Material Design에서 추적하는 버튼 유형
제스처 관련 위젯: 모든 제스처를 매개변수로 제공합니다. 특정 제스처가 입력되면 감지하고 콜백 기능을 실행합니다.
– GestureDetector: 자식 위젯에서 제스처 기능을 감지하는 위젯
– onTap: 한 번의 탭으로
– onDoubleTap: 연속으로 두 번 탭했을 때
– onLongPress: 길게 누르기
– onPanStart: 가로 또는 세로 끌기 시작 시
– onPanUpdate: 드래그가 수평 또는 수직으로 업데이트될 때마다
– onPanEnd: 가로 또는 세로 드래그가 완료되었을 때
– onHorizontalDragStart: 드래그가 수평으로 시작될 때
-onHorizontalDragUpdate: : 수평 드래그가 업데이트될 때마다
– onHorizontalDragEnd: 수평 드래그 종료 시
– onVerticalDragStart: 수직 드래그 시작 시
-onVerticalDragUpdate: 드래그가 수직으로 업데이트될 때마다
– onVerticalDragEnd: 수직 드래그 종료 시
– onScaleStart: 스케일링이 시작될 때
– onScaleUpdate: 스케일이 업데이트될 때마다
– onScaleEnd: 스케일링 완료 시
테마 관련 위젯
– 컨테이너: 하위 요소를 담는 컨테이너 역할을 하는 위젯(배경색, 높이, 너비, 테두리 등의 디자인 지정 가능)
– 장식: BoxDecoration(스타일 적용
색상: 배경색,
border: Border.all (너비: 테두리 너비, 색상: 테두리 색상),
borderRadius: BorderRadius.circular(16.0), )
– 너비: 너비
– 높이: 높이
– margin: EdgeInsets.all(16.0) // 위젯 외부에 공백을 추가하는 함수지만 자주 사용되지는 않습니다.
– SizedBox: 일반적으로 일정한 크기의 공간을 비워둘 때 사용(높이와 너비를 지정하는 위젯, 디자인 요소는 적용할 수 없습니다. 상수 생성자로 선언할 수 있으므로 성능면에서 효율적입니다.) – 지정되지 않은 속성은 0이 됩니다.
– 높이: , 너비: , 어린이:
– 패딩: 자식 위젯에 테두리를 추가하기 위해 사용
-어린이:
– 패딩: EdgeInsets.all(16.0)
– EdgeInsets.all()
– EdgeInsets.symmetric(수평: , 수직: )
– EdgeInsets.only (상단: , 하단: , 왼쪽: , 오른쪽: )
– EdgeInsets.fromLTRB(16.0, 16.0; 16.0; 16.0)
– SafeArea: iPhone의 노치에서 겹치지 않도록 콘텐츠에 플래그를 지정하는 위젯입니다. 장치별 예외 처리 없이 안전한 화면에서만 위젯을 그릴 수 있습니다.
– 위: 참, 아래: 참, 왼쪽: 참, 오른쪽: 참, 자식: 컨테이너()
배치 관련 위젯: 수평 또는 수직, 계단식, 쌓을 수 있음
– 행: 모든 위젯을 가로로 정렬
– 열: 모든 위젯을 세로로 정렬
– mainAxisAlignment: start, center, end, spaceBetween(동일한 거리 사이), spaceAround(왼쪽과 오른쪽 사이 거리의 절반 할당), spaceEvenly(왼쪽과 오른쪽 사이에 같은 거리)
– crossAxisAlignment: 시작, 중심, 끝, 늘이기(강성, 편경사: 반대 축을 최대로 늘이기)
– 어린이들: ()
– 행은 가로로 최대, 세로로 최소
– 세로는 최대, 가로는 최소
– 최대는 double.infinity, 최소는 하위 위젯의 크기만큼을 의미합니다.
– 유연한: (플렉스: 1(기본값), 맞다: 어린이: )
– 행과 열에서 사용되는 위젯입니다.
– 제공된 어린이가 최소 크기인지 확인하십시오.
– flex 매개변수를 사용하여 각 유연한 위젯이 차지하는 공간을 지정합니다. 비례 공간을 차지합니다.
– 확장: (어린이: )
– 유연한 위젯을 채택합니다. 유연성(핏: FlexFit.tight)
– FlexFit.loose: 하위 위젯은 필요한 만큼의 공간만 차지합니다.
– FlexFit.tight: 하위 위젯이 차지하는 공간에 관계없이 나머지 모든 공간을 차지합니다. 최대 공간을 차지합니다.
– 스택: Z축을 따라 위젯을 쌓는 것처럼 위젯을 겹칠 수 있습니다.
– Flutter의 그래픽 엔진인 Schia 엔진은 2D 엔진이므로 겹치는 두께를 표현할 수 없습니다.
– 실제 Z축에 대한 정보가 없기 때문에 Stack에서는 Flexible을 사용할 수 없습니다.
– ListView : 리스트 구현 시 사용, 입력된 위젯이 화면을 벗어날 때 스크롤 가능
~ 알아 둘만 한
– 선언적 사용자 인터페이스는 트리 구조입니다. 한 자녀를 둔 자녀와 여러 자녀를 둔 자녀가 있습니다.
– 자식 목록에 입력된 순서대로 화면에 그려집니다.
– debugShowCheckedModeBanner: false // 오른쪽 상단의 디버그 배지 배너 제거