본문 바로가기

전체 글27

Flutter 데모 앱 살펴보기 2 - Widget과 외부 패키지 사용법, 스크롤 기능 플러터 코드랩에서는 https://docs.flutter.dev/get-started/codelab#step-1-create-the-starter-flutter-app 라는 예제를 통해 Widget 다루는 방법, 외부 패키지를 불러들여 사용하는 방법, ListView를 통한 스크롤 기능을 소개하고 있습니다. 기본적으로 생성되는 데모 앱 다음 단계로 다루기 좋은 내용이라 한 번 살펴보도록 하겠습니다. 터미널에서 앱 생성하기 코드랩 예제는 터미널에서 플러터 앱 생성하는 방법으로 시작하고 있어서 저도 터미널에서 해당 프로젝트를 먼저 생성했습니다. 전체적으로는 터미널에서 iOS 시뮬레이터를 띄우고 (open -a Simulator), startup_namer라는 플러터 앱을 생성한 후 (flutter creat.. 2022. 10. 5.
Flutter 데모 앱 살펴보기 1 - 디버깅 속도를 높여주는 Hot Reload 플러터 앱에서 기본적으로 생성해주는 데모 앱이 어떻게 구동되는지 살펴봅시다. 'Flutter Demo'라는 이름이 붙은 이 앱은 플러터의 기본 기능 중 Hot Reload, StatelessWidget과 StatefulWidget의 차이를 이해할 수 있게 간단한 카운터 기능만 제공하고 있습니다. 데모 앱을 실행하기 전에 터미널에서 Android Studio를 실행시키는 방법을 알아보고, 플러터 프로젝트도 터미널에서 Android Studio를 실행과 동시에 바로 열어보도록 하겠습니다. 터미널에서 Android Studio 실행하기 터미널에서 Android Studio를 바로 열기 위해서는 터미널에서 Android Studio 실행파일 경로를 오픈하는 명렁어를 입력해주면 됩니다. 다만 이렇게 하면 매번 실.. 2022. 10. 4.
Flutter 개발 환경 구축 2 - 터미널과 Android Studio에서 데모 앱 돌려보기 플러터 앱은 터미널과 Android Studio 각각에서 실행할 수 있습니다. 단, 앱을 설치할 Android Emulator와 iOS Simulator 각각이 먼저 실행되고 있어야 합니다. 터미널과 Android Studio에서 안드로이드 에뮬레이터와 iOS 시뮬레이터를 띄운 후 데모 앱을 실행시켜 보겠습니다. TL;DR 플러터 데모 앱을 실행시키기까지 전 과정은 다음 7가지 스텝으로 요약할 수 있습니다. 1. Android Studio 및 SDK 설치 2. Flutter SDK 설치 3. Android Studio SDK와 Flutter SDK 환경변수 설정 4. Flutter Doctor로 빠진 부분이 있는지 체크 5. 플러터 앱 프로젝트 생성 6. (Android와 iOS 가상 디바이스가 없다면 .. 2022. 10. 3.
Flutter 개발 환경 구축 1 - SDK 설치와 환경변수 설정 플러터로 개발을 시작할 때 가장 기본적인 단계 세 가지는 IDE로 Android Studio 설치, 플러터 언어를 쓰기 위한 Flutter SDK 설치, 환경변수 설정입니다. 최종적으로는 flutter doctor를 실행해 빠진 부분이 있는지 점검할 수도 있습니다. 차근차근 첫 단계부터 진행해보도록 합시다. Android Studio 설치 브라우저 상에서 https://developer.android.com/studio에 접속해 Download Android Studio 버튼을 클릭해 설치 파일을 다운로드하여 설치를 진행합니다. Android Studio 대안으로 VS Code도 있지만, 구글이 플러터를 지원하는 만큼, Android Studio를 사용하는 편이 개발 과정에서 사소하지만 생산성에 영향을 .. 2022. 10. 3.