Flutter로 홈 화면 위젯 만들기 - 2탄

이전 포스팅에서 Android Studio의 기능으로 깡통 위젯을 생성해보았다.

이번엔 홈 화면 위젯 패키지를 사용해서 kotlin으로 작성된 네이티브 위젯을 flutter 프로젝트에서 사용해보자

---

1. 패키지 설치

네이티브로 작성된 홈 화면 위젯과 flutter 앱이 서로 데이터를 공유할 수 있어야 한다. 이를 위해서 로컬 저장소를 활용한다. Android는 SharedPreferences, IOS는 UserDefaults를 활용하게 된다.
이때 이 과정을 home_widget 패키지가 단순화 시켜준다. 설치해보자.

$ flutter pub add home_widget

or

dependencies:
	# 추가 후 flutter pub get 실행
	home_widget: ^0.6.0

---

2. Jetpack Glance 활성화

Android에서 레이아웃(flutter에서 위젯)을 그리기 위한 방법은 두가지가 있다.

1. xml 방식
2. Jetpack Compose 방식

전통적인 방식은 1번이지만, 최근들어 구글에서 2번을 강력하게 밀고있다. Jetpack Compose를 통해 네이티브 위젯을 flutter와 같이 선언적 UI로 작성해서, 코드의 가독성과 유지보수성을 크게 향상시킬 수 있다.

Jetpack Glance는 Jetpack Compose 라이브러리를 기반으로 만들어진 Android 위젯 전용 라이브러리다. 이를 활성화 시켜보자.

// 경로: android/app/build.gradle
android {
	// ...
	buildFeatures {
		viewBinding true
		compose true
    }
	composeOptions {
    	// kotiln 버전에 따라 달라짐
		kotlinCompilerExtensionVersion = "1.5.2"
	}
	kotlinOptions {
		jvmTarget = "1.8"
	}
}

dependencies {
    implementation 'androidx.glance:glance-appwidget:1.0.0' 
}

이 과정에서 각종 빌드 오류가 발생했다. kotlin버전과 home_widget라이브러리, jetpack Glance의 버전 충돌이 잦은거 같다. kotlin 버전에 따른 composeOption값 참고
잘 안되면 vscode 재시작하거나 flutter clean -> flutter pub get을 해보자

---

3. 홈 위젯 코드 작성

위젯 수정을 위해 두 파일을 수정할 것이다.

• Android Studio에서 생성한 kotlin 위젯 파일

  지난번에 Android Studio에서 위젯을 생성했을 때 만들어진 kt파일을 수정해서 WidgetReceiver와 실제 그려질 위젯을 작성하자.

//경로: android/app/src/main/java/com/example/flutter_home_widget/NewHomeWidget.kt
package com.example.flutter_home_widget

import android.content.Context
import androidx.glance.GlanceId
import androidx.glance.appwidget.GlanceAppWidget
import androidx.glance.appwidget.provideContent
import androidx.glance.text.Text
import HomeWidgetGlanceWidgetReceiver

// home_widget 패키지로 위젯의 업데이트 수신을 추상화함
class NewHomeWidgetReceiver : HomeWidgetGlanceWidgetReceiver<ExampleAppWidget>() {
    override val glanceAppWidget = NewHomeWidget()
}

class NewHomeWidget : GlanceAppWidget() {
    override suspend fun provideGlance(context: Context, id: GlanceId) {
        provideContent {
            // Jetpack Glance로 실제 그려질 위젯
            Text("Hello World")
        }
    }
}

• AndroidManifest.xml

  메니페스트 파일에서 WidgetReceiver를 참조하도록 수정하자.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <application
	android:name="${applicationName}"
	android:icon="@mipmap/ic_launcher"
	android:label="flutter_home_widget">
		<receiver
			android:name=".NewHomeWidgetReceiver"
			android:exported="true">
			<intent-filter>
				<action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
			</intent-filter>

			<meta-data
				android:name="android.appwidget.provider"
				android:resource="@xml/example_app_widget_info"/>
		</receiver>
	</application>
</manifest>

---

참고

• https://medium.com/@ABausG/jetpack-glance-home-screen-widgets-with-flutter-810c5121422f