플루터(Flutter) 개발 시작(Hello World)

Create New Project

새로운 프로젝트를 생성하여 Hello World를 찍어 보도록 하겠습니다. 

 

새로운 프로젝트의 경로를 설정해주세요. 

iOS 언어 선택란이 없는데 기본값이 swift로 지정되어 있기 때문 입니다. 

앱 개발 예정이니까 platforms 부분도 android 와 iOS만 체크해줍니다. 

 

프로젝트를 생성하고 오른쪽에 Device Manager 선택한 다음 start 버튼 눌러주시면 됩니다. 

 

Running Device에 핸드폰이 나왔다면 성공 입니다. 

 

Hello World

모든 언어 학습의 기본인 hello world 출력해보도록 하겠습니다. 

emulator 실행중인 상태에서 상단의 start 버튼을 눌러주세요. 

상단의 start는 실질적인 앱 실행의 build를 의미합니다. 

 

main.dart 페이지에 아래 처럼 코딩해주세요. 

앞전에 flutter에서는 component 대신 위젯을 사용한다고 말씀드렸는데요. 

아래의 모든 것이 위젯 입니다. 

 

runApp() => 앱의 시작점, 여기서 전달한 위젯을 루트로 화면에 렌더링 합니다. 

MaterialApp() => 앱 전체의 뼈대를 구성하는 위젯으로 테마, 라우팅 등을 설정할 수 있습니다. 

Scaffold() => 화면의 기본 레이아웃을 의미 합니다.

Center() => 자식 위젯을 가운데 정렬 합니다. 

Text() => 문자열을 화면에 표시 합니다. 

TextStyle() => 텍스트의 스타일을 지정 합니다. 

import 'package:flutter/material.dart';

void main() {
  print('✅ main() 함수가 실행되었습니다');

  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(fontSize: 32, color: Colors.black),
          ),
        ),
      ),
    ),
  );
}

 

하단에 restart 해주면 Hello World가 찍히는걸 볼 수 있습니다. 

 

조금 더 나아가서 배경색을 검은색으로 텍스트는 하얀색으로 우측 상단의 debug 이미지를 제거 하겠습니다. 

debugShowCheckedModeBanner => false 일 경우, 오른쪽 상단의 debug 이미지를 미노출 처리 합니다. 

backgroundColor => 스크린의 배경색을 결정 합니다. 

color => 폰트색을 결정 합니다. 

import 'package:flutter/material.dart';

void main() {
  print('✅ main() 함수가 실행되었습니다');

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              color: Colors.white
            ),
          ),
        ),
      ),
    ),
  );
}