TIL) Flutter - Widget이란?

oatraspberry·2023년 9월 3일
post-thumbnail

Flutter

1. Widget

독립적으로 실행되는 작은 프로그램
주로 바탕화면 등에서 날씨, 뉴스, 생활정보 등을 보여준다.
그래픽이나 데이터 요소를 처리하는 함수를 가지고 있다.

Flutter에서의 Widget

  1. UI를 만들고 구성하는 모든 기본 단위 요소
    ex) image, text, icon, Text field, button 등
  2. 눈에 보이지 않는 레이아웃을 정의하는 요소들도 위젯이다.
    ex) center, column, padding 등
  3. 모든 것이 위젯이다.

Stateless widgets

  • Stateless: 이전 상호작용의 어떠한 값도 저장하지 않는다. (상태가 없는 정적인 위젯)
  1. 스크린상에 존재만 할 뿐 아무것도 하지 않는다.
  2. 어떠한 실시한 데이터도 저장하지 않는다.
  3. 어떠 변화(모양, 상태)를 유발시키는 value값을 가지지 않는다.

Stateful widgets

  • Stateful: Value값을 지속적으로 추적 보존한다. (동적인 위젯)
  1. 사용자의 interaction에 따라서 모양이 바뀐다.
  2. 데이터를 받게 되었을 때도 모양이 바뀐다.

Widget tree

  1. Widget들은 tree 구조로 정리될 수 있다.
  2. 한 Widget 내에 얼마든지 다른 Widget(Child widget)들이 포함될 수 있다.
  3. Widget은 부모 위젯과 자식 위젯으로 구성된다.
  4. Parent widget을 Widget container라고 부르기도 한다.
  • MyApp: Custom Widget, 최상위 위젯. 이 클래스에서 MaterialApp(안드로이드)이나 CupertinoApp(iOS)을 리턴해준다.
  • MaterialApp: Flutter 앱에서 UI를 그릴 수 있도록 지원한다. Flutter SDK에서 제공하는 Widget을 모두 사용할 수 있다.
  • MyHomePage: 앱의 디자인과 기능이 만들어진다.
  • Scaffold: 아주 중요한 위젯. 앱 화면과 기능을 구성하기 위한 빈 페이지를 준비해주는 위젯. center, column, padding 등과 같은 위젯들을 사용한다.
    • AppBar

      • Text
    • Center

      • Column
        - Image, TextField, Button

출처: 유튜브 코딩셰프 강의

profile
개발자가 될테야

0개의 댓글