위

• 구조적 위젯 — 예: 버튼 또는 메뉴
• 글꼴이나 색 구성표를 전파하는 스타일 위젯
• 레이아웃 관련 위젯 — 예: 여백
• 기타 등등

import 'package:flutter/material.dart';

void main() {
 runApp(new DogApp());
}

class DogApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'My Dog App',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Yellow Lab'),
       ),
       body: Center(
         child: DecoratedBox( // here is where I added my DecoratedBox
           decoration: BoxDecoration(color: Colors.lightBlueAccent),
           child: Text('Rocky'),
         ),
       ),
     ),
   );
 }
}

import 'package:flutter/material.dart';

void main() {
 runApp(new DogApp());
}

class DogApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'My Dog App',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Yellow Lab'),
       ),
       body: Center(
         child: DecoratedBox(
           decoration: BoxDecoration(color: Colors.lightBlueAccent),
           child: Padding(
             padding: const EdgeInsets.all(8.0)
             child: Text('Rocky'),
           ),
         ),
       ),
     ),
   );
 }

import 'package:flutter/material.dart';

void main() {
 runApp(new DogApp());
}

class DogApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'My Dog App',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Yellow Lab'),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             DecoratedBox(
               decoration: BoxDecoration(color: Colors.lightBlueAccent),
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text('Rocky'),
               ),
             ),
             DecoratedBox(
               decoration: BoxDecoration(color: Colors.lightBlueAccent),
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text('Spot'),
               ),
             ),
             DecoratedBox(
               decoration: BoxDecoration(color: Colors.lightBlueAccent),
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text('Fido'),
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }
}

class DogName extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  }
}

class DogName extends StatelessWidget {
 final String name;

 @override
 Widget build(BuildContext context) {
 }
}

class DogName extends StatelessWidget {
 final String name;

const DogName(this.name);

 @override
 Widget build(BuildContext context) {
  }
}

class DogName extends StatelessWidget {
 final String name;

const DogName(this.name);

 @override
 Widget build(BuildContext context) {
   return DecoratedBox(
     decoration: BoxDecoration(color: Colors.lightBlueAccent),
     child: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Text(name),
     ),
   );
 }
}

import 'package:flutter/material.dart';

void main() {
 runApp(new DogApp());
}

class DogApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'My Dog App',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Yellow Lab'),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             DogName('Rocky'),
             SizedBox(height: 8.0),
             DogName('Spot'),
             SizedBox(height: 8.0),
             DogName('Fido'),
           ],
         ),
       ),
     ),
   );
 }
}

파트 2 — 위젯 트리와 요소 트리

StatelessWidget을 사용한 UI 작성이 어떤 식으로 이루어지는지 간단한 예를 보셨습니다. 그런데 이때 '이런 build 메서드의 작동 방식은 알겠지만, 이 메서드는 언제 호출되는 걸까?'라는 의문이 드실지 모르겠습니다. 자, 그렇다면 DogName 위젯 단 하나로 시작해봅시다.

우리는 Flutter로 빌드한 앱을 위젯으로 구성된 트리라고 생각하는 경향이 있는데, 그게 나쁜 건 아닙니다. 하지만 서두에서 언급한 바와 같이, 위젯은 앱 UI의 각 부분을 위한 구성일 뿐입니다. 위젯이 바로 UI의 청사진인 셈입니다.

그렇다면 이러한 구성은 무엇을 위한 것일까요? 그건 바로 요소를 위한 것입니다. 요소는 화면상에서 실제로 만들어지고 마운트되는 위젯입니다. 요소 트리는 어떤 특정 순간에 기기에 실제로 표시되는 내용을 나타냅니다.

각각의 위젯 클래스에는 대응하는 요소 클래스와 인스턴스 생성을 위한 메서드가 둘 다 있습니다.

예를 들어 StatelessWidget은 StatelessElement를 생성합니다.

위젯이 트리에 마운트되면 Flutter가 createElement() 메서드를 호출합니다. Flutter는 위젯에 요소를 요구하고, 요소를 생성한 위젯으로 다시 돌아가는 참조 표시와 함께 요소 트리 위에 그 요소를 팝업으로 나타냅니다.

그때 StatefulElement는 '하위 요소가 있는가?'라고 묻고 Widget의 build() 메서드를 호출합니다.

이 앱에는 하위 요소가 여러 개 있습니다. 그러면 이런 위젯이 자체의 대응 요소를 생성합니다.

이렇게 생성된 요소 역시 요소 트리에 마운트됩니다.

그래서 이제는 앱에 두 개의 트리가 있습니다. 하나는 화면에 실제로 표시되는 내용(요소)을 나타내고, 다른 하나는 이러한 요소가 생성된 청사진(위젯)을 보유합니다.

이때 예컨대 요소를 빌드하고 생성하는 프로세스를 시작하는 것은 무엇이고 이 전체 작업을 시작하는 것은 무엇인지 등의 사항이 궁금할 수도 있겠습니다. 그래서 아마 처음에는 미처 알아차리지 못했을 사항을 보여드리겠습니다.

전체 앱을 나타내는 DogApp 클래스는 그 자체가 바로 StatelessWidget입니다.

import 'package:flutter/material.dart';

void main() {
 runApp(new DogApp());
}

class DogApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'My Dog App',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Yellow Lab'),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             DogName('Rocky'),
             SizedBox(height: 8.0),
             DogName('Spot'),
             SizedBox(height: 8.0),
             DogName('Fido'),
           ],
         ),
       ),
     ),
   );
 }
}

Widget은 거의 모든 일을 할 수 있다고 말했던 것을 기억하십니까? 앱의 진입점인 main()을 살펴보면 main()이 runApp() 메서드를 호출하며 그것이 바로 시작점이라는 사실을 알 수 있습니다. runApp() 메서드는 위젯을 택해 화면 크기와 일치하는 높이와 너비 제약 조건을 가진 앱의 루트 요소로 마운트합니다.

import 'package:flutter/material.dart';

void main() {
 runApp(new DogApp());
}

class DogApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'My Dog App',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Yellow Lab'),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             DogName('Rocky'),
             SizedBox(height: 8.0),
             DogName('Spot'),
             SizedBox(height: 8.0),
             DogName('Fido'),
           ],
         ),
       ),
     ),
   );
 }
}

그런 다음, Flutter가 위젯 트리에 있는 모든 build() 메서드를 하나씩 진행하면서 모든 것이 빌드되고 화면상에 마운트되고 배치되어 렌더링 준비가 완료될 때까지 위젯을 생성하고 이를 사용해 요소를 만듭니다.

그게 바로 Flutter가 사랑스러운 누렁이 래브라도의 이름이 표시된 작은 텍스트 상자 세 개를 표시하는 방법입니다.

StatelessWidget으로 작성하여 인터페이스를 빌드하는 방법을 소개해 드렸습니다. 필자가 언급하지 않은 점 한 가지는 데이터 변경 시 인터페이스를 업데이트하거나 다시 빌드하는 방법입니다. 그건 StatelessWidget이 데이터를 변경하지 않기 때문입니다. StatelessWidget은 Stateless 위젯이므로 시간의 경과에 따라 데이터를 추적하거나 스스로 다시 빌드하는 작업을 트리거할 수 없습니다.

다행히도, Flutter에는 StatefulWidget도 있으므로 이 시리즈 게시물의 다음 편에서 그에 관한 내용을 다루도록 하겠습니다.

Flutter와 Flutter의 수많은 위젯에 관해 더 자세히 알아보시려면 flutter.io를 살펴보세요.

또한 여기서 시리즈의 다른 편을 시청하거나 Flutter 코드랩을 사용해 보실 수도 있습니다.