[Flutter] 플러터 시작하기 hello world 출력해 보기

저번 시간에는 플러터를 설치해 보았습니다. 그리고 이번시간에는 설치한 플러터를 가지고 코딩의 기초 중의 기초 hello world를 출력해보도록 하겠습니다. 플러터는 Dart언어를 기반으로한 멀티 플랫폼 프레임워크입니다.

다양한 플랫폼에서 사용할 수 있습니다. 오늘은 웹에서 한번 출력해 보도록 할건데, 실사용에서는 iOS나 안드로이드에서 사용하는 것을 추천드리고 웹은 Vue나 React 같은 프레임워크로 해보는 것도 추천드립니다.

 

플러터로 Hello Wolrd 출력하기

 

1. 안드로이드 스튜디오 세팅

먼저 flutter를 기본적으로 사용하기 위해서는 플러그인이 설치되어 있어야 하기 때문에 안드로이드 스튜디오를 실행해 주시고 우측 하단에 Configure 메뉴를 클릭해 줍니다.

 

Plugins 를 클릭해 줍니다.

 

Flutter를 검색해서 찾아 줍니다. 인기있는 플러그인이라서 키자마자 바로 보이네요 Install해 줍니다.

 

설치가 완료되면 IDE를 업데이트 하기 위해 안드로이드 스튜디오를 Restart 해주세요

 

 

2. 프로젝트 생성

안드로이드 스튜디오를 재시작 해주셨다면 Create New Project 를 클릭해서 프로젝트를 시작해 줍니다.

 

Flutter SDK 환경변수 등록해줘야 합니다. 플러터가 설치되어 있는 위치를 등록해 줍니다.

 

프로젝트 이름을 입력해 주시고 안드로이드와 iOS에서 사용될 언어를 선택해 줍니다. 그리고 어떤 플랫폼에서 실행시킬지 체크를 해주시고 Finish를 클릭해 주세요

 

Cannot Save Settings 라고 나오네요 Invalid module name (lower_case_with_underscores) 대문자는 입력할 수 없나봅니다. 소문자로 변경해서 프로젝트 이름을 넣어주세요

 

3. 코딩하기

이제 main.dart에 코드를 입력해 주시면 됩니다. 코드는 글 하단에 공유해 드리도록 할게요

 

4. 코드 실행하기

상단에 어떤 플랫폼에서 실행시켜볼지 선택을 하시고(chrome web), 코드를 실행할 dart 파일을 선택하시고 시작해 주시면 됩니다. 

 

디버그 모드로 시작이 되었고 이제 크롬으로 실행이 켜지면서 실행히 될 겁니다.

 

크롬에 Hello World가 정상적으로 출력되는 것을 확인하실 수 있습니다.

 

import'package:flutter/material.dart';

voidmain()=>runApp(MyApp());

classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnMaterialApp(
title:'WelcometoFlutter',
home:Scaffold(
appBar:AppBar(
title:Text('WelcometoFlutter'),
),
body:Center(
child:Text('HelloWorld'),
),
),
);
}
}

위 코드를 그대로 입력해 주시면 됩니다. 크게 앱 바와 바디로 이루어지게 만들어 두었고 전반적인 형태만 보시고 상세하게는 다음 시간에 알아보도록 하겠습니다.

 

2021.12.26 - [Coding/Flutter] - [Flutter] 맥북 플러터 설치하는 방법 - 시작하기

[Flutter] 맥북 플러터 설치하는 방법 - 시작하기