[flutter log] 위젯의 종류

 

코드팩토리의 플러터 프로그래밍

저자는 왕초보 실력을 현업 수준으로 끌어올리기를 목표로 이 책을 썼습니다. 배운 이론을 곧바로 실무에 진짜 유용한 기능을 담은 앱을 만들며 익힐 수 있게 합니다. 모든 앱은 결과가 아니라 실제 프로젝트 현장에서 구현하듯이 과정을 보여주며 만듭니다. 변경하거나 수정한 코드를 확실하게 표시해 따라하기 쉽습니다. [프로젝트 소개] ➝ [사전 지식] ➝ [준비하기] ➝ [UI 구상하기] ➝ [구현하기] ➝ [테스트하기] 순서를 꼭 지켜서 앱 개발을 체계적으로 이끌어줍니다. 초보자 눈높이에 맞추면서, 다트 언어 입문부터 개발과 광고와 배포까지 현업에 도움이 될 실무적이고 활용도 높은 노하우를 담아 설명했기 때문에 탄탄하면서도 빠르게 스킬업되는 자신을 체감하게 될 겁니다.

저자

최지호(코드팩토리)

출판

골든래빗(주)

출판일

2023.01.01

안녕하세요 성장형 개발자입니다.

플러터 공부 중입니다
오늘 공부한 내용을 적어보았습니다

공부한 내용 :  위젯의 종류

ㅇ 텍스트 관련 위젯
 - Text : 글자를 적고 스타일링하는 위젯.
 - 첫번째 포지셔널 파라미터에 원하는 문자열을 작성하고 style이라는 네임드 파라미터를 사용해 스타일을 지정

ㅇ 제스처 관련 위젯
 - 사용자가 키보드로 글자를 입력하는 행위 외의 모든 입력을 플러터에서는 제스처라고 부름
 - 예) 화면 한번 탭, 두번 탭, 길게 누르는 행동 모두가 제스처
 - 하위 위젯에 탭이나 드래그처럼 특정 제스처가 입력됐을 때 인지하고 콜백 함수를 실행

 - Button
  -> 플러터 머터리얼 패키에서 기본 제공하는 버튼
  -> TextButton(텍스트만 있음), OutlinedButton(테두리가 있음), ElevatedButton(입체적으로 튀어나온 느낌의 배경이 들어감)
  -> 모두 버튼을 누르면 색깔이 변경되는 리플 효과를 지원

 - IconButton
  -> 아이콘을 버튼으로 생성하는 위젯
  -> icon 매개변수에 보여주고 싶은 아이콘을 넣을 수 있음
  -> onPressed 매개변수에 IconButton을 누르면 실행할 콜백 함수를 제공할 수 있음
  -> 글리프 기반의 아이콘을 사용할 수 있음.
  -> Icons 클래스를 통해 플러터에서 제공하는 기본 아이콘들을 사용할 수 있음.
  -> 제공되는 아이콘 목록은 링크 참조(https://fonts.google.com/icons)

 - GestureDetector
  -> 앱은 모든 입력을 손가락을 함
  -> 손가락으로 하는 여러 가지 입력을 인지하는 역할
  -> onTap : 한번 탭했을 때 실행되는 함수를 입력할 수 있음
  -> onDoubleTap : 두번 연속으로 탭했을 때 실행되는 함수를 입력할 수 있음
  -> onLongTap : 길게 누르기가 인식됐을 때 실행되는 함수를 입력할 수 있음
  -> onPanStart : 수평 또는 수직으로 드래그가 시작됐을 때 실행되는 함수를 입력할 수 있음
  -> onPanUpdate : 수평 또는 수직으로 드래그를 하는 동안 드래그 위치가 업데이트 될 때마다 실행되는 함수를 입력할 수 있음
  -> onPanEnd : 수평 또는 수직으로 드래그가 끝났을 때 실행되는 함수를 입력할 수 있음
  -> onHorizontalDragStart : 수평으로 드래그를 시작했을 때 실행되는 함수를 입력할 수 있음
  -> onHorizontalDragUpdate : 수평으로 드래그를 하는 동안 드래그 위치가 업데이트 될 때마다 실행되는 함수를 입력할 수 있음
  -> onHorizontalDragEnd : 수평으로 드래그가 끝났을 때 실행되는 함수를 입력할 수 있음
  -> onVerticalDragStart : 수직으로 드래그를 시작했을 때 실행되는 함수를 입력할 수 있음
  -> onVerticalDragUpdate : 수직으로 드래그를 하는 동안 드래그 위치가 업데이트 될 때마다 실행되는 함수를 입력할 수 있음
  -> onVerticalDragEnd : 수직으로 드래그가 끝났을 때 실행되는 함수를 입력할 수 있음
  -> onScaleStart : 확대가 시작됐을 때 실행되는 함수를 입력할 수 있음
  -> onScaleUpdate : 확대가 진행되는 동안 확대가 업데이트될 때마다 실행되는 함수를 입력할 수 있음
  -> onScaleEnd : 확대가 끝났을 때 실행되는 함수를 입력할 수 있음

 - FloatingActionButton
  -> Material Design에서 추구하는 버튼 형태
  -> Scaffold를 같이 사용하면 특별한 어려움 없이 해당 형태의 디자인 구현 가능

ㅇ 디자인 관련 위젯(배경을 추가하거나 간격을 추가하거나 패딩을 추가하는 등 디자인적 요소를 적용할 때 사용)
 - Container 위젯
  -> 다른 위젯을 담는 데 사용
  -> 위젯의 너비와 높이를 지정하거나, 배경이나 테두리를 추가할 때 많이 사용
  -> 다른 위젯들처럼 child 매개변수를 사용할 수 있음
  -> margin(위젯의 바깥에 간격을 추가)은 위젯은 따로 없고, Container 위젯에 추가가능. EdgeInsets 사용(상하좌우값)

 - SizedBox 위젯
  -> 일반적으로 일정 크기의 공간을 공백으로 두고 싶을 때 사용
  -> Container 위젯을 사용해도 공백을 만들 수 있지만 SizedBox는 const 생성자를 사용했을 떄 퍼포먼스에서 이점을 얻을 수 있음
 
 - Padding 위젯
  -> child위젯에 여백을 제공할 때 사용
  -> Padding 위젯 사용 시 Padding 위젯의 상위 위젯과 하위 위젯 사이의 여백을 둘 수 있다.
  -> Padding 위젯의 padding 매개변수는 EdgeInsets라는 값을 입력해야 함(상하좌우 값 넣는 곳)
  -> child 매개변수에 Padding을 적용하고 싶은 위젯을 입력할 수 있음
  -> 적용된 위젯이 차지하는 크기 내부에서 간격이 추가됨
  -> EdgeInsets.all(16.0) : 상하좌우로 매개변수에 입력된 패딩을 균등하게 적용
  -> EdgeInsets.symmetric(horizontal : 16.0, vertical : 16.0) : 가로와 세로 패딩 따로 적용. H-> 가로, V -> 세로
  -> EdgeInsets.only(top : 16, bottom : 16, left : 16, right : 16) : 상하좌우 따로 적용
  -> EdgeInsets.fromLTRB(16,16,16,16) : 상하좌우 따로 적용. 포지셔널 파라미터를 좌,위,우,아래 순서로 입력해야함

 - SafeArea
  -> 따로 기기별로 예외 처리를 하지 않고도 안전한(Safe) 화면에서만 위젯을 그릴 수 있음
  -> SafeArea(top : true, bottom : false, left: true, right : true) true: 적용, false: 미적용

ㅇ 배치 관련 위젯
 - Row위젯
  -> 가로로 위젯 배치
  -> children 매개변수를 노출
  -> 가로가 주축(MainAxisAlignment), 세로가 반대축(crossAxisAlignment) <- > Column위젯과 반대
  -> MainAxisAlignment.start : 시작에 정렬
  -> MainAxisAlignment.center : 중앙에 정렬
  -> MainAxisAlignment.end : 끝에 정렬
  -> MainAxisAlignment.spaceBetween : 자식 위젯의 간격을 균등하게 정렬
  -> MainAxisAlignment.spaceAround : 자식위젯의 간격을 균등하게 배정, 왼쪽끝과 오른쪽 끝을 위젯사이 거리의 반만큼 배정해 정렬
  -> MainAxisAlignment.spaceEvenly : 자식 위젯의 간격을 균등하게 배치, 왼쪽 끝과 오른쪽 끝도 균등하게 배치
  -> crossAxisAlignment.start : 시작에 정렬
  -> crossAxisAlignment.center : 중앙에 정렬
  -> crossAxisAlignment.end : 끝에 정렬
  -> crossAxisAlignment.stretch : 반대축 최대한으로 늘려서 정렬

 - Column위젯
  -> Row 위젯과 완전히 같은 매개변수들을 노출
  -> Row 위젯과 주축, 반대축이 반대로 이루어져 있음

 - Flexible위젯
  -> Row, Column에서 사용하는 위젯
  -> Column, Row에서 사용 시 Flexible에 제공된 child가 크기를 최소한으로 차지하게 할 수 있음
  -> flex매개변수를 이용해 각 Flexible 위젯이 얼만큼의 비율로 공간을 차지할지 지정할 수 있음
  -> flex값을 제공하지 않으면 기본값은 1
  -> FlexFit.tight(자식 위젯이 차지하는 공간과 관계없이 남은 공간을 모두 차지)
  -> FlexFit.loose(자식 위젯이 필요한 만큼의 공간만 차지)

 - Expanded위젯
  -> Flexible 위젯을 상속하는 위젯
  -> Column, Row에서 사용 시 위젯이 남아 있는 공간을 최대한으로 차지
  -> Flexible위젯의 FlexFit.tight를 기본으로 제공해준 위젯

 - Stack 위젯
  -> 위젯을 겹치는 기능을 제공
  -> 스키아 엔진은 2D엔진이기 때문에 겹친 두께를 표현 못하지만, stack을 사용하면 위젯 위의 위젯을 올린 듯한 효과를 줄 수 있음
  -> children에 위치한 순서대로 위젯을 겹쳐쌓는다.