Flutter Document

Flutter Flow (UI tool)

FlutterFlow - Build beautiful, modern apps incredibly fast!

Why Flutter?

<aside> ❓ 플러터는 앱, 웹, 게임 등 다양한 애플리케이션을 하나의 언어와 하나의 프레임워크로 구현할 수 있다.

</aside>

React Native vs Flutter

<aside> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFqLu8zvZdpp_fMZJQIBmEqONmySGgPtXVRQ&usqp=CAU" alt="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFqLu8zvZdpp_fMZJQIBmEqONmySGgPtXVRQ&usqp=CAU" width="40px" /> Flutter는 나만의 커스터마이징된 UI를 만들기 위해서 화면상의 모든 픽셀들을 통제할 수 있어야 하고, 나만의 브랜딩을 만들고 싶은 개발자에게 적합하다. 반면, React Native는 운영체제와 직접 소통하여 각 운영체제에 맞는 디자인을 구현하기 위해 사용된다.

→ 따라서, 나만의 커스터마이징된 UI/UX를 만들고 싶은 나에게는 Flutter가 적합하다 !

</aside>

Widget

<aside> 📖 플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있다. 플러터 프레임워크는 수십가지 기본 위젯을 제공하며 앱 개발자가 직접 위젯을 만들 수도 있다.

</aside>

기본 위젯

Container

자식을 담는 컨테이너 역할을 한다. 다만 단순하게 자식을 담는 역할을 하는 게 아니라 배경색, 너비와 높이, 테두리 등의 디자인을 지정할 수 있다.

GestureDetector

플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯이다. 탭이나 드래그 그리고 더블 클릭 같은 제스처 기능이 자식 위젯에 인식됐을 때 함수를 실행할 수 있다.

SizedBox

높이와 너비를 지정하는 위젯이다. Container 위젯과 다르게 디자인적 요소는 적용할 수 없고 const 생성자로 선언할 수 있어서 퍼포먼스 측면에서 더 효율적이다.

Column

children 매개변수에 입력된 모든 위젯들을 세로로 배치한다.

Row

children 매개변수에 입력된 모든 위젯들을 가로로 배치한다.

ListView

리스트를 구현할 때 사용한다. 마찬가지로 children 매개변수에 다수의 위젯을 입력할 수 있으며 입력된 위젯이 화면을 벗어나게 되면 스크롤이 가능해진다.

제스처 관련 위젯

Button

플러터 머터리얼 패키지에서 기본으로 제공하는 버튼이다. TextButton, OutlinedButton, ElevatedButton 등이 있다. 모두 버튼을 누르면 색이 변경되는 리플 효과를 지원한다.

IconButton

IconButton은 아이콘을 버튼으로 생성하는 위젯이다. icon 매개변수에 보여주고 싶은 아이콘을 넣을 수 있다. onPressed 매개변수에 IconButton을 누르면 실행할 콜백 함수를 제공할 수 있다. 아이콘은 글리프 기반의 아이콘을 사용할 수 있으며 Icons 클래스를 통해 플러터에서 제공하는 기본 아이콘들을 사용할 수 있다.