[개발하는남자 핸즈온 플러터] 챕터8 프로젝트 설정 리뷰 - 최신화

인사

안녕하세요 개발하는남자 개남입니다.
지난 24년 7월 책이 출간되고 책 리뷰를 진행할 계획이 있었고 그렇게 약속을 했었는데요. 가정에 둘째가 태어나고 정신없이 육아에 전념하다 보니 이렇게 뒤늦은 책 리뷰를 하게 되었습니다. 요즘 AI의 발전으로 인해 책을 보고 공부하는 분들보다 AI를 이용하여 공부하시는 분들이 많을 것이라 예상은 되지만 구독자분들에게 약속을 했기 때문에 약속을 지키고자 이렇게 리뷰로 인사를 드리게 됐습니다. (분명 여전히 책으로 공부하고 계실 분들을 위함이기도 합니다 😋 )

리뷰는 이렇게 진행돼요.

리뷰는 책의 기준으로 챕터8부터 한 챕터씩 리뷰할 것입니다. 말이 리뷰지 아마 최신화 작업을 같이 하며 필요한 설명을 첨언하는 식으로 진행될 것 같습니다. 총 8챕터부터 20챕터까지 있으니 12부로 진행될 예정입니다. 챕터는 개남 기술블로그에 먼저 업데이트가 되고 영상을 촬영하여 Youtube에도 올라갈 것입니다.

소스코드 : https://github.com/sudar-life/bamtol_market_clone_coding
브런치 정보 : chapter08
플러터 버전 : Flutter 3.32.5
Dart 버전 : Dart 3.8.1

1. 프로젝트 설정

소스코드를 새로 생성하셔서 진행하셔도 되고 제공드린 소스코드를 받아서 소스코드를 보면서 최신화 작업을 같이 진행하셔도 됩니다. 리뷰는 소스코드 최신화 작업을 진행할 예정이라 빠르게 따라오시려면 저와 같이 소스코드를 받아서 진행하시는 것을 추천드리겠습니다.

1-1. 작업공간 확보

원하는 Workspace를 준비합니다.

$ User/kimsungduck/Documents/workspace/

💡 참고
워크스페이스 경로에 절대로 한글이 들어가면 안 됩니다.

1-2. 소스코드 받기

git clone https://github.com/sudar-life/bamtol_market_clone_coding

받은 소스코드를 vsCode나 cursor와 같은 개발 도구로 열어줍니다.

cd bamtol_market_clone_coding
code .

1-3. 문제 확인

소스코드가 3.10 기준으로 개발되어 있기 때문에 최신화 버전에서 소스코드를 돌리지 못합니다. 안드로이드로 돌려보면 다음과 같은 오류 메시지를 마주하게 될 것입니다.

FAILURE: Build failed with an exception.

* Where:
Script '/Users/kimsungduck/development/sdk/flutter/packages/flutter_tools/gradle/app_plugin_loader.gradle' line: 9

* What went wrong:
A problem occurred evaluating script.
> You are applying Flutter's app_plugin_loader Gradle plugin imperatively using the apply script method, which is not possible anymore. Migrate to applying Gradle plugins with the declarative plugins block: https://flutter.dev/to/flutter-gradle-plugin-apply
2

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

이 오류는 플러터 3.13부터 build.gradle 방식이 바뀌었기 때문에 마이그레이션 작업을 해야 한다는 오류입니다. 플러터 공식 문서 - Breaking changes 에서도 확인하셔서 변경이 가능하십니다. 별도의 설명 없이 어떻게 수정해줘야 하는지 기록하겠습니다.

1-3-1. <app-src>/android/settings.gradle 수정

기존코드

include ':app'

def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
def properties = new Properties()

assert localPropertiesFile.exists()
localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }

def flutterSdkPath = properties.getProperty("flutter.sdk")
assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"

변경코드

pluginManagement {
    def flutterSdkPath = {
        def properties = new Properties()
        file("local.properties").withInputStream { properties.load(it) }
        def flutterSdkPath = properties.getProperty("flutter.sdk")
        assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
        return flutterSdkPath
    }()

    includeBuild("$flutterSdkPath/packages/flutter_tools/gradle")

    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}

plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "8.3.0" apply false
    id "org.jetbrains.kotlin.android" version "1.8.10" apply false
}

include ":app"

여기서 중요한 부분은 "com.android.application" version "8.3.0" apply false 이 부분과 id "org.jetbrains.kotlin.android" version "1.8.10" apply false 여기에 선언된 version입니다. 이 버전은 어떤 기준으로 작성된 것인지는 다음에 수정할 build.gradle 부분에 있습니다.

1-3-2. <app-src>/android/build.gradle 수정

기존 코드

buildscript {
    ext.kotlin_version = '1.7.10'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
//
// 이하 동일

변경 코드

buildscript {
    ext.kotlin_version = '1.8.10'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:8.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

여기에서 수정된 부분은 kotlin_version과 android.tools.build:gradle 버전을 업데이트해줬습니다. 해당 버전이 위에서 수정한 버전과 매칭해주면 되겠습니다.

1-3-3. <app-src>/android/gradle/wrapper/gradle-wrapper.properties 수정

기존 코드

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip

변경 코드

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip

위에서 gradle 버전을 올렸기 때문에 버전에 알맞는 distributionUrl을 변경해서 파일을 받을 수 있도록 설정해줘야 합니다.

1-3-4. <app-src>/android/app/build.gradle 수정

기존 코드

// 이상 동일
//
apply plugin: 'com.android.application' // 제거
apply plugin: 'kotlin-android' // 제거
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" // 제거
//
// 이하 동일

변경 코드

//최상위 line에 추가
plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id "dev.flutter.flutter-gradle-plugin"
}
//이하 동일

1-4 플러터 버전에 맞는 라이브러리 버전 맞추기

플러터가 최신 버전으로 업데이트되었기 때문에 플러터 실행 시 오류가 발생되는 것을 확인하게 될 것입니다. pubspec.yaml파일을 열어 의존성 있는 라이브러리들을 확인합니다. 기존 코드

get: ^4.6.5
flutter_svg: ^2.0.7
equatable: ^2.0.5
google_fonts: ^5.0.0

변경 코드

get: ^4.7.2
flutter_svg: ^2.2.0
equatable: ^2.0.7
google_fonts: ^6.2.1

1-5 안드로이드 결과 확인

위 과정을 잘 따라오셨다면 다음 명령어를 실행하고 플러터 실행을 하면 정상적으로 실행되는 것을 확인할 수 있습니다.

flutter clean
flutter pub get

결과 화면

1-6 iOS 실행

ios 의존성 설치

cd ios
pod install

이제 프로젝트를 iOS 시뮬레이션에 연결하여 실행하면 정상적으로 밤톨마켓 로고가 뜨는 것을 확인할 수 있습니다.