시운전

이 페이지는 템플릿을 활용하여 새로운 Flutter 앱을 만들고, 실행하고, 앱을 변경한 후 “hot reload”를 하는 방법을 설명합니다.

Flutter 앱을 작성 및 제작, 실행하기 위한 개발 도구를 선택하세요.

앱 생성

  1. IDE를 켜고 Start a new Flutter project를 선택하세요.
  2. 프로젝트 타입으로 Flutter Application을 선택하세요. Next을 누르세요.
  3. K의 위치에 맞게 경로가 설정되어 있는지 확인하세요. (텍스트 필드가 비어 있으면 Install SDK…를 선택하세요).
  4. 프로젝트 이름을 입력하세요 (예, myapp). 그런 다음 Next를 누르세요.
  5. Finish를 클릭하세요.
  6. Android 스튜디오가 SDK를 설치하고 프로젝트를 생성할 때까지 기다리세요.

위 명령은 머티리얼 컴포넌트를 사용한 간단한 예시 앱이 들어있는 Flutter 프로젝트 디렉토리 myapp을 생성합니다.

앱 실행

  1. Android 스튜디오 기본 툴바를 찾으세요:
    Main IntelliJ toolbar
  2. target selector에서, 앱을 실행할 Android 기기를 선택하세요. 리스트에 사용 가능한 기기가 없다면, Tools> Android > AVD Manager를 선택하고 새 기기를 생성하세요. 자세한 사항은, AVD 관리를 참조하세요.
  3. 툴바에서 실행 아이콘을 선택하세요, 또는 메뉴 항목에서 Run > Run를 실행하세요.

앱 빌드가 완료되면, 기기에서 초기 앱을 확인할 수 있습니다.

Starter app on iOS
Starter app

Hot reload

Flutter는 Stateful Hot Reload 를 통해 빠른 개발 사이클을 지원합니다. 재시작하거나 앱 상태 잃어버리지 않고 실행 중인 앱의 코드를 다시 로드합니다. 앱 소스를 변경하고, hot reload가 필요하다는 신호를 IDE나 커멘드라인 도구에 보낸 후, 시뮬레이터나 에뮬레이터 혹은 기기에서 변화를 확인하세요.

  1. lib/main.dart 여세요.
  2. 문자열을 변경하세요

    'You have pushed the button this many times'

    에서

    'You have clicked the button this many times'

  3. 변경 내용을 저장하세요. : invoke Save All, or click Hot Reload offline_bolt.

실행 중인 앱에 변경된 문자열이 거의 즉시 나타납니다.

Profile or release runs

So far you’ve been running your app in debug mode. Debug mode trades performance for useful developer features such as hot reload and step debugging. It’s not unexpected to see slow performance and janky animations in debug mode. Once you are ready to analyze performance or release your app, you’ll want to use Flutter’s “profile” or “release” build modes. For more details, see Flutter’s build modes.

앱 생성

  1. View > Command Palette를 호출하세요.
  2. “flutter”를 입력한 후, Flutter: New Project를 선택하세요.
  3. 프로젝트 이름을 입력하고 Enter를 누르세요. (예, myapp)
  4. 새 프로젝트를 위한 디렉토리를 생성하거나 선택하세요.
  5. 프로젝트가 생성되어 main.dart 파일이 나타날 때까지 기다리세요.

위 명령은 머티리얼 컴포넌트를 사용한 간단한 예시 앱이 들어있는 Flutter 프로젝트 디렉토리 myapp을 생성합니다.

앱 실행

  1. VS Code 상태 표시줄을 찾으세요 (창 하단 파란색 막대):
    status bar
  2. Device Selector 영역에서 기기를 선택하세요. 자세한 사항은, Flutter 기기간 빠른 전환를 참조하세요.
    • 사용가능한 기기가 없고 기기 시뮬레이터를 사용하고 싶다면, No Devices를 클릭하여 시뮬레이터를 실행하세요.
    • 실제 기기를 설정하기 위해, 설치 페이지에서 OS를 선택하고 해당 페이지의 기기별 지침을 따르세요.
  3. Press the Settings button - a cog icon gear on the top right (now marked with a red or orange indicator) next to the DEBUG text box that reads No Configuration. Select flutter. And choose the debug configuration: To create your emulator if it is closed or to run the emulator or device that is now connected.
  4. Debug > Start Debugging을 호출하거나 F5를 누르세요.
  5. 앱이 실행될 때까지 기다리세요 - Debug Console에 진행 상태가 표시됩니다.

앱 빌드가 완료되면, 기기에서 초기 앱을 확인할 수 있습니다.

Starter app on iOS
Starter app

Hot reload

Flutter는 Stateful Hot Reload 를 통해 빠른 개발 사이클을 지원합니다. 재시작하거나 앱 상태 잃어버리지 않고 실행 중인 앱의 코드를 다시 로드합니다. 앱 소스를 변경하고, hot reload가 필요하다는 신호를 IDE나 커멘드라인 도구에 보낸 후, 시뮬레이터나 에뮬레이터 혹은 기기에서 변화를 확인하세요.

  1. lib/main.dart 여세요.
  2. 문자열을 변경하세요

    'You have pushed the button this many times'

    에서

    'You have clicked the button this many times'

  3. 변경 내용을 저장하세요. : invoke Save All, or click Hot Reload offline_bolt.

실행 중인 앱에 변경된 문자열이 거의 즉시 나타납니다.

Profile or release runs

So far you’ve been running your app in debug mode. Debug mode trades performance for useful developer features such as hot reload and step debugging. It’s not unexpected to see slow performance and janky animations in debug mode. Once you are ready to analyze performance or release your app, you’ll want to use Flutter’s “profile” or “release” build modes. For more details, see Flutter’s build modes.

앱 생성

새로운 프로젝트를 생성하기 위해 flutter create 명령을 실행하세요:

$ flutter create myapp
$ cd myapp

위 명령은 머티리얼 컴포넌트를 사용한 간단한 예시 앱이 들어있는 Flutter 프로젝트 디렉토리 myapp을 생성합니다.

앱 실행

  1. Android 기기가 실행중인지 확인하세요. 아무것도 나타나지 않는다면, 설치 페이지에서 OS를 선택하고 해당 페이지의 기기별 지침을 따르세요.

    $ flutter devices
    
  2. 아래 명령으로 앱을 실행하세요:

    $ flutter run
    

앱 빌드가 완료되면, 기기에서 초기 앱을 확인할 수 있습니다.

Starter app on iOS
Starter app

Hot reload

Flutter는 Stateful Hot Reload 를 통해 빠른 개발 사이클을 지원합니다. 재시작하거나 앱 상태 잃어버리지 않고 실행 중인 앱의 코드를 다시 로드합니다. 앱 소스를 변경하고, hot reload가 필요하다는 신호를 IDE나 커멘드라인 도구에 보낸 후, 시뮬레이터나 에뮬레이터 혹은 기기에서 변화를 확인하세요.

  1. lib/main.dart 여세요.
  2. 문자열을 변경하세요

    'You have pushed the button this many times'

    에서

    'You have clicked the button this many times'

  3. 변경 내용을 저장하세요. .
  4. 터미널 창에 r을 입력하세요.

실행 중인 앱에 변경된 문자열이 거의 즉시 나타납니다.

Profile or release runs

So far you’ve been running your app in debug mode. Debug mode trades performance for useful developer features such as hot reload and step debugging. It’s not unexpected to see slow performance and janky animations in debug mode. Once you are ready to analyze performance or release your app, you’ll want to use Flutter’s “profile” or “release” build modes. For more details, see Flutter’s build modes.

다음 단계

작은 앱을 만들면서 Flutter의 핵심 개념을 배워봅시다.