위젯트리

위젯

  위젯이란 플러터에서 사용되는 모든 시각적 요소를 표현하는 것들

  버튼, 텍스트, 이미지 등 사용자 인터페이스의 모든 요소는 위젯으로 표현됨.

 

위젯트리

  플러터는 거의 모든것이 위젯으로 이루어져 있으며, 이 위젯들은 트리구조를 띄게 될 수 밖에 없다.

예제로 사용되고 있는 카드게임의 위젯트리 구조

 

위젯의 종류

  플러터에서 사용되는 위젯에는 크게 두가지 종류의 위젯이 사용되는데, StatelessWidget과 StatefulWidget 이 있다.

  해당 설명은 'Dart문법 기초'글 참조

 

  위의 위젯트리에서 Header의 하위 트리는 StatelessWidget 이 사용되었고,

  CardBoards 하위 트리는 StatefulWidget 이 사용되었다.

 

위젯끼리의 파라미터 전달 방법

  < Header에서 TryCount라는 변수를 Home에 전달하는 방법 >

 

final int tryCount;  >> tryCount 라는 변수 선언

Header({super.key, this.tryCount = 0});  >> Home에 tryCount 전달

 

 

 

 

 

int tryCount = 0;

>> Home에서의 tryCount 선언 및 초기화

 

 

 

 

 

 

Header(tryCount: tryCount)

>> Header에서 tryCount값을 전달 받음

 

 

 

 

 

  < CardBoards 에서 updateTryCount 함수를 Home에 전달하는 방법 >

 

final Function() updateTryCount;  >> updateTryCount 함수 선언

CardBoards({super.key, required this.updateTryCount});

>> Home에 updateTryCount 전달

 

 

 

void updateTryCount() {}

>> updateTryCount 함수 초기화

 

 

 

 

 

 

 

 

 

CardBoards(updateTryCount: updateTryCount))

>> CardBoards에서 함수 전달받음

 

 

 

 

 

 

CardBoards에서 Home에서 초기화된 updateTryCount 함수를 사용하기 위한 widget 키워드

 

final 키워드 vs const 키워드

  final이나 const 모두 한번 변수가 정의되면 다시 바꿀 수 없는 변수를 의미.

 

  두 키워드의 차이점은 선언된 변수가 초기화 되는 시점이 컴파일 전인지 후인지의 차이가 있으며,

  final은 컴파일 후에 결정되는 변수에서 사용되고, const는 컴파일 이전에 결정되는 변수에 사용된다.

  따라서 final은 정의할 당시에 값을 할당해주지 않아도 무방하고, const는 정의할시 반드시 값을 할당해주어야 한다.

 

  final 키워드는 주로 statelessWidget에 사용되는 경우가 많은데, 이는 statelessWidget이 부모로부터 생성될때 인자를 받는데,   이 인자가 주로 컴파일 이후 런타임 상황에서 받아지는 경우가 많기 때문.

 

 

Class(객체)

  클래스(객체)란 자신의 속성을 가지고 있고, 다른것과 식별 가능한 것을 말한다.

  각각의 객체는 고유한 속성과 기능을 가지고 있다.