flutter - hello world 를 만들어 보자 - 기초

오늘은 flutter로 hello world를 표현하려 합니다.

 

 

flutter 셋팅은 flutter 가이드만 보고 따라 해도 쉽게 할 수 있습니다.

 

윈도 사용자들은 아래 링크를 참고하세요

flutter.dev/docs/get-started/install/windows

Windows install

 

 

맥 사용자들은 아래 링크를 참고하세요

flutter.dev/docs/get-started/install/macos

macOS install

 

어느덧 flutter 버전이 1.22.3 이 되었네요

 

처음 flutter를 설치해보고 한 게 1.2.1이었는데 정말 많이 발전했네요.

특히 1.12인가 1.17 버전에서는 성능이 환상적으로 올라가면서 네이티브 뺨을 번개 치듯 따라잡았죠.

 

이 블로그를 보고 정말 와.... 했습니다.

 

medium.com/flutter/announcing-flutter-1-17-4182d8af7f8e

Announcing Flutter 1.17

 

 

 

아 그리고 여기 있는 글을 시간 날 때 읽어 보시기 바랍니다.

medium.com/flutter

Flutter – Medium

 

아직 시작단계라면 어떤 기능을 지원하는지만 확인해 보세요.

지원하는 기능을 알고 있는 것과 모르고 있는 것에는 차이가 큽니다. 특히 프로젝트를 진행할 땐 말이죠

 

 

 

오늘 hello world는 android studio 가 아닌 웹에서 바로 코딩 가능한 툴로 진행해보겠습니다.

 

제가 작성한 hello world를 보신 후 

 

flutter.dev/docs/get-started/codelab

Write your first Flutter app, part 1

flutter의 코드 랩을 따라 해 보세요. (flutter doc 사이트도 점점 풍부해지고 있습니다!!)

 

 

그러면 웹에서 코딩할 사이트를 Code pen 사이트 입니다.

codepen.io/pen/editor/flutter

Create a New Pen

 

기본 틀에서 아래와 같이 간단한 주석과 함께 달아보았습니다.

 

flutter hello world 

 

주석을 빼면 매우 심플하죠?

 

실제 개발툴에서 프로젝트를 만든 후 native 코딩없이 바로 hello 를 띄우실 수 있습니다.

 

물론 내가 원하는 앱을 만들기 위해서는 native 코딩이 필요해지긴 하지만, plugin 을 잘 찾아서 사용하시면 직접 손을 댈 일을 줄어들겁니다.

 

 

기초 부분을 어느정도 다루고, 간단한 앱을 클론 하면서 같이 배워보도록 해요.

 

다음주는 android studio 를 이용해서 다뤄보겠습니다.

 

vscode 를 사용하시고 싶으신 분은 vscode 를 사용하셔도 됩니다.

 

오히려 여러 기기 테스트는 vscode 가 동시 디버그가 가능하기 때문에 ui 작업이 훨신 수월할 겁니다.