[플러터 2] UI 구조 3

Tabbar

탭바는 앱이 실행되고 난 후 사용자의 요청에 의해 그림을 다시 그리기 위해서는

Tabbar를 클릭하면 화면이 동적으로 변경되기 때문에 StatefulWidget 을 사용해야 한다.

 

Scaffold의 endDrawer 속성

앱에서 탐색 링크(네비에기션)를 표시하기 위해 Scaffold의 가장자리에서 수평으로 슬라이드하는 위젯이다.

 

왼쪽에서 오른쪽으로 슬라이드하는 드로어 : drawer 속성 사용

오른쪽에서 왼쪽으로 슬라이드하는 드로어 : endDrawer 속성 사용

 

CircleAvatar

이 위젯은 이미지를 둥글게 만들어주는 위젯으로 프로필 이미지를 표시할 때 사용한다.

 

위젯을 둥글게 만드는 방법

1. Container 위젯을 사용해서 decoration 속성으로 Container를 둥글게 만들고, 그 안에 Image 위젯을 자식으로 추가

2. Image 위젯을 만들고 ClipOver 위젯으로 감싸서 이미지를 둥글게 만들기

3. CircleAvatar 위젯으로 이미지를 둥글게 만들기 (제일 간단한 방법)

 

InkWell

모든 위젯을 버튼화 시켜주는 위젯이다.

 

버튼화 시키는 방법

1. TextButton : 버튼 자체에 아무 디자인이 없음

2. ElevatedButton : 버튼자체에 디자인이 있음.

3. OutlinedButton : 가장자리에 테두리 선이 있음

4. InkWell : 모든 위젯을 버튼화하며 보통 Container로 디자인한 후 InkWell 위젯으로 감싼다. (제일 권장하는 방법)

 

SingleTicketProviderStateMixin

한개의 애니메이션을 가진 위젯을 정의할 때 사용한다

두 개 이상의 애니메이션을 가진 위젯을 정의하려면 TickerProviderStateMixin을 사용해야 한다.

SingleTicketProviderStateMixin은 Mixin 타입으로

이것은 클래스가 갖고있는 코드를 재사용하기 위해 만들어졌다.

보통 프로그래밍 언어는 다중상속이 불가능한데, 

이것은 mixin 타입이기때문에 상속이 가능하다.

이때는 extends가 아닌 with 키워드로 사용해야 한다.

 

프로그래밍 언어에서 상속을 사용하는 이유는 재사용보다는 

타입일치 또는 함수를 오버라이딩 하기위함이다.

재사용하려면 Composition 을 하면 된다.

다형성이란 여러가지 형태를 가질 수 있다는 뜻인데, 

동물은 추상적인 개념으로 고양이, 강아지, 사자, 코끼리 등은 실제로 존재하는 객체이다.

사자가 동물로부터 상속받았는데 사자가 추가적으로 식물로부터 상속받을 수 있다.

부모가 두 명이 되는 순간 타입의 일관성과 다형성의 개념이 모호해진다.

그런데 프로그래밍을 하다보면 다중 상속이 필요한 경우 

보통 인터페이스를 사용해서 타입을 일치시키고 함수를 강제시킨다.

하지만 인터페이스는 함수 재사용이 목적이 아니다.

타입을 일치시키면서 부모 클래스의 변수나 함수를 재사용하기 위해 탄생한 것이 Mixin 이다.

 

Mixin

[사자] : 동물이면서 뛰다.

[비둘기] : 동물이면서 날다.

 

Composition 

[사자] : 동물이면서 [뛰는 기능] 을 가졌다.

[비둘기] : 동물이면서 [나는 기능] 을 가졌다.

 

 

 

타입 일치

프로그래밍에서 타입을 일치시키면 런타임 시 동적으로 다른 행동을 할 수 있는 프로그램을 짤 수 있다.

 

 

---

initState()

StatefulWidget 에만 존재하는 초기화를 위한 함수로 최초 한번만 실행되는 함수이다.

 

vsync:this

해당 위젯의 싱크를 SingleTickerProviderStateMixin에 맞춘다는 뜻이다.

내부적으로 AnimatedController 위젯으로 구현되어 있는데 현재 화면에 상태가 변경되면 

애니메이션이 발동되게끔 싱크를 맞춘다.