[Flutter] 위젯의 개념과 구조: 위젯, 트리, Dart 문법 이해

Widget in Flutter

• 앱의 UI를 만들고 구성하는 모든 기본 단위 요소이다.
• 또한, 눈에 보이지는 않지만 레이아웃을 정의하기 위한 요소들도 위젯이다.
• 위젯이 모여 만들어진 앱 또한 위젯이다.
• 따라서.... 플러터는 모든 것이 widget이다.

위젯의 종류

• Stateful Widget, Stateless Widget, Inherited Widget

Flutter Widget Tress

• 위젯들을 나열해서 Tree구조로 정리될 수 있음.
• 한 위젯 내에 얼마든지 다른 widget들이 포함될 수 있다.
  • 부모 위젯과 자식 위젯이 있고,
  • 부모 위젯(Parent Widget)을 Widget Container라고 부르기도 한다.

• 위젯트리 참고 예제
  
  • MaterialApp위젯: 플러터sdk에서 제공하는 위젯들 사용하능하게 해줌
  • Scaffold 위젯: 앱 화면, 기능을 구성하기 위한 빈 페이지를 준비해주는 위젯!

출처: https://www.youtube.com/watch?v=jI4kqLdqXic&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=6 

플러터에서는 위젯이 클래스랑 같은 개념인 것인가??

일단 클래스에서

• {named argument}가 무슨 의미가 있는건지 이제 알았음.
  생성자의 arg들을 전부 optional하게 만든 놈인겨!
  • ⇒ 생성자에 있는 수많은 arg중에서 원하는 arg만을 골라서 입력가능, 순서도 상관 없음!
  • 와 결국….. say(from: “ jiny); 이거랑 다 같은거였음
    • Scaffold(appBar: AppBar(…)) ←이런것들이 말이야!!!
      • Scaffold위젯의 appBar argument에 AppBar위젯을 할당한 것이지
• 즉, 플러터에서 “위젯”은 클래스에서 생성된 인스턴스인 것임
  • Text(’Hi Jiny’) ← 이 위젯은 Text생성자를 통해 문자열을 입력받아 생성된 인스턴스인 것

• 다트문법 몇개 예시
  • final List<Widget> _widgets = [];
  • ⇒ ‘_widgets’라는 이름을 가진 상수 ‘위젯’자료형 리스트 선언
  • 이름규칙
    • 변수명은 camelCase
    • 클래스명은 PascalCase
  • 함수의 이름은 일반적으로 동사임
  • say(from: “jiny);
  • ⇒ say함수의 from이라는 매개변수에 jiny 라는 값을 넣어준 것
  • 함수의 매개변수 앞에 required 키워드를 붙여주면 해당 매개변수를 함수 호출시 필수로 전달해야 함
  따라서 required 키워드가 붙은 경우 매개변수의 타입을 String?이 아닌 String으로 만들어 줄 수 있음

bottomNavBar: BottomNavigationBar(
    items: _items,
    currentIndex: _index,
    ),

⇒ BottomNavigationBar클래스의 items, currentIndex라는 속성에 _items, _index라는 변수를 할당해준 것이다.