ABOUT ME

Today
Yesterday
Total
  • widget
    w3 2022. 9. 12. 07:32

    widget

    1

    UI (화면에 보이는 모습)를 구성하는 요소

    = 화면에서 보이는 것들, 화면을 보여지게 하는 것은 모두 위젯

    In Flutter, almost everything is a widget :)

     

    프로필 사진 (이미지 위젯)
     +
    이름 (텍스트 위젯)
    +
    프로젝트 목록 (리스트 위젯)

     

     

    2

    위젯의 주요 기능은 화면을 그리는 것(build( ) 함수 구현) 하는 것

    • 대상(텍스트, 이미지, 리스트 등)
    • 모양(네모, 동그라미, 크기 등)
    • 위치  ( row 가로로 배치, column 세로로 배치,  align 등)
    • 상태( eg, unchecked or checked ✅ ) ..

    레고 블럭처럼 위젯을 조합하여 화면을 만든다.

     

     

    3

    눈에 보이는 요소(visible widget)와

    직접접으로 보이지는 않지만  보이는 요소들의 화면내 위치(배치)를 표현하는 요소(layout widget) 로 구분할 수 있다. 

     

    layout widget 에 visible widget 를 더하여 구성한다. 

     

    - visible widget

       텍스트 text, 이미지 image, 아이콘 icon등 

     

    - layout widget

       노출할 영역 container, 가로로 배치 row,  세로로 배치 column, 중앙에 위치 center 등

     

    eg.

    1) 가로로 3개를 배치 (row 위젯)

    2) 각 한칸에는 세로로 2개를 배치 (coulumn 위젯)

    3) 한 컬럼의 위쪽에는 이미지(아이콘 위젯) 를 노출 

    4) 한 컬럼의 아래쪽에는 기능의 이름(텍스트 위젯)을 노출 

     

      widget tree

     

    4

    각각의 위젯은 클래스로 구현되어 있다.

    • Widgets are classes used to build UIs.

     

    Text widget 을 예로 살펴보면

    Text widget = Text class

    한가지 스타일의 텍스트를 노출 하는 위젯

    Text 클래스의 Constructor



    노출할 문자열 data 를 제외한 나머지 인자(style, 정렬 등의 요소)는 null 을 허용 (입력하지 않아도 됨, 입력되지 않은 경우 DefaultTextStyle 로 적용됨)

    Text 위젯 Implementation




     

    클래스 이므로,

    클래스명 ( 인자 ) 의 형태로 사용한다.

    Text( 'Hello, World ! ', textAlign: TextAlign.center, )

    ㄴ해설:  Hello World! 글자를 가운데 정렬로 보여줘~

     

    5

    클래스는 인자로 클래스를 사용할 수 있다. 

    위젯은 클래스 이므로 위젯도 다른 위젯을 사용? 할 수 있다. 

    위젯은 child or children 이라는 속성(property) 로 다른 위젯(클래스)를 사용한다. 

    const Center(
      child: Text('Hello World!'),
    ),

    center 위젯의 child 로 text 위젯을 사용했다. 

    결과는 위의 text 위젯을 사용할 경우와 같겠지? 

    ㄴ해설: 가운데 정렬해줘. 뭐를? 'Hello, World !' 텍스트를..

     

    보이는 건 같아도 여러가지 다른 방식으로 코드를 작성할 수 있다. 

     

    6

    클래스 중에는 위의 center 처럼 다른 위젯을 하나만 사용하는 경우도 있고 

    여러개의 위젯을 사용하는 경우도 있다. 

     

    위 3번의 경우 가로로 3개를 배치하려고 row 위젯을 쓴다면 

    각 한 칸마다 배치하고자 하는 요소(위젯)들이 있어야 한다. 

    따라서 row 위젯은 3개의 위젯을 필요로 하게 되고, 이런 경우 children 이라는 속성을 사용해서 각각의 위젯을 나열한다. 

     

    7

    Flutter App 은 그 자체로 하나의 위젯이다. 

    첫부분에 플러터는 모든 것이 위젯이라고 했던것을 기억하나?  ^^ 

     

    위젯의 주요 기능은 build() 의 구현이라고도 했다. 

    따라서 모든 위젯은 build() 메소드를 가진다. 

    build() 가 실행(초기화) 되고 호출한 곳으로 반환되면(실행완료)

    위젯이 우리 눈에 보여지게 되는 것. (화면에 그려진다.)  

     

    플러터 APP 은 그 자체로 위젯이므로 

    최초 위젯이 있고, 그 위젯의 자식 요소들을 추가함으로서 우리가 원하는 APP 의 형태를 만들 수 있다. 

    이말인 즉, 페이지 (레이아웃)가 만들어 진다는 것. 

     

    - 기본 위젯들이 있고 (눈이 보이는 visible widget, 그리고 그 보이는 위젯들의 위치정보를 담는 layout widget )

    - 그 위젯들을 조합해서 레이아웃 위젯을 만들고 ( eg. 리스트,  이미 구현해둔 리스트 위젯을 사용 할 수 있음)  

    - 그 레이아웃이 모여서 페이지 위젯을 구성하는..  (타이틀 + 설명영역 + 상세정보 ..)

     

    플러터는 위젯 천국 ^^ 

     

    Widgets are the basic building blocks of a Flutter UI.  

     

    레고 같은거 맞지?? 

    기본 블럭을 쌓아서 부분을 만들고 그 부분을 조합해서 전체를 만드는거얌 

    기본은 작은 레고블럭

     

    레고블럭들    레고 블럭을 조합해서 팔, 다리, 머리 만들기   합체해서 로보트~  !! 

    기본위젯        레이아웃 (위젯)                                              → 페이지 (위젯)              →    앱  (위젯)

     

    8

    최상위 위젯으로는 StatelessWidget &  StatefulWidget 이 있다.

     

    - StatelessWidget

      : 상태가 변하지 않음 (화면이 한번 그려지면 변경되지 않는 위젯)

     

    - StatefulWidget 

      : 상태가 변경될 수 있음

       : 상태가 변경되면 변경된 상태를 화면에 나타내기 위해 다시 렌더링 되어야 함(다시 그려야함)

     

     

    예를들어 이런형태 

    해설 해보자면 

    - MyApp : "앱의 이름은 MyApp 이야.

                      이 페이지는 상태가 변경되지 않는 위젯 (StatelessWidget)을 확장해서 만들어졌어 

                      Build 메소드~~ 화면을 그려줘~"

    - Build 메소드 :  " MaterialAPP 위젯으로 화면을 그려서 보내줄께~~"  (return MatrialAPP)

    - MaterialAPP : " 나는 타이틀 + Scaffold 위젯 + AppBar 위젯 + Center 위젯으로 구성됐어.

                                구성요소 위젯들을 불러볼께~~" 

     

     

    9

    정리해보자면

    위젯은 

    위젯 = 페이지 = 레이아웃 = 노출요소 = 위치 정보 = 클래스

    위젯의 변신은 무죄? ^^ 

     

     

    ■ 참고

    https://docs.flutter.dev/development/ui/layout

    'w3' 카테고리의 다른 글

    개발(환경) 준비  (0) 2022.09.12
    pubspec.yaml & Packages  (0) 2022.09.11
    YAML  (0) 2022.09.11
    SDK  (0) 2022.09.11

    댓글

Designed by Tistory.