Flutter 1화 - Flutter 설치 및 예제

본 글은 윈도우11에서 VSCode를 사용하고 있습니다.

[목차생성]

0. Flutter와 Dart 소개

Dart는 Google에서 개발한 프로그래밍 언어로, 주로 웹과 모바일 앱을 만들 때 사용됩니다. Dart의 가장 큰 장점은 빠르고 효율적인 앱을 만들 수 있다는 점입니다. 특히 Flutter라는 프레임워크와 함께 사용될 때, 하나의 코드로 Android와 iOS 앱을 동시에 개발할 수 있어 개발 시간과 비용을 절약할 수 있습니다.

Dart를 사용하는 Flutter에 대한 기업들의 평가는 매우 좋습니다. 지식iN 앱을 Flutter로 개발한 네이버의 분석에 따르면, 플러터를 선택하게 된 이유로 성능과 학습 비용을 꼽습니다. 또한 Flutter와 유사한 포지션에 존재하는 프레임워크들, 예를 들면 React Native, Xamarin, SCADE과 다양한 평가 기준으로 비교하였을 때, 가장 좋은 평가를 받았다고도 말하였습니다. 특히 네이버에서는 Flutter의 성능 부분에서 높게 평가하는 모습을 보였습니다. (네이버에서는 네이티브 방식 수준의 성능이라 평가하였음)

이처럼 좋은 평가를 받으며 강력하게 발전 중인 Flutter 프레임워크를 사용하기 위해선 Dart 언어에 대한 학습이 필수적이기에 이번 글에서는 Dart 언어 문법 위주로 학습해보겠습니다.

네이버가 평가한 Flutter에 대한 글을 아래에 첨부하겠습니다.
https://d2.naver.com/helloworld/3384599

1. Flutter 시작하기

VScode 환경에서 Flutter 설치하는 과정을 설명합니다.

우선 VSCode Extensions에서 Flutter를 검색한 뒤, 이를 설치합니다. Extensions는 컨트롤+쉬프트+X (Ctrl+Shift+X) 를 통해 빠르게 접근가능합니다.

설치가 완료되면 Flutter(Dart)를 사용할 폴더를 열어야합니다. File 탭 - Open Folder로 폴더를 열어주세요. 단축키는 컨트롤+O+K (Ctrl+O+K) 입니다.

폴더를 열었다면, 컨트롤+쉬프트+P (Ctrl+Shift+P)를 누르면 나오는 창에 Flutter를 검색하고 Flutter: New Project를 클릭합니다. 그러면 아래 사진처럼 오류가 하단에 발생합니다.

하단에 발생한 오류창에 존재하는 Download SDK 버튼을 누르면, Select Folder for Flutter SDK 창이 발생합니다. 여기서 Clone Flutter 버튼을 누릅니다. (우측 하단에 버튼이 있습니다)

설치가 완료될 때 까지 잠시 기다려주세요.

2. 프로젝트 생성하기

다시 한번 더 컨트롤+쉬프트+P (Ctrl+Shift+P)를 누르면 나오는 창에 Flutter를 검색하고 Flutter: New Project를 클릭합니다.

Flutter template로 Application을 선택합니다.

템플릿을 설치할 폴더를 선택합니다.

잠시 기다리면 플러터 예제가 완성됩니다.

3. 예제 실행하기

F5를 누르고 잠시 기다리면 아래와 같이 Flutter 예제가 실행됩니다.

 

다음 글에서는 Dart 언어의 문법에 대해 알아보겠습니다.