Flutter UI 요소

Flutter 화면 객체요소

기본위젯

• Text
  • 일반 Text 객체를 의미한다.
  • Text Style속성을 적용할 수 있다.
• Row, Cloumn
  • CSS의 display: flex 속성과 비슷하다.
• Stack
  • 절대위치 레이아웃 모델을 기반으로 한다.
  • z-index와 같이 순서를 정할 수 있다.
• Container
  • 직사각형 시작적 요소를 만들 수 있다.
  • 배경, 테두리, 그림자, 여백, 패딩 등

간편생성

Flutter는 MaterialApp Design을 사용하여 간편하게 UI를 제작할 수가 있다.
세팅

Setting

파일명 : .flutterpubspec.yaml

name: my_app
flutter:
  uses-material-design: true

Scaffold 위젯

Material Design Visual Layout 구조를 구현하는데 사용
간편하게 UI를 만들어주는 기능들이 있다.

Scaffold 속성

• appBar
  • 상단에 표시 할 앱 바
• backgroundColor
  • 위젯의 배경 색상
• body
  • 주요 내용
• bottomNavigationBar
  • 하단에 표시할 하단 탐색 모음
• bottomSheet
  • 표시 할 영구 하단 시트
• drawer
  • 본체 측면에 표시되는 패널로, 종종 휴대기기에서 숨겨집니다. 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로
• drawerDragStartBehavior
  • 드래그 시작 동작이 처리되는 방식을 결정합니다.
• drawerEdgeDragWidth
  • 가로로 스와이프하면 서랍이 열리는 영역의 너비입니다.
• drawerEnableOpenDragGesture
  • 드래그 제스처로 Scaffold.drawer 를 열 수 있는지 여부를 결정합니다.
• drawerScrimColor
  • 서랍이 열려있는 동안 주요 콘텐츠를 가리는 스크림에 사용할 색상입니다.
• endDrawer
  • 본체 측면에 표시되는 패널로, 종종 휴대기기에서 숨겨집니다. 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로
• endDrawerEnableOpenDragGesture
  • 드래그 제스처로 Scaffold.endDrawer를 열 수 있는지 여부를 결정합니다.
• extendBody
• extendBodyBehindAppBar
• floatingActionButton
  • 오른쪽 하단에서 Body위에 떠있는 버튼으로 표시됩니다.
• floatingActionButtonAnimator
  • 애니메이터는 floatingActionButton을 새로운 floatingActionButtonLocation으로 이동합니다.
• floatingActionButtonLocation
  • floatingActionButton이 이동해야하는 위치를 결정 합니다.
• hashCode
  • 이 객체의 해시 코드입니다.
• key
  • 하나의 위젯이 트리에서 다른 위젯을 대체하는 방법을 제어합니다.
• onDrawerChanged
  • Scaffold.drawer가 열리거나 닫힐때 호출되는 선택적 콜백입니다.
• onEndDrawerChanged
  • Scaffold.endDrawer가 열리거나 닫힐 때 호출되는 선택적 콜백입니다.
• persistenceFooterButtons
  • scaffold 하단에 표시되는 버튼세트입니다.
• primary
  • 이 scaffold가 화면 상단에 표시되는지 여부입니다.
• resizeToAvoidBottomInset
  • true이면 주변 미디어쿼리의 viewInsets속성에 의해 높이가 정의 된 온 스크린 키보드를 피하기 위해 본문과 scaffold의 플로팅 위젯이 자체 크기를 조정해야 합니다.
• restoreld
  • scaffold의 상태를 저장하고 복원하기위한 복원 ID입니다.
• runtimeType
  • 개체의 런타입 유형 표현입니다.

GestureDetector 위젯

제스처를 감지하기 위해 onPressed, onTab을 직접 위젯에 넣는 대신에 GestureDetector위젯을 이용해서 훨씬 더 많은 범위의 위젯을 감지할 수 있습니다.

예시
길게터치, 끌기, 강제누르기 등등

문서 참조 : https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

RaisedButton 위젯

FlatButton 위젯

DropdownButton 위젯

FloatingActionButton 위젯