flutter(플러터) - 01.Hello World 및 전체구조

JungSik Heo·2026년 4월 28일

flutter

목록 보기
1/23
// lib/main.dart
 
import 'package:flutter/material.dart';
 
void main() {
  runApp(App());
}
 
// StatelessWidget을 상속받아 상태가 없는 Flutter 애플리케이션의 UI 요소를 정의한다.
class App extends StatelessWidget {
  @override
  // build 메서드는 위젯의 UI를 생성한다. Flutter가 이 메서드를 호출해서 UI를 구성한다
  Widget build(BuildContext context) {
    // MaterialApp은 애플리케이션의 루트 위젯으로 앱의 전반적인 디자인, 테마, 라우팅 등을 관리한다
    return MaterialApp(
      // Scaffold 위젯은 화면의 기본적인 레이아웃을 제공하며, Material 디자인 구조를 따른다
      // 앱바, 본문, 플로팅 액션 버튼 등을 포함할 수 있다.
      home: Scaffold(
        // AppBar 위젯은 상단 헤더 영역을 정의한다.
        appBar: AppBar(
          // Text 위젯을 사용해 화면에 텍스트를 표시한다.
          title: Text('Hello Flutter'),
        ),
        body: Center(
          // Center 위젯은 자식 위젯을 중앙에 배치한다.
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

class Widget {
  final Widget? child;

  // 👉 자식 위젯을 받는 생성자
  Widget(this.child);

  void draw() {
    //print("Widget 그리기");
    // 👉 자식이 있으면 계속 내려감 (Composition)
    child?.draw();
  }
}

class Scaffolder extends Widget {
  Scaffolder(Widget? widget) : super(widget);

  @override
  void draw() {
    print("Scaffolder 그리기");

    // 👉 부모 로직 실행 (child draw 포함)
    super.draw();
  }
}

class AppBar extends Widget {
  AppBar(Widget? widget) : super(widget);

  @override
  void draw() {
    print("AppBar 그리기");
    super.draw();
  }
}

void main() {
  var app = new Scaffolder(new AppBar(null));

  app.draw();
}

https://romantech.net/1298
https://blog.naver.com/getinthere

profile
쿵스보이(얼짱뮤지션)

0개의 댓글