코드몽키 찬스님의 모바일, 웹

플러터에서 위젯 이란?

위젯은 사용자 인터페이스를 만들기 위한 기본 빌딩 블록입니다.

UI 요소의 시각적 모양과 동작을 모두 캡슐화하는 버튼이나 텍스트 필드와 같은 앱의 사용자 인터페이스 요소로 생각할 수 있습니다.

위젯을 결합하여 복잡한 UI를 형성할 수 있으며 프로그래밍 방식으로 만들고 조작할 수 있어 높은 수준의 유연성과 상호 작용을 제공합니다. Flutter는 일반적인 UI 요소를 만드는 데 사용할 수 있는 다양한 내장 위젯과 처음부터 새로 만들 수 있는 맞춤 위젯을 제공합니다.

내장된 위젯은 무엇들이 있을까?

• Container ( 컨테이너 ): 다른 위젯을 포함할 수 있고 색상, 테두리, 패딩 등으로 스타일을 지정할 수 있는 상자입니다.
• Text ( 텍스트 ) : 다양한 글꼴 스타일, 크기 및 색상으로 스타일을 지정할 수 있는 텍스트를 표시하는 위젯입니다.
• Image ( 이미지 ): 네트워크 위치, 파일 또는 메모리 내 이미지에서 이미지를 표시하는 위젯입니다.
• Row and Column ( 행 및 열 ): 가로줄(행) 또는 세로줄(열)에 자식을 정렬하는 레이아웃입니다.
• Expanded ( 확장됨 ): 행 또는 열을 따라 나머지 공간을 채우기 위해 확장되는 위젯입니다.
• Button ( 버튼 ): 텍스트나 이미지를 표시하고 누를 때 동작을 수행할 수 있는 클릭 가능한 위젯입니다.
• AppBar ( 앱 ) : 일반적으로 화면 상단에 제목, 작업 및 기타 위젯을 표시할 수 있는 상단 앱 바입니다.
• Scaffold : 앱 바, 하단 내비게이션 바 및 서랍을 지원하는 기본 레이아웃 구조입니다.
• ListView: 많은 수의 항목을 표시하는 데 유용한 스크롤 가능한 위젯 목록입니다.
• Stack ( 스택 ) : 여러 하위 위젯을 오버레이하는 레이아웃으로 각 하위 위젯이 다른 위젯 위에 쌓입니다.
  
  이는 Flutter에 내장된 위젯 중 일부에 불과합니다. 프레임워크는 양식, 애니메이션 등을 만들기 위한 위젯을 포함하여 다른 많은 위젯을 제공합니다.

렌더링 트리, 요소 트리 및 위젯 트리는 Flutter에서 UI를 만들고 렌더링하는 프로세스를 설명하는 관련 개념입니다.

1. 위젯 트리:
   위젯 트리는 사용자 인터페이스의 레이아웃과 모양을 나타내는 트리 구조입니다.
   위젯 트리의 각 노드는 재사용 가능한 UI 조각인 위젯을 나타냅니다.
   위젯 트리의 루트 노드는 애플리케이션의 루트 위젯을 나타냅니다.
   위젯 트리는 UI의 구조와 각 위젯의 속성을 정의하지만 최종 렌더링된 레이아웃이나 모양에 대한 정보는 포함하지 않습니다.
   
   
2. 요소 트리:
   요소 트리는 사용자 인터페이스의 레이아웃을 나타내는 트리 구조입니다.
   요소 트리의 각 노드는 위젯의 구체적인 인스턴스인 요소를 나타냅니다.
   요소 트리는 위젯 트리를 확장하여 생성됩니다.
   즉, 위젯 트리의 각 위젯이 UI에서 해당 위젯의 인스턴스를 나타내는 요소로 변환됩니다.
   요소 트리에는 각 위젯의 레이아웃 및 모양에 대한 정보가 포함되어 있으며 최종 렌더링된 레이아웃을 계산하는 데 사용됩니다.
   
   
3. 렌더 트리:
   렌더 트리는 사용자 인터페이스의 최종 렌더링된 레이아웃을 나타내는 트리 구조입니다.
   렌더링 트리의 각 노드는 화면에 칠할 수 있는 시각적 요소인 렌더링 개체를 나타냅니다.
   렌더링 트리는 요소 트리에서 생성됩니다.
   즉, 요소 ​​트리의 각 요소는 해당 요소의 최종 모양을 나타내는 렌더링 개체로 변환됩니다.
   렌더링 트리는 Flutter에서 사용자 인터페이스를 화면에 그리는 데 사용됩니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: 32.0,
            color: Colors.white
          ),
        ),
      ),
    );
  }
}