Flutter MapBox Navigation 구현 잔혹사 - (1)

윤여찬's avatar
Jan 20, 2025
Flutter MapBox Navigation 구현 잔혹사 - (1)
회사 내부에서 네비게이션 도입에 대한 요구는 매우 컸다. 하지만 누구도 이에 대한 확신을 가지지 못했다…
그런데 이번에는?
마치 예전에 내가 Flutter를 도입했을 때처럼, 다시 한번 주도적으로 나서보려 한다. 결과는 분명 좋을 것이라 확신하지만, 과정에서 좋은 소리를 듣지는 못할 것이다. 그래도 멈추는 순간 도태된다고 생각한다
 
그러니 달려야지…
힌트는 위의 youtube에서 얻었다.
일단 이 라이브러리를 먼저 설치해야 했지만, 설치가 제대로 되지 않았다.
 
이유는 해당 Flutter 라이브러리가 13개월 전에 출시된 오래된 버전이었기 때문이다. 그래서 몇 가지 수정을 진행했다.
우선, android\build.gradle 파일의 마지막에 다음 코드를 추가해 주었다.
dependencies { // ✅ Mapbox Navigation SDK 최신 버전 적용 implementation "com.mapbox.navigation:copilot:2.16.0" implementation "com.mapbox.navigation:ui-app:2.16.0" implementation "com.mapbox.navigation:ui-dropin:2.16.0" // ✅ Kotlin 및 필수 의존성 추가 implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.4" implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.4" // ✅ Google 및 AndroidX 라이브러리 최신화 implementation "com.google.android.material:material:1.8.0" implementation "androidx.appcompat:appcompat:1.6.1" implementation "androidx.cardview:cardview:1.0.0" implementation "androidx.constraintlayout:constraintlayout:2.1.4" implementation "com.google.android.gms:play-services-location:21.0.1" implementation "com.google.code.gson:gson:2.8.9" // ✅ 멀티덱스 지원 implementation 'androidx.multidex:multidex:2.0.1' // ✅ 디버깅 및 로깅 도구 추가 implementation 'com.jakewharton.timber:timber:4.7.1' debugImplementation "com.squareup.leakcanary:leakcanary-android:2.9.1" }
android\src\main\res\values\styles.xml 파일에 접근하여
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 프로세스가 시작될 때 적용되는 Android 창 테마 (OS의 다크 모드 설정이 꺼져 있을 때) --> <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar"> <!-- 플러터 엔진이 첫 번째 프레임을 그릴 때까지 표시되는 스플래시 화면 --> <item name="android:windowBackground">@drawable/launch_background</item> </style> <!-- 프로세스가 시작되자마자 Android 창에 적용되는 테마. 이 테마는 Flutter UI가 초기화되는 동안의 창 색상을 결정하며, Flutter UI가 실행되는 동안에도 창의 배경색을 설정하는 역할을 합니다. 이 테마는 Flutter의 Android 임베딩 V2부터 사용됩니다. --> <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar"> <item name="android:windowBackground">?android:colorBackground</item> </style> <!-- ✅ AppCompat 테마 추가 --> <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowNoTitle">true</item> <!-- 창의 제목을 숨김 --> <item name="android:windowActionBar">false</item> <!-- 액션바 제거 --> </style> <!-- ✅ MaterialComponents 테마 추가 --> <style name="MaterialTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="android:windowNoTitle">true</item> <!-- 창의 제목을 숨김 --> <item name="android:windowActionBar">false</item> <!-- 액션바 제거 --> </style> </resources>
테마를 수정해주었다. 그리고 app\build.gradle 에서
dependencies { implementation platform('com.google.firebase:firebase-bom:33.7.0') implementation 'com.google.firebase:firebase-analytics' // 최신 AppCompat 라이브러리 추가 implementation "androidx.appcompat:appcompat:1.6.1" implementation "com.google.android.material:material:1.9.0" // ✅ Material Design 추가 implementation 'com.google.android.gms:play-services-auth:21.3.0' implementation 'androidx.multidex:multidex:2.0.1' }
추가해주었다. 그리고 이제 패키지 라이브러리 안에 코틀린에 코드들을 수정해주었다.
C:/Users/당신의 폴더/AppData/Local/Pub/Cache/hosted/pub.dev/flutter_mapbox_navigation-0.2.2/android/src/main/kotlin/com/eopeter/fluttermapboxnavigation/factory/EmbeddedNavigationViewFactory.kt
이렇게 기존에 있던 activity.setTheme를 아래와 같이 변경해주었다.
activity.setTheme(R.style.Theme_AppCompat_NoActionBar)
activity.setTheme(R.style.AppTheme) // ✅ AppTheme으로 변경
C:/Users/당신의 폴더/AppData/Local/Pub/Cache/hosted/pub.dev/flutter_mapbox_navigation-0.2.2/android/src/main/kotlin/com/eopeter/fluttermapboxnavigation/activity/NavigationActivity.kt 또한 이 파일도 오류가 발생한다 똑같은 이유로
setTheme(R.style.Theme_AppCompat_NoActionBar)
setTheme(R.style.AppTheme) // ✅ 올바른 테마 이름으로 변경
위 코드를 아래와 같이 동일하게 변경해주었다.
그리고 namespace오류가 발생하는데 그것 또한 변경해주었다.
C:\Users\당신의 폴더\AppData\Local\Pub\Cache\hosted\pub.dev\flutter_mapbox_navigation-0.2.2\android\src\main 일단 이 폴더 안에 xml 파일에 package를 추가하고
중요한건 C:\Users\당신의 폴더\AppData\Local\Pub\Cache\hosted\pub.dev\flutter_mapbox_navigation-0.2.2\android\src\main\kotlin\com\eopeter\fluttermapboxnavigationTurnBYturn.kt파일에 패키지 이름과 다르면 안된다.
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.eopeter.fluttermapboxnavigation">
package com.eopeter.fluttermapboxnavigation
이렇게 하니 일단 빌드가 말렸다… 계속해서 구현 일기를 써보도록하겠다… ㅠ
 
Share article

찬찬잉