Things take time

[Flutter] 화면을 회전하되, 기존 회전값 유지하고 싶을때

겸손할 겸 — Wed, 3 Aug 2022 10:59:35 +0900

[회전]

SystemChrome.setPreferredOrientations(
  [DeviceOrientation.landscapeRight]
);

Flutter에서 회전을 수행하는 함수다. 해당 함수 호출시, 사용자의 디바이스를 가로로 회전하게 된다. Right이므로 화면 위쪽이 오른쪽으로

[추가]

위의 함수를 사용하면, 가로로 회전을 강제로 시키기 때문에 사용자가 다시 디바이스를 세로로 회전할 경우, 세로로 돌아가지 않는다. 그러므로 사용자는 다시 버튼을 클릭해서 현재 회전상태에 따라 반대로 회전하는 형태를 취해야 한다. 그래서 저 함수는 보통 앱이 시작되거나, 특정 라우트가 회전 상태를 유지하고싶을 때 사용하는데 나의 경우에는 세로인 경우, 가로로 회전 시키되 사용자가 다시 세로로 기기를 돌리면 자동 회전 되길 원한다.

1. 디바이스가 세로인 상태 -> 버튼 클릭 시 가로로 강제 회전, 가로로 돌렸다가 세로로 디바이스를 회전했을 때 세로도 자동 회전되길 원함

2. 디바이스가 가로인 상태 -> 버튼 클릭 시 세로로 강제 회전, 세로로 돌렸다가 가로로 디바이스를 회전했을 때 가로도 자동 회전되길 원함

  SystemChrome.setPreferredOrientations(
    isPortrait
        ? [
            DeviceOrientation.landscapeRight,
          ]
        : [
            DeviceOrientation.portraitUp,
          ],
  ).then((value) {
    SystemChrome.setPreferredOrientations(
      isPortrait
          ? [
              DeviceOrientation.landscapeRight,
              DeviceOrientation.portraitUp,
            ]
          : [
              DeviceOrientation.portraitUp,
              DeviceOrientation.landscapeRight,
            ],
    );
  });

코드는 간단하다. 현재 회전 상태에따라 회전을 바대로 시키고, 해당 함수는 Future함수이므로, 이후에 현재 회전상태에 따라 원상복귀시킨다. 단! 주의해야할 점은, then 이후에 설정되는 회전값의 순서가 중요하다. isPortrait일 경우 landscapeRight를 설정했고, 회전이 수행된 뒤에 다시 landscapeRight, portraitUp을 설정해줘야 회전된 뒤의 회전값이 다시 변하지 않는다.

[SWIFT] (이것저것) viewDidLoad는 메모리에 할당될 때 호출된다.

겸손할 겸 — Tue, 28 Jun 2022 14:15:32 +0900

실제 화면을 addChild로 넣기도 전에 ViewDidLoad가 호출될 때가 있는데, 이는 해당 뷰 컨트롤러 객체를 생성하고, 그에 추가적으로 작업을 수행할 때 호출된다.

let mainViewController = (storyboard.instantiateViewController(withIdentifier: "AAMainViewController") as! AAMainViewController)

이 작업은 단순 인스턴스를 선언한 것에 불과하고

mainViewController.abc()

이처럼 해당 인스턴에 접근해서 동작을 호출한다면, 그 때 메모리에 올라가므로 viewDidLoad가 호출된다.

self.view.addChild(mainViewController)

위와 같이 일반적인 방법으로 child로 넣을땐 당연히 viewDidLoad가 호출되지만, 화면에 보이지 않더라도 해당 인스턴스에 접근하여 동작을 수행하면 viewDidLoad가 호출된다.

[Flutter] Flutter와 Native(iOS)간의 통신 방법 - dynamic code

겸손할 겸 — Wed, 22 Jun 2022 10:11:13 +0900

기존 글

https://g-y-e-o-m.tistory.com/184

[Flutter] Flutter안에 Native(iOS)의 UIView 넣는 방법

[개요] 플러터의 장점은 각 OS별로 짜야하는 UI나 기능 작업들을 하나의 코드인 다트로 작성할 수 있다는 점이다. 다만, 특정한 기능 등은 각 네이티브에서 수행해야할 때가 있다. 마치 하이브리

g-y-e-o-m.tistory.com

이 글의 경우엔, AppDelegate에서의 역할이 컸다.

각각의 플러터 플랫폼 뷰를 상속받는 클래스를 연결하고, 메서드 채널을 연결하는 방식의 기초 방법이었는데 이 방법을 적용하니 문제가 발생되었다. 내 경우엔 플러터에서 네이티브 뷰를 UIKitView로 불러와 사용하지만, 다른 플러터 화면에서도 똑같은 뷰를 재사용해야 했다. 다만 전달하는 파라미터만 달라질 뿐이었기 때문에 생각해볼 건 두 가지였다.

1. 사용하는 만큼의 NativeView를 생성한다.

위의 기존 글을 바탕으로 설명한다. GyeomFactory라는 Class를 다른이름으로 생성하는 방법이다. 이런 경우에는 필요한 만큼의 플러터플랫폼 뷰 팩토리를 상속받는 클래스를 계속 생성해야한다.

-> 즉, 똑같은 뷰를 재사용해야하는데 그만큼을 생성한다는 것 자체가 비효율적이다. 물론 구현은 된다.

2. 기존의 GyeomFactory를 재사용한다.

글에서 적은 내용처럼 가장 알맞다. 다만, 이 경우에는 플러터에서 뷰가 스택으로 쌓일 경우 문제가 발생할 수 있다.

예를 들어, A라는 라우트(페이지)에서 B라우트를 띄웠을 때(A를 remove하지 않고) A->B라는 라우트가 쌓여있을 것이다. 근데 A에서도 UIKitView를, B에서도 UIKitView를 공통적으로 사용한다고 가정하자. 그리고 각 UIKitView와 플러터 간의 통신을 위해 메서드 채널도 사용해야한다.

기본 메서드 채널에 대해 알아보려면, 메서드 채널 튜토리얼을 보면 이해가 될 것이다.

https://flutter-ko.dev/docs/development/platform-integration/platform-channels

플랫폼 별 코드 작성

앱에서 커스텀하게 플랫폼 별 코드를 작성하는 방법을 배워보세요.

flutter-ko.dev

튜토리얼에서는 AppDelegate에서 메서드 채널을 생성하여 사용하고 있다.

이 튜토리얼과 내가 올린 글을 접합하게 되면, GyeomFactory라는 클래스를 연결하는 작업과(1), 메서드 채널을 생성하는 작업(2)가 각각 하나씩 있는데, 뷰를 재사용하는 입장에서 메서드 채널을 호출 할 경우 AppDelegate에서는 현재 열린게 B인지, A인지는 모른 상태로 함수를 호출한다. 이런 경우, A/B가 갖고 있는 UIKitView 두개가 이벤트를 호출받아 그에 대한 작업을 수행하는 일이 발생해버린다.

튜토리얼은 튜토리얼인 만큼 그대로 사용하면 이런 일이 발생한다.

원하는 결과는 다음과 같다.

공통적으로 사용하는 네이티브 뷰(GyeomFactory)가 있고, 각 화면에서 파라미터만 다르게 전달할 것이다. 그리고 메서드 채널을 통해 호출할 때는 그 네이티브 뷰는 공통적으로 호출받지 않고 따로 받고싶다.

AppDelegate

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
      GeneratedPluginRegistrant.register(with: self)
      
      // Setting CustomUIView
      weak var pluginRegister = self.registrar(forPlugin: "testPlugin")
      let factory = GyeomFactory(messenger: pluginRegister!.messenger())
      // testPlugin 이름으로 등록된 단일 플러그인 Context에 factory와 view-type이란 with-id를 등록
      pluginRegister?.register(factory, withId: "view-type")
      
      return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

위의 공식 튜토리얼에서 사용한 메서드 채널을 AppDelegate에서 사용하지 않는 것이 중요하다.

GyeomFactory

/**
 FlutterPlatformView를 상속받는 클래스: 실제 플러터 내에 포함될 UIView를 리턴하는 클래스(func view() -> UIView {}가 프로토콜내 필수 구현함수로 구현되어 있다)
 FlutterPlatformViewFactory를 상속받는 클래스 : FlutterPlatformView를 상속받아 UIView를 리턴하는 그 클래스를 연결하는 클래스(create()가 프로토콜내 필수 구현함수로 등록되어 있다, createArgsCodec()는 optional)
 */
class GyeomFactory: NSObject, FlutterPlatformViewFactory {
    private var messenger: FlutterBinaryMessenger?
    private var gyeomView: GyeomView?
    
    override init() {
        super.init()
    }
    
    init(messenger: FlutterBinaryMessenger) {
        super.init()
        self.messenger = messenger
    }
    
    /**
     Only needs to be implemented if `createWithFrame` needs an arguments parameter.
     Dart에서 파라미터 전달시 필요
     */
    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
        return FlutterStandardMessageCodec.sharedInstance()
    }

    
    func create(
        withFrame frame: CGRect,
        viewIdentifier viewId: Int64,
        arguments args: Any?
    ) -> FlutterPlatformView {
        let methodChannel = FlutterMethodChannel(name: "method-channel-" + "\(viewId)", binaryMessenger: messenger!)
        gyeomView = GyeomView(
            frame: frame,
            viewIdentifier: viewId,
            arguments: args,
            binaryMessenger: messenger,
            methodChannel: methodChannel)
        return gyeomView ?? GyeomView(
            frame: frame,
            viewIdentifier: viewId,
            arguments: args,
            binaryMessenger: messenger,
            methodChannel: methodChannel)
    }
}

class GyeomView: NSObject, FlutterPlatformView{
    private var containerView: UIView
    
    init(
        frame: CGRect,
        viewIdentifier viewId: Int64,
        arguments args: Any?,
        binaryMessenger messenger: FlutterBinaryMessenger?,
        methodChannel: FlutterMethodChannel
    ) {
        containerView = UIView()
        super.init()
        
        methodChannel.setMethodCallHandler({
            [weak self]
            (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
            guard let self = self else { return }
            switch call.method{
            case "mute":
                result(nil)
                break
            case "start":
                result(nil)
                break
            case "stop":
                result(nil)
                break
            default:
                result(FlutterMethodNotImplemented)
                break
            }
        })
    }
    
    func view() -> UIView {
        return containerView
    }
}

"view-type"이란 값으로 UIKitView를 처음 만들 때 호출되는 함수인 create에서 viewId는 고유 값으로 등록된다. 그러므로 이 값을 통해 MethodChannel을 등록, 실제 그려지는 뷰인 GyeomView에 넘겨서 setMethodCallHandler를 통해 등록하면 되는 것이다.

Flutter

UiKitView(
      viewType: 'view-type',
      layoutDirection: TextDirection.ltr,
      creationParams: creationParams,
      creationParamsCodec: const StandardMessageCodec(),
      onPlatformViewCreated: (int id) {
        print('[Gyeom] onPlatformViewCreated call :: id: $id');
        _methodChannel = MethodChannel('method-channel-$id');
      },
),

그리고 onPlatfomViewCreated에서 넘겨받는 result의 id가 viewId이므로, 여기서 플러터단의 메서드 채널을 등록하면 이제 플러터와 네이티브 뷰의 연결이 이루어지게 되며, 이 네이티브뷰를 재사용하더라도 처음 UIKitView를 호출하는 시점에 새로운 viewId가 생성되므로 한번의 호출로 여러개의 네이티브 뷰가 호출받게 되는 불상사는 없을 것이다.

[SWIFT] NotificationService Extension사용하기, Remote Notification(Silent Push)대신 사용하기, 백그라운드 푸시, 푸시 데이터 저장하기

겸손할 겸 — Wed, 8 Jun 2022 13:24:38 +0900

[개요]

기본적으로 사용자가 푸시를 받았을 때, 포어그라운드 상태라면 AppDelegate내 함수에서 처리할 수 있다.

만약 서버쪽에서 사용자에게 푸시를 보냈을때, 특정 값을 저장 했다가 앱이 실행될 때 해당 값을 검사하여 원하는 작업을 수행하길 원한다고 하자. 포어그라운드 상태라면 위의 didReceive함수(ios 10미만의 경우, application의 didReceiveRemoteNotification일 것이고 이상인 경우 userNotification의 willPresent, didReceive)에 UserDefaults등을 활용하여 MainViewController나 특정 뷰에서 처리하면 된다.

그렇다면, 사용자가 앱을 끈 상태(inactive)거나 백그라운드(background)상태일 때는 어떻게 할 것인가?

기본적으로 iOS는 백그라운드 작업을 지원하지않는다.

다만, 여기에 추가적으로 애플이 허용한 앱 혹은 설정에 따라 백그라운드 오디오, fetch, remote notification 등을 지원하는데 여기서 고려해볼 만한 것은 Silent Push, 무음 푸시라하여 Background Mode 내 Remote Notification기능을 활성화하는 것이다.

[사일런트 푸시]

이 기능의 경우, 사용자는 푸시를 볼 수 없다. 그러므로 사용자 입장에서는 푸시에 대해 신경 쓸 필요가 없이 특정한 기능을 사용할 수 있다.

그러나 이 기능의 경우 단점이 많은데, 대표적인 예가 푸시발송을 100% 보장하지 않으며, 잦은 푸시를 사용할 경우도 권장하지 않는 등의 단점이 있다.

https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/pushing_background_updates_to_your_app

Apple Developer Documentation

developer.apple.com

사용자는 서버가 푸시를 발송했을 때 알지 못한다. 그러나 앱은 알 수 있다.

AppDelegate내 함수 중 applicatiom(didReceiveRemoteNotification)함수에서 알 수 있는데, 이 함수는 iOS10 미만의 푸시 접수 함수이기도 하지만, 사일런트 푸시 수신시에도 호출된다.

사일런트 푸시의 경우, 아래의 조건과 서버 측의 apns payload 양식이다.

Xcode 내 설정

{
    "aps" : {
        "content-available" : 1
    },
    "acme1" : "bar",
    "acme2" : 42
}

출력(applicatiom(didReceiveRemoteNotification))

didReceiveRemoteNotification userInfo: [AnyHashable("acme2"): 42, AnyHashable("acme1"): bar, AnyHashable("aps"): {
    "content-available" = 1;
}]

** 참고 : 알림 전송 시 payload 양식(payload guide)

https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/CreatingtheNotificationPayload.html

Local and Remote Notification Programming Guide: Creating the Remote Notification Payload

Local and Remote Notification Programming Guide

developer.apple.com

사일런트 푸시가 안좋은것은 아니다. 용도에 맞춰서 써야하는게 가장 기본이므로, 시간당 몇 개를 못보낸 다는 이유로 나는 사일런트 푸시 대신 다른 방법을 택했다.

[NotificationService Extension]

이제 새로운 타겟인 익스텐션을 추가해야한다. iOS에서는 다양한 익스텐션이 존재하는데, 예를 들어 설명하자면 웹페이지에서 공유하기를 클릭 했을 때, 카카오톡을 선택하면 카카오톡이 열리면서 친구목록/대화목록 화면이 나오는 것을 알 수 있다. 근데 이 화면은 일반적으로 카카오톡을 켰을때 나오는 화면이랑 다른 화면이다. 즉, 공유하기를 통해 왔을 때 사용자에게 새로운 화면을 중간에 넣어서, 그 화면내에서 독립적인 처리를하는 것인데, 이는 Share Extension이라하며 익스텐션 중 한 종류다.

NotificationService Extension이란 기본적으로 사용자에게 푸시 노티를 띄우기 전에 껴드는 것이다. Share의 경우에도 중간에 껴드는 것처럼 같은 맥락으로 이해하면 된다. 푸시를 이쁘게(?) 보내는 앱들을 보면, 노티 안에 그림도 들어가고 클릭 했을 때 이벤트도 있고 하는 경우가 이 익스텐션을 사용한 경우인데, 나의 경우에는 노티를 꾸미기 위해 사용하는 것이 아니라, inactive/background 상태일 때 푸시를 받고, 그 때 푸시 데이터를 저장하여 AppDelegate에서 뷰로 전달하기 위해 사용하는 용도이므로, UI에 대한 설명은 생략한다.

위의 절차를 통해 생성했을 경우, 아래처럼 새로운 디렉토리와 Target도 추가된다.

NotificationService.swift라는 파일이 생성이 되는데, 이 안에는 didReceive함수와 serviceExtensionTimeWillFire함수가 있다.

didReceive의 경우가 실제 원하는 기능을 구현할때 사용한다. 후자의 경우, 익스텐션이 시스템에의해 사라질때 호출된다는데, 딱히 검증하지 않았다. AppGroupsName은 개발사이트 내 AppGroups에서 생성한 이름이다. 모르겠으면 아래 참고.

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        if let bestAttemptContent = bestAttemptContent {
            // Modify the notification content here...
            bestAttemptContent.title = "G-Y-E-O-M"
            bestAttemptContent.body = "B-O-D-Y"
            
            
            if let userDefault = UserDefaults(suiteName: "AppGroupsName"){
                let randomNum = Int.random(in: 0...100)
                userDefault.set(randomNum, forKey: "test")
                userDefault.synchronize()
            }
            contentHandler(bestAttemptContent)
        }
    }

함수 부분을 보자, UNMutableNotificationContent 타입의 변수인 bestAttemptContent의 title, body 속성을 변경하면 푸시 노티를 아래와 같이 변경할 수 있다. 이미지 관련 부분도 속성 중 하나일 것이다.

어쨌든, 중요한 것은 그쪽이 아니고 아래의 userDefault이다. 즉, appGroups로 지정한 UserDefaults의 경우, 실제 저장 장소가 다른 본 앱과 익스텐션 사이의 데이터를 공유할 수 있다. 여기에서 푸시를 받았을 때 노티를 띄우기 전 저장을하고, 본앱의 AppDelegate + ViewControllers에서 가져다 쓰면 된다.

위의 사일런트 푸시의 경우 "content-available" : 1가 들어갔다면, 노티피케이션서비스 익스텐션의 경우 "mutable-content": 1 가 들어가야한다. 예시로 보낸 페이로드의 경우 다음과 같다.

{  
   "aps":{  
      "sound":"default",
      "mutable-content": 1,
      "alert":{  
         "body":"body message"
      }
   }
}

** AppGroups 등록 방법

AppGroups의 경우 Xcode내에서도 다음과 같이 각각의 Target에서 AppGroups를 +Capability를 눌러서 세팅해야한다.

그런데 AppGroups가 보이지 않는다면

1. https://developer.apple.com

Apple Developer

There’s never been a better time to develop for Apple platforms.

developer.apple.com

2. account

3. 로그인

4. Identifiers

5. + 버튼

생성 후 Xcode에서 AppGroups reload하면 끝이다.

어쨌든, 익스텐션의 didReceive에서 저장이 되었다면 아래와 같이 appDelegate에서 확인할 수 있다.(예)

    func applicationDidBecomeActive(_ application: UIApplication) {
        print("applicationDidBecomeActive")
        if let groupUserDefaults = UserDefaults(suiteName: "AppGroupsName"){
            print("applicationDidBecomeActive : => \(groupUserDefaults.value(forKey: "test"))")
        }
    }

이렇게 하면 아래와 같이 출력되는 걸 확인할 수 있다.

applicationDidBecomeActive : => Optional(90)

** didReceive에서 print출력 방법

일단, 익스텐션의 경우 자체 print로 넣는다고 출력되지 않는다. 현재 실행한 타겟은 본앱이기 때문인데, 나는 검수를 꼭 해보고 싶다면 아래와 같이 한다. (NotificationExtension이 본앱, NotificationService가 익스텐션(옆에 E버튼))

디버그 실행을 익스텐션인 NotificationService로 시작하고 앱을 선택하는 것에서는 NotificationExtension로 한다. 그리고 d푸시를 발송하고, didReceive에 print문이 정상 출력되는지 확인한다.

[Flutter] iOS 프로젝트에 여러 개의 FlutterViewController 넣기 및 MethodChannel 구성하기(Swift)

겸손할 겸 — Wed, 25 May 2022 13:14:13 +0900

[개요]

이전 글에서 iOS 프로젝트에 플러터 모듈을 import하고 플러터의 뷰 하나를 넣는 테스트를 했다.

https://g-y-e-o-m.tistory.com/186

[Flutter] iOS 프로젝트에 FlutterViewController넣기(import Flutter Module to Swift)

[개요] 처음부터 플러터 프로젝트로 만들어서 각각의 네이티브 플랫폼 코드를 사용한다면 플랫폼 채널을 통해 각각의 함수를 호출할 수 있고, FlutterPlatformView를 상속받는 뷰를 넣을수도 있다. 그

g-y-e-o-m.tistory.com

그 글에서도 밝혔지만, 해당 예제는 러프한 소스여서 이 것을 이해한 것을 바탕으로 코드를 작성하려한다.

만들고자 하는 목표는

1. 플러터의 뷰 컨트롤러는 하나 이상을 사용할 것이다.

2. 플러터 엔진은 무조건 예열하는 방식으로 사용하며, 직접 선언/호출하는 방법은 지양한다.

3. 플러터 뷰 컨트롤러를 넣는 시점에 method channel도 같이 생성하여, Flutter Module <-> Swift간 통신을 설정해 줄 것이다.

이전 글의 소스를 참고/비교해서 보도록하자.

class AppDelegate: FlutterAppDelegate {
    let engines = FlutterEngineGroup(name: "multiple-flutters", project: nil)
    
    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        return true
    }
}

import UIKit
import Flutter
import FlutterPluginRegistrant

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let button = UIButton(type:UIButton.ButtonType.custom)
        button.addTarget(self, action: #selector(showFlutterRoute), for: .touchUpInside)
        button.setTitle("Show Flutter!", for: UIControl.State.normal)
        button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)
        button.tag = 1
        button.backgroundColor = UIColor.blue
        self.view.addSubview(button)
        
        
        let button2 = UIButton(type:UIButton.ButtonType.custom)
        button2.addTarget(self, action: #selector(showFlutterEntry), for: .touchUpInside)
        button2.tag = 2
        button2.setTitle("Show Flutter!", for: UIControl.State.normal)
        button2.frame = CGRect(x: 80.0, y: 260.0, width: 160.0, height: 40.0)
        button2.backgroundColor = UIColor.red
        self.view.addSubview(button2)
    }
    @objc func showFlutterRoute() {
        let flutterVC = GyeomFlutterViewController(withEntrypoint: nil, route: "/gyeom")
        // let flutterVC = GyeomFlutterViewController(withEntrypoint: "gyeomPage", route: nil)
        self.present(flutterVC, animated: true, completion: nil)
        
        // Storyboard에서 NavigationController import
        // self.navigationController?.pushViewController(flutterVC, animated: false)
    }
    
    @objc func showFlutterEntry() {
        let flutterVC = GyeomFlutterViewController(withEntrypoint: "gyeomEntry", route: nil)
        self.present(flutterVC, animated: true, completion: nil)
        
        // Storyboard에서 NavigationController import
        // self.navigationController?.pushViewController(flutterVC, animated: true)
    }
}

달라진 점

1. firstEngine, secondEngine이 사라짐 => 사실 필요한 플러터의 뷰 개수만큼 생성하면 되겠지만, 비효율적이므로 사용하지 않는다.

2. GeneratedPluginRegistrant.register(with: firstEngine!)을 바로 사용하지 않음 => AppDelegate에서 미리 등록이 아닌 동적 등록을 위함이다.

소스를 보면 버튼을 클릭했을 때, GyeomFlutterViewController라는 클래스 객체를 생성하고 해당 객체는 withEntryPoint, route의 옵셔널 파라미터를 받는다.

플러터의 뷰를 가져와 넣을때, route를 사용하는 방법을 이전글에서 설명했다. 그때 설명하지 못했던 방법은 Entry값을 통해 플러터 뷰를 매핑하는 방법인데, 이 후 다트 소스를 참고하면 될것이다.

import Flutter
import FlutterPluginRegistrant
import Foundation

/**
 @interface FlutterViewController
     : UIViewController <FlutterTextureRegistry, FlutterPluginRegistry, UIGestureRecognizerDelegate>
 #else
 @interface FlutterViewController : UIViewController <FlutterTextureRegistry, FlutterPluginRegistry>
 #endif
 */
class GyeomFlutterViewController: FlutterViewController{
    private var flutterEngine: FlutterEngine?
    private var methodChnnel: FlutterMethodChannel?
    
    init(withEntrypoint entryPoint: String?, route: String?) {
        let appDelegate: AppDelegate = UIApplication.shared.delegate as! AppDelegate
        flutterEngine = appDelegate.engines.makeEngine(withEntrypoint: entryPoint, libraryURI: nil, initialRoute: route)
        GeneratedPluginRegistrant.register(with: flutterEngine!)
        super.init(engine: flutterEngine!, nibName: nil, bundle: nil)
    }
    
    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.methodChnnel = FlutterMethodChannel(name: "gyeom-channel", binaryMessenger: self.binaryMessenger)
        // Flutter -> Native Call
        self.methodChnnel?.setMethodCallHandler({
            [weak self]
            (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
            guard let self = self else { return }
            print("GyeomFlutterViewController methodChnnel: \(call.method)")
        })
        // Native -> Flutter Call
        self.methodChnnel?.invokeMethod("swift-to-flutter", arguments: "hello", result: {
            (result) -> Void in
            print("swift-to-flutter result: \(result)")
        })
    }
}

플러터 뷰 컨트롤러를 상속받는 클래스다. 참고로 플러터 뷰 컨트롤러는 UIViewController의 속성을 그대로 가져오면서, 플러터에 대한 추가 프로토콜을 가진다.

생성자로 가져온 파라미터를 바탕으로, AppDelegate에 선언한 engines를 가져와 makeEngine을 통해 호출과 동시에 생성, 등록되도록한다. 그리고 뷰가 보여지는 시점에서는 MethodChannel을 등록한다.

이렇게 함으로써, 플러터의 뷰컨트롤러를 생성/등록하고 보여질때 메소드 채널까지 등록되도록하는 것이다.

그럼 ViewController내 버튼을 클릭했을 때, 해당 FlutterViewController객체를 생성하고 present(혹은 push)하여 보여줌과 동시에 메소드채널까지 등록되는 것이다.

이제 Flutter의 dart소스를 보면 아래와 같다.

void main() => runApp(const MyApp());

@pragma('vm:entry-point')
void gyeomEntry() => runApp(const GyeomEntryPage());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in a Flutter IDE). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/gyeom': (context) {
          return const GyeomPage();
        },
      },
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

1. @pragma('vm:entry-point'): 네이티브코드를 사용할 것이라고 컴파일에게 알리는 문법의 구문이다.

gyeomEntry()라는 문법이 iOS의 showFlutterEntry()함수내에 있는 withEntryPoint에 들어가는 파라미터와 일치한다는 것을 알 수 있다.

https://github.com/dart-lang/sdk/blob/master/runtime/docs/compiler/aot/entry_point_pragma.md

GitHub - dart-lang/sdk: The Dart SDK, including the VM, dart2js, core libraries, and more.

The Dart SDK, including the VM, dart2js, core libraries, and more. - GitHub - dart-lang/sdk: The Dart SDK, including the VM, dart2js, core libraries, and more.

github.com

2. routes: {'/gyeom': ... } : 이전 글에서 설명한 라우팅 방법이다.

즉, 플러터 뷰를 띄울 수 있는 2가지의 방법을 모두 소개했고 각각의 GyeomEntryPage()나 GyeomPage()를 구현하면 된다. 단, MethodChannel Name을 맞춰야하는 것을 잊지말자. GyeomPage()의 경우 다음과 같다.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/services.dart';

class GyeomPage extends StatefulWidget {
  const GyeomPage({Key? key}) : super(key: key);

  @override
  _GyeomPageState createState() => _GyeomPageState();
}

class _GyeomPageState extends State<GyeomPage> {
  static const platform = MethodChannel('gyeom-channel');

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getBatteryLevel();

    platform.setMethodCallHandler(methodHandelr);
  }

  /**
   * Native -> Flutter
   */
  Future<dynamic> methodHandelr(MethodCall methodCall) async {
    print('methodHandelr: ${methodCall.method}');
    if (methodCall.method == "swift-to-flutter"){
      print('methodHandelr: ${methodCall.arguments}');
      return "received flutter";
    }
  }

  /**
   * Flutter -> Native: 도큐먼트 기본 예제
   */
  Future<void> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = 'Battery level at $result % .';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text('플러터로 만든 페이지.'),
          ),
        ),
      ),
    );
  }
}

_getBatteryLevel의 경우 MethodChannel 예제로, 공식 도큐먼트에서 사용하는 함수 그대로이고, methodHandler의 경우 Swift -> Flutter로 함수를 호출할 때 사용하기 위해 사용한다.

간단히 메소드 채널이름을 분석하면 setMethodHandler를 쓰는 쪽은 메소드를 받기 위해(리턴은 옵셔널)하는것이고 반대로 메소드를 호출하려면 invokeMethod를 사용한다.

[Flutter] iOS 프로젝트에 Flutter 모듈 import 및 FlutterViewController 넣기(import Flutter Module to Swift/add FlutterView)

겸손할 겸 — Tue, 24 May 2022 14:12:47 +0900

[개요]

처음부터 플러터 프로젝트로 만들어서 각각의 네이티브 플랫폼 코드를 사용한다면 플랫폼 채널을 통해 각각의 함수를 호출할 수 있고, FlutterPlatformView를 상속받는 뷰를 넣을수도 있다.

그런데 만약 기존에 iOS/Android로 개발되어 있는 앱에, 플러터로 된 뷰를 넣고 싶다면? 그 플러터로 된 모듈을 공통으로 작업해서 배포하며 사용하도록하고, 이외에는 각 OS별로 개발하고싶다면 이 글을 참고하도록하자.

[참고]

https://docs.flutter.dev/development/add-to-app/ios/project-setup

Integrate a Flutter module into your iOS project

Learn how to integrate a Flutter module into your existing iOS project.

docs.flutter.dev

https://docs.flutter.dev/development/add-to-app/ios/add-flutter-screen?tab=initial-route-swift-tab

Adding a Flutter screen to an iOS app

Learn how to add a single Flutter screen to your existing iOS app.

docs.flutter.dev

그냥 공홈대로 보면서 하면 되긴하는데, 참고용으로 작성하는 포스팅!

사실 중간 내용들이 이해가 안되서 삽질하며 정리한다.

[Create Flutter Module And Add Modult to iOS Project]

먼저 아래의 명령어를 통해 플러터 모듈 템플릿을 만든다.

cd some/path/
flutter create --template module my_flutter

some/path/는 개인적으로 지정하면되나, 나같은 경우에는 이미 iOS프로젝트가 있다 가정했으므로, iOS프로젝트와 같은 경로로 두었다.

MyApp은 iOS프로젝트, my_flutter는 플러터 모듈이다. module이란 공통 디렉토리에 두 개의 프로젝트가 있는 셈.

실제 my_flutter디렉토리 내 히든 폴더들을 살펴보면 .ios폴더가 보인다. 원래 플러터 프로젝트를 생성하면 android/ios와 같은 폴더들이 자동적으로 생성되는데, 모듈로 생성했기 때문에 이처럼 보인다. Podfile에서 보겠지만, 실제 iOS는 다른 프로젝트에 있기때문에 이 지점과 실제 프로젝트간 연결을 하게 될 것이다.

다음은 실제 iOS프로젝트와 플러터 모듈간의 연결을 위해 다음과 같은 Podfile을 수정한다. 참고로 Podfile이 없는 기본프로젝트(워크스페이스 파일이 없는 경우)이라면 다음과 같이 Podfile을 생성해야한다.

cd some/path/
touch Podfile
open -e Podfile

https://guides.cocoapods.org/using/using-cocoapods.html

CocoaPods Guides

CocoaPods is fully open-sourced, so it depends on community contributions to get better. If you're looking to start working on CocoaPods, this is the place to start.

guides.cocoapods.org

그리고 Podfile을 다음과 같이 작성한다.(platform과 target은 알맞게)

platform :ios, '9.0'

flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

platform 버전은 개발할 프로젝트 deployment target과 맞추고, target도 프로젝트명으로 맞추면 된다. 위의 Podfile은 아무런것도 넣지 않은 기본 Podfile 템플릿이다. 그리고 아래의 명령어를 호출하면 기본 설정은 끝이다.

pod install

Podfile을 살펴보면, my_flutter라는 path에서 Flutter/podhelper.rb라는 파일과 join한다.

그리고 flutter_pods를 설치하는 것으로 보이는데 위에서 말한 히든파일을 열어보면 아래와 같다.

즉, 저 Flutter/podhelper.rb파일이 보이는데 이 파일이 실제 iOS프로젝트와 연결하는 것으로 보인다. 여기까지가 플러터 모듈을, 껍데기를 씌워주는 기본 작업은 완료다.

[Add Flutter View]

이제 플러터의 뷰를 iOS프로젝트에 넣어보자.

1. FlutterEngine 예열하기

플러터엔진이란 객체를 미리 예열하라는 식으로 적혀있는데, Flutter UI를 표시할때는 적지않은 대기 시간비용이 있다고 한다. 그래서 플러터 엔진을 미리 시작하면 이 비용을 절약할수 있다고 한다.

AppDelegate의 didFinishLaunchingWithOptions에서 작성한다.

import UIKit
import Flutter
// Used to connect plugins (only if you have plugins with iOS platform code).
import FlutterPluginRegistrant

@UIApplicationMain
class AppDelegate: FlutterAppDelegate { // More on the FlutterAppDelegate.
  lazy var flutterEngine = FlutterEngine(name: "my flutter engine")

  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Runs the default Dart entrypoint with a default Flutter route.
    flutterEngine.run();
    // Used to connect plugins (only if you have plugins with iOS platform code).
    GeneratedPluginRegistrant.register(with: self.flutterEngine);
    return super.application(application, didFinishLaunchingWithOptions: launchOptions);
  }
}

플러터 모듈이 정상적으로 Pod에 들어왔다면, import가 가능해지고 코드를 보면 기본 iOS AppDelegate의 상속 부분이 달라지는데, FlutterAppDelegate를 들어가서 보면

@interface FlutterAppDelegate
    : UIResponder <UIApplicationDelegate, FlutterPluginRegistry, FlutterAppLifeCycleProvider>

기존에 있던UIResponder, UIApplicationDelegate에 FltuterAppLifeCycleProvider가 추가적으로 있는 것으로 알 수 있다. Swift는 다중상속을 지원하지않는다.

즉, UIApplicationDelegate/FltuterAppLifeCycleProvider는 클래스가 아닌 프로토콜이기 때문에 다중상속처럼 보이는 것이지만, 어쨌든 기존 상속부분을 FlutterAppDelegate로 통째로 교체하거나, 아니면 기존 상속에 FltuterAppLifeCycleProvider 프로토콜을 추가적으로 상속받아 추가적으로 함수를 오버라이드하여 적용할 수 있다.(위 가이드 링크 참고)

어쨌든, 예열이란 작업은 FlutterEngine의 instance를 먼저 선언하고, 사용하란 의미와 같다. 사용방법은 아래와 같다.

import UIKit
import Flutter

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    // Make a button to call the showFlutter function when pressed.
    let button = UIButton(type:UIButton.ButtonType.custom)
    button.addTarget(self, action: #selector(showFlutter), for: .touchUpInside)
    button.setTitle("Show Flutter!", for: UIControl.State.normal)
    button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)
    button.backgroundColor = UIColor.blue
    self.view.addSubview(button)
  }

  @objc func showFlutter() {
    let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
    let flutterViewController =
        FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
    present(flutterViewController, animated: true, completion: nil)
  }
}

소스를 보면, iOS프로젝트 내 뷰 컨트롤러에 버튼이 있고 버튼 클릭이벤트인 showFlutter만 보면 된다.

AppDelegate에 선언된 flutterEngine이란 변수를 가져와, 해당 엔진을 바탕으로 생성된 FlutterViewController 객체인 flutterViewController를 present로 띄우는 간단한 소스다. 이 작업을 수행하면, my_flutter의 main()함수에 있는 run()에 있는 해당 화면을 띄운다.

물론 위의 showFlutter대신 아래와 같은 직접 호출로도 할 수 있다.

// Existing code omitted.
func showFlutter() {
  let flutterViewController = FlutterViewController(project: nil, nibName: nil, bundle: nil)
  present(flutterViewController, animated: true, completion: nil)
}

단, 이처럼 사용할 경우는 AppDelegate에 선언된 FlutterEngine객체를 사용하지않고 직접 사용하기 때문에, 권장하진 않는다. flutter화면이 사용되는 경우가 정말 적은 경우나, 뷰 컨트롤러와 플러터 뷰컨트롤러간의 상태를 유지할 필요가 없을 경우 등에 사용한다고 한다.

[Custom]

사실 위의 코드까지는 기본예제와 다름없다. 순서를 정리해보자면, AppDelegate에서 FlutterEngine 인스턴스를 선언해주고, 가져다 쓸 곳에서 해당 엔진을 바탕으로 FlutterViewController객체를 생성해주고, 해당 화면을 present하여 새창으로 띄운다.

여기서 생각해 볼것이 있다.

1. FlutterEngine객체는 AppDelegate에서만 사용가능한 것인가 -> X

실제 ViewController에서 FlutterViewController를 생성하기 전에 바로 선언하여 사용해도 된다. 실제 도큐먼트에서도 AppDelegate에서 선언하는 것도 한 가지 방법이라 설명하고 있다.

2. 위의 예제는 main()에 있는 기본 뷰를 띄워주는데, 만약 Flutter에서 만든 다른 화면이 있고 다른 화면을 띄울수 있는가 -> O

flutterEngine객체의 run부분을 다음과 같이 사용하면 된다.

        flutterEngine.run(withEntrypoint: nil, initialRoute: "/gyeom")

여기서 /gyeom으로 라우팅된 위치로 엔진이 실행된다. 당연하겠지만, 이는 플러터에서도 코드 작업을 해야한다.

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in a Flutter IDE). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/gyeom': (context) {
          return const GyeomPage();
        }
      },
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

위 처럼, /gyeom이란 라우팅 주소로 넘어오면 GyeomPage()를 호출하고 있다. MyHomePage()가 아님을 유의하자.

3. 만약, 여러개의 플러터 화면을 띄우고 싶다면 FlutterEngine객체의 run부분을 재정의하여 initialRoute부분을 바꾸면 되는가? -> X

만약 버튼이 여러 개이고, 각각의 버튼에서는 플러터에서 만든 화면중 하나 하나에 매핑을 하고싶다면, 아래와 같이 사용을 생각해 볼 수 있다.~~(삽질)~~

        flutterEngine.run(withEntrypoint: nil, initialRoute: "/gyeom")
        
        ..
        
       
        flutterEngine.run(withEntrypoint: nil, initialRoute: "/")

이런식으로, 사용하는 위치에 하나의 flutterEngine을 불러와 재정의하며 라우팅할 수 있을 거라 생각했으나 불가하다. 내가 이해한 바로는 각 플러터 엔진에는 하나의 라우팅만 허용되므로 아래와 같이 사용한다.

class AppDelegate: FlutterAppDelegate {
    let engineGroup = FlutterEngineGroup(name: "my flutter engine group", project: nil)
    var firstEngine: FlutterEngine?
    var secondEngine: FlutterEngine?
    
    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        firstEngine = engineGroup.makeEngine(withEntrypoint: nil, libraryURI: nil, initialRoute: "/gyeom")
        secondEngine = engineGroup.makeEngine(withEntrypoint: nil, libraryURI: nil, initialRoute: "/")
        
        GeneratedPluginRegistrant.register(with: firstEngine!)
        GeneratedPluginRegistrant.register(with: secondEngine!)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

FlutterEngineGroup이란 것을 만들고, 해당 인스턴스에서 makeEngine을 호출하여 각각의 엔진을 생성, GeneratedPluginRegistrant으로 등록한다. 저 makeEngine이란 함수에 들어가보면 Creates a running `FlutterEngine` that shares components with this group. 으로 이 그룹으로 묶인 것들은 컴포넌트를 공유하며 running중인 FlutterEngine을 생성한다 되어있다. 그래서 그런지 이전에 했던 코드처럼 flutterEngine.run(with..) 함수를 호출하지 않고 makeEngine으로도 되었다.

위의 코드는 러프하게 되어있으므로, 엔진 개수나 등록같은 경우엔 클래스내 생성자를 통해 동적으로 만들어 지게 놓는 것이 가장 좋다. 단순히 보기 좋게 AppDelegate내 하드코드로 작성되었음을 참고하자.

그리고 ViewController에서는 아래와 같이 사용할 수 있다.

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Make a button to call the showFlutter function when pressed.
        let button = UIButton(type:UIButton.ButtonType.custom)
        button.addTarget(self, action: #selector(showFlutter), for: .touchUpInside)
        button.setTitle("Show Flutter!", for: UIControl.State.normal)
        button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)
        button.tag = 1
        button.backgroundColor = UIColor.blue
        self.view.addSubview(button)
        
        
        let button2 = UIButton(type:UIButton.ButtonType.custom)
        button2.addTarget(self, action: #selector(showFlutter), for: .touchUpInside)
        button2.tag = 2
        button2.setTitle("Show Flutter!", for: UIControl.State.normal)
        button2.frame = CGRect(x: 80.0, y: 260.0, width: 160.0, height: 40.0)
        button2.backgroundColor = UIColor.red
        self.view.addSubview(button2)
    }

    @objc func showFlutter(sender: UIButton) {
        if sender.tag == 1{
          if let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).firstEngine{
                let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
                present(flutterViewController, animated: true, completion: nil)
            }
        }else{
            if let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).secondEngine{
                let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
                present(flutterViewController, animated: true, completion: nil)
            }
        }
    }

이런식으로 하면, 각 버튼을 누를때 마다 플러터로 만든 각기 다른 화면이 노출될 것이다.

앱 실행했을 때의 ViewController내 두개의 버튼

첫 번째 버튼 클릭시, AppDelegate내 firstEngine("/gyeom")으로 호출이므로, GyeomPage()라는 위젯이 나온다.

두 번째 버튼 클릭시, AppDelegate내 secondEngine("/")으로 호출이므로, 기본 템플릿 화면이 나온다.

[Flutter] 잡다한 플러터 이것저것(계속 수정/추가)

겸손할 겸 — Tue, 17 May 2022 10:01:53 +0900

컨테이너 안에 있는 위젯들을 고려한, 현재 컨테이너 너비 구하기코드는 다음과 같다.

  Size _getSize(GlobalKey key) {
    if (key.currentContext != null) {
      final RenderBox renderBox =
          key.currentContext!.findRenderObject() as RenderBox;
      return renderBox.size;
    }
    return Size(0, 0);
  }

Stack의 사이즈는 Children중 가장 큰 위젯의 사이즈로 정해진다, 다만 Positioned처럼 지정되지 않은 Container가 있을 경우, 해당 컨테이너가 다른 위젯들 무시하고 해당 컨테이너가 모든것을 차지한다.
앱을 처음 키자마자 회전을 원할 때는 다음과 같이 사용한다. ensureInitialized는 시스템에게 이후에 비동기작업이 있을 것임을 알리는 것이고, main()에서 사용할때만 사용하면 된다.

  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.landscapeLeft])
      .then((_) {
    runApp(const MyApp());
  });

FlutterAppDelegate는 기존 AppDelegate +FlutterAppLifeCycleProvider의 추가 버전이다.
FlutterEngine은 플러터 화면을 네이티브에 띄울 때 사용되는 개념이다.
Command PhaseScriptExecution failed with a nonzero exit code. 오류: 문법오류, 플러터 쪽에서 살펴보거나 엑스코드에서 보여주는것 확인할 것

Failed to register observatory port with mDNS with error -65555. : info plist 추가

<key>NSBonjourServices</key>
<array>
    <string>_dartobservatory._tcp</string>
</array>

Widget 내에서 if문/for문을 사용해야할 경우 다음과 같이 사용할 수 있다. 2가지 방법(...[] / 혹은 []{}없이 사용)

            if (contentPanelList.length > 1) ...[
              for (ContentPanel contentPanel in contentPanelList) ...[
                Visibility(
                  visible: _isPortrait,
                  child: _setDataListView(),
                ),
              ]
            ],
            if (contentPanelList.length > 1)
              for (ContentPanel contentPanel in contentPanelList)
                Visibility(
                  visible: _isPortrait,
                  child: _setDataListView(),
                ),

Flutter에서 String -> DateFormat 은 다음과 과정을 거치는데, intl라이브러리를 사용한다. 또한, 라이브러리가 기본적으로 지원하는 Date형식이 있어서 아래에 해당되지 않는String값이라면 String의 값을 바꿔서, 해당 함수에서 이해할수 있게 해줘야한다.(?)

"2012-02-27 13:27:00"
"2012-02-27 13:27:00.123456789z"
"2012-02-27 13:27:00,123456789z"
"20120227 13:27:00"
"20120227T132700"
"20120227"
"+20120227"
"2012-02-27T14Z"
"2012-02-27T14+00:00"
"-123450101 00:00:00 Z": -12345년.
"2002-02-27T14:00:00-0500": 와 같음"2002-02-27T19:00:00Z"

만약 서버에서 20120227132700, 흔히 yyyyMMddhhmmss의 방식으로 내려줬다고 하자. 위의 Format중일치하는 것이 없으므로, 여기서 DateFormat('').parse(String)사용시 불가하다. 그러므로 가장 비슷한 20120227T132700 저 방식처럼 중간에 T라는 문자열을 넣어서 변환해줘야 정상적으로 작동한다.

import 'package:intl/intl.dart' as intl;
...


String onairDate = '202205261549';
String formattedString = onairDate.substring(0, 8) + 'T' + onairDate.substring(8, onairDate.length);
var formattedOnairDate = intl.DateFormat('yyyy.MM.dd HH:mm').format(DateTime.parse(formattedString)).toString();

이 얼마나 거지같은지, 좀 더 간단한건 없으려나.. 서버에서 자리수에 대해 확실히 내려준다면 난 그냥 문자열을 편집해서 사용한다.

iOS 기기로 플러터를 디버그하면, 디버그 껐을 때 단독으로 쓸 수 없으므로 flutter run --release를 통해 상용 방식으로 디버그하여 확인한다.
ListView를 통해 위젯을 만들었을 때, 굉장히 버벅이는 것이 느껴질 땐 위 방법처럼 release를 통해 상용 방식으로 디버그하면 빨라진다. 디버깅이 느리다고 한다.

https://stackoverflow.com/questions/46761036/why-my-flutter-apps-listview-scroll-not-as-smooth-as-the-flutter-gallery-app

Why my flutter app's listview scroll not as smooth as the flutter gallery app?

I created a release build of my scroll demo app using Flutter. I wonder why the listview scrolling of my app is NOT as smooth as the flutter gallery app. I used LG G5 for this test. Here's a link...

stackoverflow.com

Flutter에서 안드로이드 match_parent, wrap_content의 대응 되는 개념은 각각, Container기준 사이즈를 max로 지정(double.infinite)하느냐 지정하지 않느냐이다. 따로 값을 지정하지 않으면, 안에 들어있는 위젯의 크기에 따라 각각 늘어난다.
Column, Row에서는 안에 들어오는 children들의 크기에 맞춰 자동적으로 늘어나거나 줄어들지만 리스트뷰와 같은 위젯(스크롤)이 들어올땐 지정해야한다. 예를 들어, Column에서 Text부분과 ListView가 들어올 경우, 두 위젯 모두 height가 지정되어 있지 않다면 에러가 발생한다. ListView를 부모의 나머지를 갖도록 Expand로 감싸고, 부모의 Height를 지정해야한다. 혹은 ListView를 SizeBox로 감싼 뒤, 리스트뷰의 크기를 지정한다.
리스트 뷰를 쓸 때는 Height가 필요하다. 그러므로 Column, Row에서는 위의 방법을, 단독 사용시엔 height를 지정하자.
빈 위젯, Empty widget을 리턴하고 싶을 땐 다음과 같이 사용한다.

SizedBox.shrink();

ShrinkWrap속성은 ScrollDirection의 속성을 가진 위젯(ListView, GridView, CustomScrillView)이 자신이 스크롤할 수 있는 범위를, Child인 위젯의 내용에 따라 결정되어야하는지에 대한 여부이다. default false의 경우엔 스크롤 방향 기준, 허용된 최대 사이즈를 가진다(부모 위젯의 사이즈 만큼). 만약 ScrollDirection의 속성을 가진 위젯이 제한되지 않은 제약조건(Expand..)을 가지고 있다면 true를 사용해야 unbounded height runtime exception이 나지않는다.
Column Children에서 height를 가진 위젯과 Expanded인 위젯이 있고, 그 Expanded 위젯 안에서 Column이 또 있고, 같은 방식으로 height를 가진위젯과 Expanded를 가진 위젯이 있을 때, Expanded위젯에 ListView가 있다면 문제가 되지 않는다. 그런데 위의 경우에서 ListView와 같은 Depth에 있는 height를 가진 위젯을 하나의 묶음으로 봐서 Column자체를 Scroll하고 싶다면 다음과 같이 해야한다.
1. ListView의 shrinkWrap속성을 true로 변경한다. -> 즉, 자신의 부모위젯 사이즈 만큼을 가지는 것이 아니라 ListView안에 return되는 Widget의 사이즈만큼을 가지겠다고 변경한다.
2. ListView의 physics를 NeverScrollableScrollphysics()로 변경한다. -> 리스트뷰 스크롤이 아니라 Column자체에서 스크롤을 해야하므로, 리스트 뷰 자체의 스크롤을 사용하지 않는다.
3. ListView를 감싸고 있는 Expanded대신 Flexible로 변경한다. Expanded는 Flexible위젯에서 tight한 위젯이다. default인 loose로 변경함으로써 남아 있는 빈 공간을 하위 위젯인 리스트뷰의 크기만큼을 사용하겠다고 하는 것이다. 이때, 리스트뷰의 크기가 남은 빈 공간보다 크더라도 에러가 발생하지 않으며, 남아있는 부분 중 리스트뷰가 가질 수 있는 것만큼을 가진다. tight는 하위 위젯의 크기와 관련없이 남은 공간 자체를 가져가겠다는 의미이다.
4. Column을 SingleChildScrollView로 감싸고, mainAxisSize를 min으로 한다.
5. 참고: flexible은 shrinkWrap의 true, mainAxisSize.min과 쌍으로 맞고, expanded는 false와 맞다. (의미 다시 한 번 생각)
initState, didChangeDependencies 모두 처음 생성될 때 한 번 호출되지만, didChangeDependencies는 context에 접근할 수 있는 차이가 있다.
setState(){}를 호출할 때는 mounted를 체크하는 것이 좋다. setState(){}에만 쓰는 것은 번거로우므로 setState()를 override하여 if(mounted){ super.setState() } 를 사용하도록 하자.
플러터에서 기본적으로 사용중인 위젯트리가 변경되지 않는다면 setState()를 해도 겉모양만 변할 뿐 내용은 변하지 않는다, 그런데 안의 child가 추가되거나 트리상 위치가 바뀌면, 다시 그리게 되는데 이를 방지하려면 재생성안되게 할 위젯에 key를 선언한다.(Unique Key사용 금지, setState할 때마다 키가 유니크하게 다시 생성되므로) 이렇게 되면, 해당 key값을 검사하여 같은 key를 가진 위젯이라면 다시 그리지 않고 재사용하게 된다.
TextButton의 패딩을 제거하기위해선 다음과 같이 사용한다.

            TextButton(
              style: TextButton.styleFrom(
                primary: Colors.white,
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                padding: EdgeInsets.zero,
              ),
              onPressed: () {
              },
              child: Icon(Icons.clear),
            ),

Key는 stateless, stateful 위젯 모두에서 사용할 수 있으며 위젯의 설정 값중 하나이다. 동일한 key값을 가진 위젯을 재배치할 경우, 해당 위젯은 재사용된다.
Stateless에서 동일한 위젯의 하위트리를 가진 상태에서 build가 다시 실행된다면, 해당 위젯들은 재사용 된다.(build는 호출되지만, 안의 내용들은 바뀌지 않음)
Stateless에서 위젯 앞에 const를 붙일 경우, 불필요한 build가 되지 않는다.
Stack에서 위치가 바뀌는 위젯의 경우(Depth가 동일하나 배치가 바뀌는 경우) Key를 사용해야 재사용되면서 rebuild되지 않는다. => key의 위치는 재사용 되는 위젯 자체
Stack이 아닌 Depth자체가 바뀌는 위젯의 경우 Key를 사용해도 적용되지 않는다. Depth는 동일하되, 위젯의 배치가 바뀌는 경우엔 Key를 사용하고 Depth가 바뀌는 위젯의 경우에는 Key를 사용해도 재사용되지 않는다. 해당 Depth에 동일하게 위젯이 배치되어야한다. const사용은 sense.
Provider의 경우 상위에서 선언한(Consumer or ChangeNotifier)프로바이더의 생성자는 한 번 호출되나 build에서 해당 프로바이더에 다시 접근하는 인스턴스를 아래처럼 선언하는 경우, 생성자는 다시 호출되지 않으나 그 안에 사용되는 변수들은 다 초기화된다. 이유는 생성자는 상위 위젯에서 한번 선언하므로 한번만 호출되는 것이고, 이후 build에서 해당 인스턴스를 접근하게 되면 생성자에서 초기화 되지 않은 애들은 처음 선언된 그 변수로 초기화된다.

build(BuildContext context){
...

_providerChattingSendbird =
    Provider.of<ProviderChattingSendbird>(context, listen: true);
_providerDetailCommon =
    Provider.of<ProviderDetailCommon>(context, listen: true);

sizedbox vs container: 둘다 width, height, child를 가질 수 있지만, sizedbox는 const로 인식한다. 이 뜻은 화면을 다시 build하는 과정에서 const는 바뀌지 않으므로 sizedbox밑에 있는 위젯은 다시 그리지 않는다. 예를 들어, 채팅방을 만들었을 때 화면을 회전했고 그에 따라 rebuild하는 과정에서 채팅 뷰를 sizedbox 하위로 만들었으면 채팅이 유지되는 것으로 보일것이고 container의 경우 다시 그리기 때문에 채팅방 load부터 다시 수행한다. 그러므로 sizedbox의 사용을 자주하자.

[Flutter] Flutter안에 Native(iOS)의 UIView 넣는 방법

겸손할 겸 — Tue, 17 May 2022 09:12:13 +0900

[개요]

플러터의 장점은 각 OS별로 짜야하는 UI나 기능 작업들을 하나의 코드인 다트로 작성할 수 있다는 점이다. 다만, 특정한 기능 등은 각 네이티브에서 수행해야할 때가 있다.

마치 하이브리드 앱처럼 웹뷰와 네이티브 사이간 interface를 구성하여 작성하는 것처럼, Flutter와 네이티브간에도 이런 방법이 가능하다. 대표적인게 MethodChannel을 이용한 전달이다. 이 방법은 비동기를 통한 콜백처리 까지 가능한데, 이 글에서는 MethodChannel이 아니라 뷰 객체(UIView)를 Flutter안에 넣고 싶을 때다.

공식 도큐먼트에서는 구글맵과 같은 뷰를 각 OS별로 API연동 및 작성하고, 각각의 뷰를 플러터안에 넣는 방법으로 소개되어있는데, 한글 문서로 된 것은 많이 없어서 내가 정리하려한다. 그리고 공식 문서에서 말하는 공식 단어 등은 솔직히 이해가 그리 잘 되지 않는 편이라서..

https://docs.flutter.dev/development/platform-integration/platform-views

Hosting native Android and iOS views in your Flutter app with Platform Views

Learn how to host native Android and iOS views in your Flutter app with Platform Views.

docs.flutter.dev

일단 공식문서 위치는 링크로 두었다.

추후에 MethodChannel이란 글을 쓰겠지만, 나중에 하고보면 둘의 사용 코드만 다를 뿐 비슷하단 느낌을 받았다.

[사용 방법]

In Flutter

아래의 패키지를 import한다.

import 'package:flutter/widgets.dart';
import 'package:flutter/services.dart';;
import 'package:flutter/foundation.dart';

그리고 해당 UIView가 들어갈 위젯쪽에 아래의 코드를 참고한다.

class _PracticeMainState extends State<PracticeMain> {
  static const String VIEW_TYPE = 'gyeom-type';

  // Pass parameters to the platform side.
  static const Map<String, dynamic> creationParams = <String, dynamic>{
    "param": "겸식이"
  };

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(0),
          child: AppBar(),
        ),
        body: SafeArea(
          child: _setPlatformView(),
        ),
      ),
    );
  }

  Widget _setPlatformView() {
    switch (defaultTargetPlatform) {
      case TargetPlatform.iOS:
        return Container(
          width: double.maxFinite,
          height: 300,
          child: UiKitView(
            viewType: VIEW_TYPE,
            layoutDirection: TextDirection.ltr,
            creationParams: creationParams,
            creationParamsCodec: const StandardMessageCodec(),
          ),
        );
      case TargetPlatform.android:
        return Container(
          child: Center(
            child: Text('Android'),
          ),
        );
      default:
        return Container();
    }
  }
}

코드를 간단히 설명하자면, 컬럼 방식으로 된 위젯이 있으며 이 위젯은 _getPlayerController라는 함수에서 리턴받은 위젯 하나를 가진 컬럼위젯이다. _getPlayerController에서는 UIKitView라는 위젯을 Child로 가진 컨테이너 위젯을 리턴한다.

VIEW_TYPE이란 변수안에 들어가는 값과, Map형(Swift의 Dictionary에 대응)에 대응하는 파라미터를 UIKitView라는 위젯의 생성자로 넣어주면 되는 것이다. 그래서 플러터에서 할 일은, Swift에서 맞춰줄 키 값과 파라미터들을 세팅해주는 것이다. 그리고 그걸 매치되는 Swift쪽에서 해당 값을 바탕으로 세팅하면 된다.

In iOS(AppDelegate)

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
      
      let factory = GyeomFactory()
      self.registrar(forPlugin: "GyeomPlugin")?.register(factory, withId: "gyeom-type")
      
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Flutter로 앱을 만들면 기본으로 생성되는 AppDelegate내 소스다. FlutterAppDelegate를 상속받아 사용하는데, 여기서 눈여겨 볼 것은 GyeomFactory라는 클래스명과, widId 파라미터에 들어가는 저 값을 주목하자.

self.registrar라는 함수는 FlutterAppDelegate내 FlutterPlguinRegistry라는 프로토콜 내에 갖고 있는 함수인데, 해석 그대로 등록해주는 사람(registrar)에게 withId란 키 값을 가진 팩토리를 -> GyeomPlugin라는 이름으로 가진 플러그인 내에 넣고, 이 플러그인을 등록해 달라. 이런 의미로 해석할 수 있다.

여기서 플러그인이라는 것은 다트 기준 패키지의 한 종류이다. 여기서 다트로만 패키지를 만들었느냐, 위처럼 스위프트나 코틀린처럼 다양한 언어로 작성됐느냐에 따라 플러그인의 기준으로 나눈다고 한다. 현재 이 프로젝트를 패키지로 만든다거나 연동, 작성하지 않기 때문에 저 플러그인 값은 현재 예제에서는 아무런 값이 들어가도 상관없다. 이후 다트 패키지를 만들때 사용할것 같은데 지금 예제에서는 아무런 값을 입력하자.

In iOS(FLNativeViewFactory)

import Foundation
import Flutter


/**
 FlutterPlatformViewFactory를 상속받는 클래스 : FlutterPlatformView를 상속받아 UIView를 리턴하는 그 클래스를 연결하는 클래스(create()가 프로토콜내 필수 구현함수로 등록되어 있다, createArgsCodec()는 optional)
 */
class GyeomFactory: NSObject, FlutterPlatformViewFactory{
    private var gyeomView: GyeomView?
    private var messenger: FlutterBinaryMessenger?

    /**
     Only needs to be implemented if `createWithFrame` needs an arguments parameter.
     Dart에서 파라미터 전달시 필요
     */
    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
        return FlutterStandardMessageCodec.sharedInstance()
    }
    
    override init(){
        super.init()
    }
    
    init(messenger: FlutterBinaryMessenger) {
        self.messenger = messenger
        super.init()
    }
    
    func callGyeomViewMethod(){
        if let gyeomView = gyeomView {
            gyeomView.receiveGyeomViewMethod()
        }
    }

    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
        
        self.gyeomView = GyeomView(
            frame: frame,
            viewIdentifier: viewId,
            arguments: args,
            binaryMessenger: messenger)
        return gyeomView ?? GyeomView(
            frame: frame,
            viewIdentifier: viewId,
            arguments: args,
            binaryMessenger: messenger)
    }
    
    
    
}

/**
FlutterPlatformView를 상속받는 클래스: 실제 플러터 내에 포함될 UIView를 리턴하는 클래스(func view() -> UIView {}가 프로토콜내 필수
 구현함수로 구현되어 있다)
 */
class GyeomView: NSObject, FlutterPlatformView{
    private var returnView: UIView?
    var nativeLabel = UILabel()
    
    
    override init() {
        returnView = UIView()
        super.init()
    }
    
    
    init(
        frame: CGRect,
        viewIdentifier viewId: Int64,
        arguments args: Any?,
        binaryMessenger messenger: FlutterBinaryMessenger?
    ) {
        returnView = UIView()
        super.init()
        // iOS views can be created here
        createNativeView(view: returnView!, args: args)
    }
    
    func view() -> UIView {
        return returnView!
    }
    
    func receiveGyeomViewMethod(){
        print("receiveGyeomViewMethod")
    }
    
    func createNativeView(view _view: UIView, args: Any?){
        print("createNativeView args: \(args)")
        _view.backgroundColor = UIColor.blue
        nativeLabel.text = "이것은 GyeomView"
        nativeLabel.textColor = UIColor.white
        nativeLabel.textAlignment = .center
        nativeLabel.frame = CGRect(x: 0, y: 0, width: 180, height: 48.0)
        nativeLabel.translatesAutoresizingMaskIntoConstraints = false
        _view.addSubview(nativeLabel)
        nativeLabel.centerXAnchor.constraint(equalTo: _view.centerXAnchor).isActive = true
        nativeLabel.centerYAnchor.constraint(equalTo: _view.centerYAnchor).isActive = true
        
        
        if let args = args {
            if let param = args as? [String:Any]{
                print("param: \(param["param"] ?? "파라미터 없음")")
            }
        }
    }
}

소스 해석은 저 위에 주석부분을 보면 된다. 이런 함수들을 구현할땐 상속받는 클래스, 프로토콜을 꼭 들어가서 보자. 보면, 왜 func view()라는 함수가 덩그러니 있는지, create(...)는 무슨 함수인지인지에 대해 알 수 있다.

여튼 여기서 볼 것은, returnView라는 객체가 플러터의 UIKitView라는 위젯에 들어가 사용자에게 보여지는 것으로 이해하면 된다.

print문을 보면 아래와 같다.

createNativeView args: Optional({
    param = "\Uacb8\Uc2dd\Uc774";
})
param: 겸식이

[초기 UI를 그릴때 주의사항]

위와 같이 return되는 뷰의 경우, 바로 문제가 없지만 만약 UI를 그리는데 비동기적인 작업이 들어가거나 할경우에는, initView에서 작업을 수행하는 것을 지양하도록하자. Flutter에서는 UIKitView를 호출했고, iOS단에서는 작업자가 지정한 뷰를 리턴하는데 만약 지정한 뷰에 특정 시간작업이 필요하다면 플러터에서 UIKitView를 호출하는 것과 initView에서의 작업이 충돌하여 잘 그려지지 않는 문제가 발생할 수 있기 때문이다. 이럴때는 Flutter쪽에서 UIKitView내에 있는 onPlatformViewCreated를 사용하도록하자.

	UiKitView(
              viewType: _viewType,
              layoutDirection: TextDirection.ltr,
              creationParams: creationParams,
              creationParamsCodec: const StandardMessageCodec(),
              onPlatformViewCreated: (int id) {
                print('[Gyeom] UiKitView onPlatformViewCreated aw:$id');
                _startPlayer();
              },
            ),

[SWIFT] URL형식으로 된 String에서 Parameter 추출

겸손할 겸 — Fri, 19 Nov 2021 13:21:17 +0900

func getQueryStringParameter(url: String, param: String) -> String? {
    guard let url = URLComponents(string: url) else {
        return nil
    }
    return url.queryItems?.first(where: { $0.name == param })?.value
}

[예시]

print("[Gyeom] :: \(getQueryStringParameter(url: "https://g-y-e-o-m.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F", param: "returnURL")"

[Xcode] The linked and embeded framework '' is missing one or more architectures required by this target: armv7

겸손할 겸 — Mon, 27 Sep 2021 18:22:51 +0900

[이슈]

외부 업체에게 프레임워크를 전달받아 import하여 사용하고있는데, 빌드나 컴파일은 문제가 없다가 아카이브 도중 위와 같은 오류가 발생했다. 해석해보자면 해당 프레임워크가 target: armv7를 지원하는 구조가 빠져있다는 식으로 해석이 되는데 이는, 프레임워크를 제작할 때, 빌드를 어떻게 해서 줬는지에 대한 이슈일 확률이 크다.

빌드할 때나 아카이브할 때 사용하는 곳

이곳에서 Any iOS Device를 선택하지 않고 만들어서 프레임워크를 넘겨줬을 경우, 넘겨받은 프로젝트의 배포 환경과 비교하여 다른경우 위와 같은 오류가 발생한다.

[해당 프레임워크가 armv7을 지원하지 않는다는 것을 확인하는 방법]

터미널을 실행하여, 해당 프레임워크 경로를 이동한 다음 cd명령어를 통해 프레임워크 내부로 이동한다. 이동한 다음 아래의 명령어를 입력하면 현재 열려있는 프레임워크가 지원하는 아키텍쳐를 알 수 있다.

file '프레임워크명'

확인해보니 arm64에 대한 지원만 하는 것으로 확인 되었다.

그리고 해당 업체에 전화했다!

[출처]

너무나 똑같은 상황이었던 분의 티스토리!

https://littleshark.tistory.com/49

iOS에 특정 프레임워크, 라이브러리가 빌드 되지 않도록 하는 법

최근에 회사작업을 하면서 외부 업체의 프레임워크를 앱에 넣어야 하는 일이 생겼습니다. 원래 실 디바이스를 물려서 작업하지만 그렇다보니 책상도 지저분해지고 그래서 시뮬레이터로 작업하

littleshark.tistory.com