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

찬찬잉

Jan 20, 2025

회사 내부에서 네비게이션 도입에 대한 요구는 매우 컸다. 하지만 누구도 이에 대한 확신을 가지지 못했다…

그런데 이번에는?

마치 예전에 내가 Flutter를 도입했을 때처럼, 다시 한번 주도적으로 나서보려 한다. 결과는 분명 좋을 것이라 확신하지만, 과정에서 좋은 소리를 듣지는 못할 것이다. 그래도 멈추는 순간 도태된다고 생각한다

그러니 달려야지…

How to Implement Turn-by-Turn Navigation with Mapbox in Flutter

Add Turn-By-Turn Navigation to Your Flutter Application Using MapBox. Never leave your app when navigating your users to a location. This comprehensive tutorial will guide you through integrating the Mapbox Navigation SDK into your Flutter project. You'll learn everything you need to build a user-friendly navigation experience. Follow along as we cover setting up Mapbox, implementing core navigation features, and customizing the look and feel to match your app's design. Get ready to build powerful navigation apps with ease! Create an account here 👇 https://account.mapbox.com/ Pub dev dependency👇 https://pub.dev/packages/flutter_mapbox_navigation Github source code 👇 https://github.com/codewithdarkwa/turn-by-turn-navigation-flutter

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

힌트는 위의 youtube에서 얻었다.

flutter_mapbox_navigation | Flutter package

Add Turn By Turn Navigation to Your Flutter Application Using MapBox. Never leave your app when you need to navigate your users to a location.

https://pub.dev/packages/flutter_mapbox_navigation

일단 이 라이브러리를 먼저 설치해야 했지만, 설치가 제대로 되지 않았다.

이유는 해당 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\fluttermapboxnavigation

에 TurnBYturn.kt파일에 패키지 이름과 다르면 안된다.


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.eopeter.fluttermapboxnavigation">


package com.eopeter.fluttermapboxnavigation

이렇게 하니 일단 빌드가 말렸다… 계속해서 구현 일기를 써보도록하겠다… ㅠ

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" }

<?xml version="1.0" encoding="utf-8"?> <resources>  <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">  <item name="android:windowBackground">@drawable/launch_background</item> </style>  <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar"> <item name="android:windowBackground">?android:colorBackground</item> </style>  <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowNoTitle">true</item>  <item name="android:windowActionBar">false</item>  </style>  <style name="MaterialTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="android:windowNoTitle">true</item>  <item name="android:windowActionBar">false</item>  </style> </resources>

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' }