Flutter 강좌 - Hello World 만들기

 

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

첫번째 Flutter 강좌로 Hello World를 만들어보겠습니다.

안드로이드 스튜디오에 Flutter 플러그인을 설치하면 안드로이드 스튜디오를 이용해서 Flutter 기반의 앱을 개발할 수 있습니다.

안드로이드 스튜디오에 Flutter 개발환경을 구성하는 방법은 Flutter 공식 사이트를 참고하시기 바랍니다.
https://flutter.dev/docs/get-started/install

Install

 

본 강의는 Flutter 공식 사이트의 문서를 참고하여 작성되었습니다.
https://flutter.dev/docs/development/ui/widgets-intro

Introduction to widgets

 

안드로이드 스튜디오에서 New Flutter Project를 선택하여 새로운 Flutter 프로잭트를 생성합니다.

이 때 기본적인 소스템플릿이 자동으로 생성되는데 최상단의 import 부분을 제외한 모든 소스코드를 삭제한 후 다음과 같이 작성합니다.

import 'package:flutter/material.dart';

void main(){
  runApp(                                  // 앱을 실행
    Center(                                // 화면 중앙
      child: Text(                         // 중앙 내부에 텍스트 삽입
        "Hello World!!",                   // 텍스트로 Hello World! 삽입
        textDirection: TextDirection.ltr,  // 텍스트는 왼쪽에서 오른쪽을 기술
      ),
    )
  );
}

 

소스코드를 살펴보면, Flutter 언어도 main 함수가 프로그램의 시작점입니다. 

앱을 실행하기 위해 main 함수에서 runApp함수를 호출하는데 실행될 로직을 runApp 함수 내부에 직접 기술하고 있습니다.

Center함수는 화면의 중앙 부분을 구성할 수 있는 함수입니다. 그리고 Center 함수 내부에 child 항목을 이용해서 화면 중앙을 실제로 구성합니다. child 항목에 텍스트를 추가하기 위해 Text 함수를 이용하고 있으며 파라미터로 출력할 텍스트와 함께 텍스트의 기술 순서를 설정하는 textDirection 속성이 기술되어 있습니다.

ltr은 left to right의 약자로 왼쪽에서 오른쪽으로 기술한다는 의미입니다.

 

첫번째 앱의 실행화면은 다음과 같습니다.

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱