위젯 트리

Coddy Flutter 여정의 첫 앱 만들기 섹션에 포함된 레슨. 32개 중 3번째.

위젯은 다른 위젯 안에 들어갑니다. 다른 위젯을 담는 위젯은 다음과 같이 child:에 넣습니다. 예를 들면 Center입니다.

Center(
  child: Text('Hello'),
)

Center는 자체적으로 아무것도 그리지 않습니다. 자식을 받아 자신이 차지한 공간의 가운데에 배치합니다. Center가 없으면 텍스트는 왼쪽 위 모서리에 놓입니다.

위젯 안에 위젯이 있고 그 안에 또 위젯이 있으면 위젯 트리가 만들어집니다. 앱의 트리는 MaterialApp에서 시작해 Scaffold로 이어지고, 그다음에는 body:에 넣은 내용이 이어집니다. 각 위젯의 자식은 괄호 안에 작성하므로 괄호를 보면 트리 구조를 알 수 있습니다. 각 줄 끝의 쉼표는 코드를 깔끔하게 정리해 줍니다.

챌린지

쉬움

텍스트가 왼쪽 위 모서리에 붙어 있습니다. 화면 가운데에 오도록 Center로 감싸세요:

body: Text('Right in the middle'),을 child:가 해당 Text인 Center로 바꾸세요

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Text('Right in the middle'),
      ),
    );
  }
}