모든 개발의 시작. Flutter 에서도 Hello World !

안녕하세요! 스테디빌더입니다. 😁
 
역시 시작은 Hello World 죠 ! (ㅋ)
혹시 다른 개발 공부를 하셨다면 아시겠지만,
아니셔도 괜찮습니다 : ) 어서오세요 😆
 

 

목차

1. Hello World 프로젝트 준비
2. Flutter에서 첫 번째 화면 만들기
3. 코드를 실행하고 결과 확인하기
4. 배운 점 요약 및 확장 아이디어

1. Hello World 프로젝트 준비

Flutter에서 "Hello World"를 출력하는 건
마치 첫 발자국을 내딛는 것과 같아요.
준비 단계는 간단합니다 !

 

준비

• Flutter가 설치된 컴퓨터 (설치 방법은 건너뛰겠습니다, 준비 완료죠?)
• 안되었다면 아래 내용을 참고해 주세요 : )
• Flutter 입문: 비개발자가 첫 앱을 만드는 방법
• Visual Studio Code (이하 VSCode , 에디터 너무너무 좋아요!)

Flutter 입문: 비개발자가 첫 앱을 만드는 방법

 

 

새 프로젝트 생성하기

 
▪ 일단 C드라이브에 영문으로 된 아무 폴더나 만드세요.
- 저는 C:\src 에 만들어 두었습니다. 빠르게 찾을 수 있도록요.
- 영문이 아니면 오류가 발생될 수 있습니다. 이건 거의 대부분 도구들이 그래요. (ㅎ)
 
▪ VSCode 를 실행, 터미널을 열고( Ctrl+Shift+` ) 아래 명령어를 입력해 보세요.

flutter create hello_world

 
<hello_world 프로젝트 만들기>

hello_world 프로젝트 만들기

** 만약 위 명령어를 실행할 수 없다면 환경변수 설정 문제일 거예요. 웹에서 검색해 봅시다!
 
 
▪ 생성된 프로젝트 폴더로 이동합니다:

cd hello_world

 
 
개발 도구(VS Code 또는 Android Studio)에서 이 폴더를 엽니다.
 
<VS Code 에서 폴더 열기>

VS Code 에서 폴더 열기

 
 

2. Flutter에서 첫 번째 화면 만들기

Flutter의 화면은 main.dart 파일에서 시작돼요.
프로젝트의 lib 폴더 아래 있는 main.dart 파일을 엽니다.
 
<main.dart 위치>

main.dart 위치

main.dart 에 있는 코드는 전부 삭제하셔도 좋습니다.
(또 만들면 또 나와요 걱정마세요 ㅎ)
 
이제 아래 코드로 바꿔봅시다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

코드 설명

• void main() : 메인 함수입니다. 실행을 위해선 꼭 있어야 해요.
• runApp(MyApp()): 앱의 시작점입니다. 아래쪽에 있는 class MyApp 을 실행해요.
• MaterialApp: Flutter의 앱 구조를 제공하는 기본 도구예요.
• Scaffold: 화면의 뼈대(기본 구조)를 만들어줘요. (예: AppBar, Body 등)
• Text: "Hello, World!"라는 문구를 화면에 표시합니다.

3. 코드를 실행하고 결과 확인하기

이제 실행해 봅시다.
터미널에서 flutter run 을 입력해도 되고,
아니면 Ctrl + F5 로 실행하실 수도 있습니다.
 
실행하면 잠시간 로딩 시간이 있습니다.
로딩 후 앱이 뜨는 것을 볼 수 있어요 : )
 
<Hello, World 결과 화면>

 
화면에 띄울 수 있는 디바이스(장치)를 설정할 수 있어요.
저는 Windows 로 설정해서 윈도우 프로그램처럼 띄워진 겁니다.

모바일을 직접 연결하거나, 아니면 가상디바이스를 설정해서 띄울 수도 있어요.
 
화면 상단에는 "Hello World App"이라는 제목이,
중앙에는 "Hello, World!"라는 문구가 보여집니다.
 
좋아요!
시작은 Hello, World! 지만,
마지막은 앉아서 부를 축적할 수 있는 앱이 되리라!
 
화이팅 해봅시다. (ㅎ)

4. 배운 점 요약 및 확장 아이디어

 

배운 점

• Flutter 앱은 main.dart 파일에서 시작됩니다.
• MaterialApp, Scaffold, Text 위젯은 기본 화면을 구성하는 주요 도구예요. 레고 블럭 기억나시죠?
• Flutter의 "Hot Reload" 기능으로 코드 수정 후 즉시 결과를 볼 수 있어요. Hello 를 hi 로 바꾸면 바로 적용됩니다. 물론 VS Code 에서 저장은 꼭 해야해요.

 

확장 아이디어

 
"Hello, World!" 대신 자신의 이름을 출력해 보세요.
body 에 있는 Text 를 변경하면 됩니다~
 

<이름 바꾸기 결과>

이름 바꾸기 결과

 
 
텍스트 색상, 크기, 굵게 변경해 보세요.
TextStyle 에 추가하면 됩니다.
fontSize: 36 , fontWeight: FontWeight.bold , color: Colors.blueGrey ,
 
<텍스트 스타일 변경>

 
 
화면 배경색을 바꿔 보세요.
Scaffold ( ) 안에 바로 아래 속성을 넣으면 됩니다.
backgroundColor: Colors.black,
 
<배경색 변경>

배경색 변경

 
 
 
 
아주 기초지만 기초를 튼실히 해야 나중에 헤매지 않겠죠?
좋습니다. 오늘은 여기까지 ~
 
<내맘대로 완성>

내맘대로 완성

 
 
 
오늘도 고생하셨습니다 !
 
끝 !