나의 첫번째 macOS Desktop App 만들기 #2번 - Korea Generation

나의 첫번째 macOS Desktop App 만들기 #2번 

Flutter macOS Desktop App 만들기 2번째 과정입니다. 

[참고] 모든 자료  구글 디벨로퍼스 Code labs에 Flutter 첫 앱 만들기의 내용을 재 구성 및 정리하였습니다. 원문은 아래 링크 입니다. 

1. 목표 

Flutter macOS Desktop App 만들기 2번째 페이지 입니다. 구글 디벨로퍼스 Code labs에 Flutter 첫 앱 만들기 Add a button 단계 부터의 내용들을 실제 개발 및 적용해본 내용을 정리하였습니다. 

첫번째 개발 내용에 대한 블로그 글이 궁금하시다면 아래 링크를 클릭하세요. 

2. 앱 실행하기 

VS Code를 실행하고 해당 flutter 앱 프로젝트를 엽니다. 그리고 lib/main.dart를 오픈합니다. 그리고 배포할 타겟 디바이스가 선택되어 있는지 확인합니다. VS Code 화면에서 맨 밑 오른쪽 코너

에 현재 선택된 디바이스를 볼수 있습니다. 클릭하시고 디바이스를 사용하고자 하는걸로 변경하세요.  저는 보니 선택된 디바이스 자체가 없네요. 

해당 부분을 클릭 하니 아래와 같이 현재 편성 가능한 디바이스 목록과 추가 디바이스를 생성 하는 버튼 나옵니다. 

macOS platform이 없네요. macOS runtime simulator가 나와야 하는데 아무래도 macOS simulator에 문제가 있는거 같습니다. 이전 점검시에는 문제가 없었는데 이상하네요. 

$ Flutter doctor -v 

다시 점검 해본 결과 입니다.  점검 결과 simulator가 리스트에 없다고 나오네요. 이 문제를 해결 해야 할꺼 같습니다. 

stackoverflow에 저와 같은 문제를 격은 사람들이 꽤 있었습니다. 아래 방법으로 먼저 해보았습니다. 

Xcode -> Window -> Devices and Simulators -> Simulators -> + -> OS Version -> Download more simulator runtimes

There, first I deleted the existing iOS 17 files, and then downloaded them again.

기왕 하는 김에 애플 와치, 애플 Vision Pro, 애플 TV 시뮬레이터까지 몽땅 다운 설치 했습니다. 설치하고 보니 맥북을 가지고 이런 프로그램을 안짜고 난 뭐하고 있지 이런 생각이 드네요. 맥북이 있으니 프로그램 해보고 싶은게 점점 많아지네요. 욕심일뿐. 

모두 다운 받고 설치 완료 되었습니다. 

flutter doctor -v 로 다시 점검을 해본 결과 아래와 같이 이슈가 하나도 없이 다 해결 되었습니다.

아래와 같이 시뮬레이터 플랫폼이 추가됨을 맨 아래에 표시를 해줍니다. 선택을 하고 macOS 플랫폼을 추가를 승인합니다. 

이제 시뮬레이터에서 macOS Platform simulator를 선택 할수 있게 조치가 완료 되었습니다. 

main.dart 파일을 열고 거기서 우측 상단에 디버그 모드로 실행 화살표를 누릅니다. Explorer 화면 모드에서 Debug 실행 모드로 변경되면서 아래와 같이 실행 되는 로그들이 맨 아래 표기 됩니다. 

 

실행 결과로 아래와 같은 macOS Desktop Test APP이 실행된 결과입니다. 

기본적으로 macOS Desktop app을 만들기 위한 IDE, Flutter SDK 그리고 환경구성이 완료가 되었습니다. 

이번에는 버튼을 추가 하기 입니다.  

main.dart 파일 안에 아래 버튼 부를 추가합니다. 

    return Scaffold(

      body: Column(

        children: [

          Text('A random AWESOME idea:'),

          Text(appState.current.asLowerCase),

          // ↓ Add this.

          ElevatedButton(

            onPressed: () {

              print('button pressed!');

            },

            child: Text('Next'),

          ),

        ],

      ),

    );

소스 변경 반영 결과 

아래와 같이 중간에 next라는 버튼이 추가 되었네요.