Your first Flutter app  |  Google Codelabs

이 단계에서는 다음 버튼을 추가하여 새 단어 쌍을 생성합니다.

앱 실행

먼저 lib/main.dart를 열고 대상 디바이스가 선택되어 있는지 확인합니다. VS Code의 오른쪽 하단에 현재 대상 디바이스를 표시하는 버튼이 있습니다. 클릭하여 변경합니다.

6c4474b4b5e92ffb.gif

lib/main.dart가 열려 있는 동안 VS Code 창의 오른쪽 상단 모서리에서 '재생' 버튼을 찾아 클릭합니다.

9b7598a38a6412e6.gif

약 1분 후 앱이 디버그 모드로 실행됩니다. 아직은 별것 아닌 것 같습니다:

Untitled

<aside> 💡 참고: 개발 대상이 모바일 디바이스인 경우 텍스트가 노치 또는 상태 표시줄에 의해 부분적으로 가려질 수 있습니다. 이 문제를 해결하는 방법을 곧 알려드리겠습니다.

</aside>

첫 핫 리로드

lib/main.dart의 맨 아래에서 첫 번째 텍스트 개체의 문자열에 무언가를 추가하고 파일을 저장합니다(Ctrl+S 또는 Cmd+S 사용). 예를 들어

lib/main.dart

// ...

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),  // ← Example change.
          Text(appState.current.asLowerCase),
        ],
      ),
    );

// ...

앱은 즉시 변경되지만 임의의 단어는 그대로 유지되는 것을 확인할 수 있습니다. 이것이 바로 Flutter의 유명한 상태 저장 핫 리로드 기능입니다. 핫 리로드는 소스 파일에 변경 사항을 저장할 때 트리거됩니다.

1b05b00515b3ecec.gif