[Android] 네이티브 앱에 플러터 화면 띄우기

Minji Jeong·2023년 12월 31일
0

Android

목록 보기
37/39
post-thumbnail

FlutterActivity

FlutterActivity는 안드로이드 네이티브 앱에서 Fullscreen Flutter UI를 표시하기 위해 사용하는 액티비티 클래스로, 네이티브(Kotlin)로 개발된 앱 내에서 플러터(dart)로 개발된 UI를 표시하기 위한 가장 간단하고 직관적인 방법 중 하나입니다. FlutterActivity를 사용해 단순히 특정한 플러터 화면을 띄울 수도 있고, 특정한 플러터 화면으로 이동하면서 특정 작업을 할 수도 있습니다.

1. 단순하게 플러터 화면을 띄우고 싶은 경우

먼저 단순히 네이티브 앱에서 버튼을 눌러 플러터 화면을 띄우고 싶은 경우, 메니페스트 파일에 다음과 같이 FlutterActivity를 추가합니다.

<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />

다음으로 실행하고자 하는 버튼의 클릭 리스너 내에서 startActivity의 인자로 FlutterActivity를 넘깁니다. 이 때, 띄우고 싶은 화면의 route를 initialRoute로 설정합니다(설정하지 않으면 default route인 main.dart로 이동하게 됩니다).

myButton.setOnClickListener {
  startActivity(
    FlutterActivity
      .withNewEngine()
      .initialRoute("/my_route") // default route : main.dart
      .build(this)
  )
}

이 때 withNewEngine을 사용하면 자체 FlutterEngine 인스턴스를 내부적으로 생성하는 플러터 액티비티가 구성되는데, 이 방법은 초기화 시간에 영향을 줄 수 있습니다. 한마디로 플러터 화면이 앱에 표시되기 전 딜레이가 길어질 수 있다는 말입니다. 플러터에선 이러한 초기화 시간을 줄이기 위해, 미리 준비되고 캐시된 플러터 엔진을 사용하도록 권장하고 있습니다.

💡 캐시된 플러터 엔진 사용

캐시된 플러터 엔진을 사용하기 위해 먼저 엔진을 인스턴스화 할만한 곳을 앱에서 찾습니다. 플러터 공식문서에서는 최초 인스턴스화된 플러터 엔진을 전역적으로 사용하기 위해 Application class 내에서 해당 작업을 수행하고 있습니다.

class MyApplication : Application() {
  lateinit var flutterEngine : FlutterEngine

  override fun onCreate() {
    super.onCreate()

    // Instantiate a FlutterEngine.
    flutterEngine = FlutterEngine(this)

    // Start executing Dart code to pre-warm the FlutterEngine.
    // To warm up a FlutterEngine, You must execute a dart entrypoint
		flutterEngine.dartExecutor.executeDartEntrypoint(
      DartExecutor.DartEntrypoint.createDefault()
    )

    // Cache the FlutterEngine to be used by FlutterActivity.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine)
  }
}

✅ Application class

  • 컴포넌트 (액티비티, 서비스, 인텐트 등)간 공동으로 관리해야 하는 데이터를 작성할 때 사용합니다.
  • Application 클래스 또는 Application 클래스를 상속한 모든 자식 클래스들은 애플리케이션/패키지에 대한 프로세스가 생성될 때 가장 먼저 인스턴스화 됩니다. 주로 첫번째 액티비티가 표시되기 전에 전역 상태를 초기화하는데 사용됩니다.

이후 캐시된 플러터 엔진을 사용해야 하는 플러터 액티비티 또는 플러터 프래그먼트에 동일한 id를 withCachedEngine에 전달하면 됩니다.

myButton.setOnClickListener {
  startActivity(
    FlutterActivity
      .withCachedEngine("my_engine_id")
      .build(this)
  )
}

2. 특정 플러터 화면으로 이동하면서 특정 작업을 하고자 하는 경우

특정 플러터 화면으로 이동하면서 특정 작업을 하고자 하는 경우엔 아래와 같이 FlutterActivity를 상속한 액티비티를 하나 생성하여 원하는 작업을 정의해줍니다. 만약 프래그먼트 내에서 플러터 화면을 띄우고 싶다면 FlutterFragment를 사용합니다.

class ExampleActivity : FlutterActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     // ...
  }
}

References

https://docs.flutter.dev/add-to-app/android/add-flutter-screen?tab=cached-engine-activity-launch-kotlin-tab
https://api.flutter.dev/javadoc/io/flutter/embedding/android/FlutterActivity.html
https://onlyfor-me-blog.tistory.com/374

profile
Mobile Software Engineer

0개의 댓글