'Flutter 앱/환경설정'에 해당되는 글 13건

Macbook에서 아이폰과 USB 케이블 연결하여 컴파일을 하면 앱 실행이 잘 되는데, 케이블을 제거하면 앱 실행이 안되는 현상을 겪었다.

아이폰과 안드로이드폰 2개 모두 USB 케이블로 연결하고 테스트했다.

해결방법 : flutter run --release

컴파일을 하다보니 에러가 발생하는 현상이 있어서 다른 것도 추가하여 기록한다.

네이버 지도를 아이폰에서 띄우는 걸 테스트 해보다가 완전 맨붕에 빠졌다.

Android 폰에서는 잘 동작하는데, iOS 환경에서 네이버 지도가 화면에 나오지 않고, 에러 메시지는 다음과 같이 나온다.

******** Authorize Error : 잘못된 클라이언트 ID를 지정. 콘솔에서 앱 Bundle Identifier를 잘못 등록함
[ERROR:flutter/shell/common/shell.cc(1015)] The 'flutter_naver_map_sdk' channel sent a message from native to Flutter on a non-platform thread. Platform channel messages must be sent on the platform thread. Failure to do so may result in data loss or crashes, and must be fixed in the plugin or application code creating that channel.
See https://docs.flutter.dev/platform-integration/platform-channels#channels-and-platform-threading for more information.
flutter: Auth failed: NAuthFailedException(code: 401, message: 잘못된 클라이언트 ID를 지정. 콘솔에서 앱 Bundle Identifier를 잘못 등록함)

문제가 된 사항부터 파악하기 위해 순차적으로 적어보자.

https://console.ncloud.com/   에 등록할 때부터 주의를 해야 한다는 걸 확인했다.

안드로이드에서는 com.link2me.flutter.nmap_test 로 등록하면 정상적으로 네이버 지도가 폰에 출력된다.

하지만, 아이폰에서는 네이버 지도가 화면에 출력되지 않으면서, 위와 같은 에러메시지가 나온다.

아예 언더바를 사용하지 않고 테스트를 해봤더니 정상적으로 네이버지도가 출력되는 걸 확인했다.

그래서 다시 com.link2me.flutter.nampTest 로 변경하여 등록했더니 네이버지도가 출력된다.

이것 때문에 몇시간을 삽질했는지 모르겠다. ㅠㅠㅠ

콘솔창에서 open ios/Runner.xcworkspace 를 하면 Xcode 가 실행된다.

여기서 보면 Bundle Identifier 가 자동으로 변경해준 것을 확인할 수 있다.

이 identifier 를 ncloud.com 에 등록해야 한다.

위 이미지에 보이는 Bundle Identifier 를 앱에서 찾는 방법

ios/Runner.xcodeproj/project.pbxproj 파일을 열어서 PRODUCT_BUNDLE_IDENTIFIER 를 검색한다.

그러면 PRODUCT_BUNDLE_IDENTIFIER = com.link2me.flutter.nmapTest; 와 같이 검색된 것을 확인할 수 있다.

아이폰 설정 사항

설정 앱 -> 개발자 -> 신뢰하는 컴퓨터 지우기

이 컴퓨터를 신뢰하겠습니까? 신뢰 선택 -> 설정한 폰 비밀번호 입력

관련이 있을지 없을지 여부는 모르겠는데 나중에 찾는데 도움될 거 같아서 적어둔다.

https://hsdev.tistory.com/entry/iOS-%EC%95%B1-%EB%B0%B0%ED%8F%AC-2-Identifiers-%EC%8B%9D%EB%B3%84%EC%9E%90-App-ID-%EB%93%B1%EB%A1%9D%ED%95%98%EA%B8%B0

flutter test
00:08 +0 -1: C:/Workspace/Flutter/note_app/test/data/data_source/note_db_helper_test.dart: db test [E]
  SqfliteFfiException(error, Invalid argument(s): Failed to load dynamic library 'sqlite3.dll': error code 126}) DatabaseException(Invalid argument(s): Failed to load dynamic library 'sqlite3.dll': error code 126)
  package:sqflite_common_ffi/src/method_call.dart 125:9  responseToResultOrThrow
  package:sqflite_common_ffi/src/isolate.dart 33:12      SqfliteIsolate.handle

윈도우 환경에서 테스트 하니까 위와 같은 메시지가 출력되었다.

프로젝트 root 폴더에 sqlite3.dll 파일을 복사하여 넣으면 해결된다.

Flutter 에서는 named parameter 기반 생성자를 사용한다.

Android Studio 가 기본으로 제공하는 것에서는 name parameter 기반으로 생성되지 않기 때문에 불편하다.

이를 해결할 방법이다.

Plugins 탭을 누르고 MarketPlace를 선택한 다음에 dart data class 를 입력하면 검색 결과가 나온다.

여기까지 하면 준비는 된 것이다.

실제 data class 를 생성하고 나서 시도해 보자.

필요로 하는 변수를 선언하고 나서

1. Windows/Linux: Alt + Enter
2. MacOS: ⌘ + Enter

단축키를 누른다.

OK버튼을 누르면 아래와 같이 코드가 자동으로 추가된다.

Copy는 Copywith를 자동으로 생성해주고,

toMap() and fromMap()은 자동 생성한 후에 toJson() 과 fromJson 으로 용어 변경을 해주고 세부적인 사항은 수정해주면 된다.

1. 터미널을 열고 다음 명령어를 실행하여 필요한 패키지들을 설치한다. dev_dependency 설치

    dart pub add -d freezed build_runner json_serializable

2. 터미널에서 다음 명령어를 실행한다. dependency 설치

    dart pub add freezed_annotation json_annotation

그러면 아래와 같이 pubspec.yaml 파일에 자동으로 추가될 것이다.

이제 LiveTemplete 를 설정해보자.

Android Studio 에서 아래와 같은 번호 순서대로 하면 된다.

5번 이름이 나타나도록 지정해준다.

8번에 붙여넣을 코드이다.

import 'package:json_annotation/json_annotation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part '$NAME$.freezed.dart';
part '$NAME$.g.dart';

@freezed
class $CAP_NAME$ with _$$$CAP_NAME$ {
  factory $CAP_NAME$({
    $END$
  }) = _$CAP_NAME$;
  
  factory $CAP_NAME$.fromJson(Map<String, dynamic> json) => _$$$CAP_NAME$FromJson(json); 
}

아래와 같이 Change 로 변경해줘야 한다.

여기까지 하면 자동완성하는 코드가 완성된 것이다.

실제 사용하는 예제를 유투브에서 가져왔다.

https://www.youtube.com/watch?v=i5p6wXLAX7I

https://github.com/PuzzleLeaf/flutter_mvvm_tutorial 에서 받은 소스코드가 null-safety 이전 버전이라서 제대로 동작되지 않아서 수정하는 과정을 적어둔 것이다.

Null Safety 를 이용하기 위해서는 pubspec.yaml 파일의 environment 의 버전을 2.12.0 버전 이상이어야 한다.

environment:
  sdk: ">=2.12.0 <3.0.0"

Null Safety 지원 확인 및 dependencies: 자동 업데이트
- Teminal 창에서 아래와 같이 입력한다.

Flutter Upgrade 방법

AndroidManifest.xml 파일 수정

빨간색 박스 부분을 아래와 같이 수정한다.

android:name="${applicationName}"

그리고 Android Compile 버전을 31로 할 경우에는 android:exported="true" 한줄을 추가해야 한다.

Setting 에서 Plugins 에 업데이트 할 사항이 있다면 Update 해준다.

Android app build.gradle 수정사항

android\gradle\wrapper\gradle-wrapper.properties to gradle-6.5-all.zip

최종적으로 아래와 같이 수정했다.

android gradle 수정

기능 동작 테스트를 거쳐서 최종적으로 아래와 같이 수정했다.

Null safety 적용 전 버전의 모든 변수는 Nullable 이였지만 Flutter 2.0 이상부터는 Nullable 변수를 만들려면 꼭 "?" 를 선언해야 된다.
"Class 내의 변수"는 반드시 선언과 동시에 초기화를 시켜야 한다.
변수 초기화를 위해서 생성자를 만들어주거나 아니면 late keyword를 붙여 줘야 한다. 

news_article.dart 파일 내용을 아래와 같이 수정했다.

전체 소스코드를 일일이 확인하면서 수정한 것이 아니라 에러가 발생하는 부분을 찾아서 수정하다보니 null 처리를 위해 ? 붙이는 것으로 대체했다.

IntelliJ IDEA Community 툴에서 Dart 언어를 설치하는 방법이다.

dart-sdk 경로를 찾아서 적어준다. flutter 설치한 서브폴더를 찾는다.

이제 사용할 준비가 된 것이다.

만약 Upgrade가 안되면 강제로 업그레이드하는 명령어를 사용하면 된다.

flutter upgrade --force

updated 2023.10.19

updated 2022.6.17

Flutter 업그레이드를 했더니 3.0.2 버전으로 업그레이된다.

- 하나의 코드로 안드로이드, IOS, 웹, 윈도우, 맥OS, 리눅스 총 6개의 플랫폼의 빌드 배포가 가능해졌다.

  Flutter 3.0.0 업그레이드를 통해 Linux 및 macOS 앱을 지원한다.

- Flutter 3.0 버전에서는 Material Design3 버전을 지원한다.

- 그동안 Firebase Console는 안드로이드, IOS, 웹, 유니티만을 지원 했으나 Flutter 도 공식적으로 지원하게 되었다.

- Dart 2.17 Update 지원 : Enum 클래스에 멤버 변수 및 함수를 추가하여 사용할 수 있게 되었다.

기본적으로 설치되는 앱은 코틀린 버전이 낮게 설정되어 있다.

버전을 올려서 컴파일을 해야 컴파일이 된다.

관리자 권한으로 신청해야만 설치가 되더라.

https://dart.dev/get-dart 를 참조해서 설치하면 된다.

기본 설치 폴더는 C:\tools\dart-sdk 에 설치된다.

https://rrtutors.com/tutorials/flutter-user-registration-and-login-with-php-mysql 에서 예제 샘플 파일을 받아서 실행했다.

실행했더니 에러가 발생하여

flutter channel stable
flutter upgrade

를 하고 나서 다시 실행했더니 정상적으로 컴파일이 된다.

화면까지는 정상적으로 잘 나오는데 실제 데이터통신 부분은 소스코드를 살펴보고 해결해야 한다.

구글에서 프로젝트 하나를 다운로드 받아서 실행하려고 시도했더니 이런 메시지가 나온다.

터미너를 열고 flutter pub get 를 해준다.

https://console.firebase.google.com/

사이트에서 Firebase 프로젝트를 등록하는 방법을 순서대로 적었다.

SHA-1 키를 알아내는 과정이다.

https://developers.google.com/android/guides/client-auth 에서 설명된 방법으로 하면 된다.

파일을 받아서 2번 다음에 나오는 사항을 따라서 적용한다.

Project build.gradle 수정사항

앱 build.gradle 수정사항

구글 인증 사용 방법

플러터를 처음 실행하는 과정을 적어둔다.

7번은 반드시 소문자로 적어야 한다.

앱의 이름은 대소문자를 구분하지 않으니 전부 소문자로 적어야 한다.

소문자 사이에 _를 넣는 스네이크 케이스를 추천한다.

test라는 건 인식을 못하더라. 그래서 myapp 으로 입력했다.

Android 폰을 연결하고 컴파일을 했더니 데모 앱이 화면에 나온다.

폴더 구조를 보면....

android 와 ios : 각 플랫폼 전용 폴더로 대개 손댈 필요가 없다.

lib : 플러터 소스코드(.dart 파일) 위치

test : 유닛 테스트가 있으면 여기에 넣는다.

pubspec.yaml :  프로젝트 파일로 프로젝트 이름, 설명, 의존성 등을 설정한다.

.metadata 와 .package : 중요한 설정파일로 개발자가 열어볼 필요는 없다.

앱을 웹 앱으로 실행하면 플러터는 브라우저를 기기로 간주한다.

앱을 에뮬레이터로 실행하는 경우이며, 기기를 종료하고자 하면 빨간색 메모 버튼을 누르면 된다.

코드를 추가하거나 수정하고 저장 버튼을 누르면 에뮬레이터(또는 폰)에서 즉시 변경되어 로드된다. 이 기능을 핫 리로드라고 한다.

플러터 세계에서는 컴포넌트를 위젯이라고 한다. 위젯을 합쳐서 커스텀 위젯을 만들고, 커스텀 위젯을 합쳐서 더 복잡한 커스텀 위젯을 만든다. 완전한 앱이 만들어질 때까지 이 과정을 계속해야 한다.

값 위젯(Text 위젯, Image 위젯), Layout 위젯, Navigation 위젯, 기타 위젯 등은 앱의 구성요소다.

모든 위젯은 속성과 메소드를 가질 수 있는 클래스이다.

모든 위젯은 생성자를 가지며, 생성자의 매개변수는 있을 수도 있고 없을 수도 있다.

모든 위젯은 BuildContext 를 인수로 받는 build 메소드가 있다는 점이 중요하다.

이것으로 Flutter 기본적인 시작 준비가 된 것 같다.

플러터 앱은 main()함수에서 시작한다.

main 함수는 runApp()이라는 함수를 호출한다. runApp()은 위젯 하나를 인수로 받는다. 이 위젯은 루트 위젯으로 어떤 이름을 붙여도 상관없지만 플러터의 StatelessWidget을 상속한 클래스여야 한다.

Widget build 부분을 변경해가면서 코딩 연습을 해본다.

화면 구성하는 것을 이해하기 위해 다시 수정해 본다.

https://flutter.dev/docs/get-started/install/windows 에서 파일을 받아서 압축을 푼다.

그런다음 C 드라이브로 옮겼다. (용량이 충분한 곳에 설치하면 된다) 

위 그림과 같이 환경변수에 Flutter 를 등록해준다.

CMD 창을 열고 flutter doctor 를 실행하니까 아래와 같이 나온다.

Flutter Project 를 생성할 수 있는 버튼이 생겼다. Open 버튼 우측을 눌러 SDK Manager 를 선택한다.

아래 그림과 같이 이슈가 없다면 Flutter 설치는 준비된 것이다.