반응형

플러터 위젯에 대한 내용입니다.

먼저, 플러터는 크로스 플랫폼 모바일 애플리케이션을 구축하는데 널리 사용되는 오픈소스 프레임워크입니다.

플러터에서는 모든 것이 위젯입니다. 위젯은 플러터 애플리케이션 사용자 인터페이스의 기본 구성 요소입니다. 이는 앱의 사용자 인터페이스를 구성하는 다양한 요소, 구성 요소 및 레이아웃 구조를 나타냅니다.

 

플러터 위젯에 대한 주요 정보

  1. 위젯 계층 구조 ( Widget Hierarchy ): 플러터에서는 위젯을 계층적 방식으로 구성하여 UI를 구성합니다.
    이러한 위젯은 버튼이나 텍스트 필드처럼 단순할 수도 있고 전체 화면이나 사용자 정의 차트처럼 복잡할 수도 있습니다.
  2. 불변 ( Immutable ): 플러터의 위젯은 불변입니다. 즉, 위젯을 만든 후에는 해당 속성을 변경할 수 없습니다. 대신 UI를 업데이트 하려는 경우 원하는 변경 사항이 포함된 새 위젯을 만들어줍니다.
  3. 상태 비저장 및 상태 저장 위젯 ( Stateless and Stateful Widgets ): 플러터에는 상태 비저장 위젯과 상태 저장 위젯이라는 두 가지 주요 유형의 위젯이 존재합니다.
    - 상태 비저장 위젯: 이 위젯은 변경할 수 없으며 변경 가능한 상태가 없습니다. 일반적으로 레이블이나 아이콘과 같이 시간이 지나도 변경되지 않는 UI요소에 사용됩니다.
    - 상태 저장 위젯: 이 위젯은 시간이 지남에 따라 모양이나 동작을 변경할 수 있습니다. 이는 변경 가능한 상태 개체와 연관되어 있으며 양식이나 대화형 구성 요소와 같이 상태를 유지해야 하는 요소에 사용됩니다.
  4. 위젯 구성 ( Widget Composition ): 위젯을 서로 중첩하여 구성할 수 있습니다. 예를 들어 여러 개의 텍스트 위젯을 포함하는 Column 위젯을 사용하여 Text요소의 세로 목록을 만들 수 있습니다.
  5. 머터리얼 디자인 및 쿠퍼티노 위젯 ( Material Design and Cupertino Widgets ): 플러터는 다양한 디자인 지침을 따르는 사용자 인터페이스를 구축하기 위한 두 가지 세트를 제공합니다.
    - Material Design: 이 위젯은 안드로이드에서 사용되는 Google Material Design 언어와 일치하도록 설계되었습니다. AppBar, FlatButton, Card와 같은 구성 요소가 포함되어 있습니다.
    - Cupertino: 이 위젯은 iOS 디자인 언어를 따르며 cupertinoNavigationBar, CupertinoButton, CupertinoTextField와 같은 구성 요소를 포함합니다.
  6. 사용자 정의 위젯 ( Custom Widgets ): StatelessWidget 또는 StatefulWidget 클래스를 확장하여 사용자 지정 위젯을 만들 수 있습니다. 이를 통해 UI요소 및 기능을 재사용 가능한 구성 요소로 캡슐화할 수 있습니다.
  7. 레아이웃 위젯 ( Layout Widgets ): 플러터는 Container, Row, Column 및 Stack과 같은 다양한 레이아웃 위젯을 제공하므로, 복잡한 레이아웃을 만들기 위해 하위 위젯을 다양한 방법으로 배열하고 배치할 수 있습니다.
  8. 제스처 감지 ( Gesture Detection ): 플러터 위젯은 제스처 감지 지원 기능이 내장되어 있어 tapping, swiping, dragging과 같은 사용자 상호작용을 쉽게 처리할 수 있습니다.
  9. 애니메이션 ( Animation ): 플러터는 앱 내에서 부드러운 애니메이션과 전환을 만드는데 필요한 애니메이션 위젯과 도구를 제공합니다.
  10. 플러터의 핫 리로드 ( Flutter's Hot Reload ): 플러터의 장점중 하나는 "핫 리로드"기능입니다. 이 기능을 사용하면 애플리케이션을 다시 시작하지 않고도 개발 중에 앱 UI의 코드 변경 결과를 직시 확인할 수 있습니다.

전반적으로 플러터의 위젯 기반 접근 방식은 다양한 플랫폼에서 일관되고 성능이 뛰어난 경험을 유지하면서 맞춤형 및 복잡한 사용자 인터페이스를 구축하는데 유연하고 강력합니다. 위젯을 혼합하고 일치시켜 모바일 애플리케이션의 원하는 모양과 동작을 만들 수 있습니다.

 

반응형

'Flutter > Flutter 시작하기' 카테고리의 다른 글

[ Flutter ] Flutter 설치하기 ( Feat. Window )  (0) 2023.09.19
Flutter 설치하기  (1) 2021.12.14

+ Recent posts