플러터, Hello World 예제 코드 설명

플러터, Hello World 예제 코드 설명 

 

글, 수알치 오상문 

 

다음 플러터 예제는 장치 화면 Hello World를 출력합니다. 

예제 코드는 다음과 같습니다.

코드에 설명을 적어놨으니 구조 분석에 참고하시기 바랍니다.

 

 

// 내장 위젯 material 임포트 (material 위젯은 흔하게 사용)

import 'package:flutter/material.dart';

 

// main 함수에서

// runApp 메서드를 이용하여 최상위 위젯을 지정해야 한다.

void main() => runApp(MyApp()); // MyApp() : 최상위 위젯

 

/* 앞 main( )과 같은 구조 

void main() {

  return runApp(MyApp());

}

*/

 

// StatelessWidget 위젯을 상속한 MyAPP 위젯을 만든다.

// StatelessWidget은 화면 요소와 같은 위젯에 내용 변화가 없을 때 사용한다.

// 이 예제는 단순히 문자열을 출력하는 경우이므로 StatelessWidget을 사용한다.

// (이와 반대로, StatefulWidget은 화면 위젯에 변화가 있는 경우에 사용)

class MyApp extends StatelessWidget {

  // StatelessWidget을 사용할 때,

  // 반드시 build 메소드를 재작성해야 한다(오버라이딩).

  // build 메소드 전달인수에 BuildContext context 지정

  @override

  Widget build(BuildContext context) {

    // MaterialApp 내장 위젯을 사용하도록 생성 및 반환

    return MaterialApp(

      title: 'Welcome to Flutter', // title 속성 값 지정

      // Scaffold 구조 사용하도록 지정

      home: Scaffold(

        // Scaffold의 appBar 부분 설정

        appBar: AppBar(

          // 상단 앱바 영역에서 title 'Welcome to Flutter' 지정

          title: const Text('Welcome to Flutter'),

        ),

        // Scaffold의 body 부분 설정

        body: const Center(

          // body 영역에서 자식 위젯 Text 지정

          // 화면 중앙에 텍스트 'Hello World' 출력

          child: Text('Hello World'),

        ),

      ),

    );

  }

}