flutter 간단한 WebView app 만들기 (home_widget 후편)

 

HomeWidget is a Plugin to make it easier to create HomeScreen Widgets on Android and iOS. HomeWidget does not allow writing Widgets with Flutter itself. It still requires writing the Widgets with native code. However, it provides a unified Interface for sending data, retrieving data and updating the Widgets

Flutter에서는 홈 화면 위젯을 만드는 것이 약간 복잡합니다. Dart 언어로는 홈 화면 위젯을 만들 수 없습니다.

그러므로 안드로이드용 코틀린이나 IOS용 스위프트를 사용하여 구현해야 합니다.

 

 

home_widget이 없으면 앱 만드는 의미가 없다고 생각하여 이악물고 layout 구현하는것부터 빠르게 배워나갔다.

kotlin로 금방 적응 할지도,,

 

구현 목표

home widget을 누르면 url리스트 중 제일 상단에 있는 링크로 접속.

 

 

 

1.  XML로 App Layout 구현

 android 폴더를 Android Studio로 실행한다.

 

 

참고했던 레퍼런스들

- https://developer.android.com/guide/topics/resources/layout-resource?hl=ko

- https://developer.android.com/codelabs/basic-android-kotlin-training-xml-layouts?hl=ko#0

 

app -> New -> Widget -> App Widget

 

Class Name 작성후 Minimum Width를 2로 지정하고 finish

그 다음 res/layout/deep_link_woidget.xml 파일에서 TextView의 text를 '최근 링크로 접속'으로 변경하였다.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appwidget_layout" // 없으면 추가해주세요
    style="@style/Widget.Android.AppWidget.Container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.Android.AppWidgetContainer">

    <TextView
        android:id="@+id/appwidget_text"
        style="@style/Widget.Android.AppWidget.InnerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:contentDescription="@string/appwidget_text"
        android:text="최근 링크로 접속" // 여기
        android:textSize="24sp"
        android:textStyle="bold|italic" />
</RelativeLayout>

위젯 스크린샷( 디자인 테러 )

 

2. kotlin으로 home_widget 함수 구현하기 ( kotlin 완전 처음,,)

 

package com.example.hybrid_app

import android.appwidget.AppWidgetManager
import android.appwidget.AppWidgetProvider
import android.content.Context
import android.content.Intent
import android.net.Uri
import android.widget.RemoteViews
import es.antonborri.home_widget.HomeWidgetLaunchIntent
class DeepLinkWidget : AppWidgetProvider() {

    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        for (appWidgetId in appWidgetIds) {
            val views = RemoteViews(context.packageName, R.layout.deep_link_widget).apply {
                // Open App on Widget Click
                val pendingIntent = HomeWidgetLaunchIntent.getActivity(
                    context,
                    MainActivity::class.java,
                    Uri.parse("DeepLinkWidget://DeepLinkWidget")) // url는 우선은 대충,,
                setOnClickPendingIntent(R.id.appwidget_layout, pendingIntent)
            }
            appWidgetManager.updateAppWidget(appWidgetId, views)
        }

    }

    override fun onEnabled(context: Context) {
        // Enter relevant functionality for when the first widget is created
    }

    override fun onDisabled(context: Context) {
        // Enter relevant functionality for when the last widget is disabled
    }

}

widget에서 app을 실행하는코드는 쉽게 얻을 수 있어서 가져왔다.

 

 

3. dart 코드에서 url 받고 처리하기

url_list_screen.dart에서 HomeWidget을 클릭되었을때 후 처리 코드를 추가 하였습니다.

 

  @override
  void initState() {
    _getUrlList();
    _checkForWidgetLaunch(); 
    HomeWidget.widgetClicked.listen(_launchedFromWidget);
    super.initState();
  }

  /// Checks if the App was initially launched via the Widget
  void _checkForWidgetLaunch() {
    HomeWidget.initiallyLaunchedFromHomeWidget().then(_launchedFromWidget);
  }

  void _launchedFromWidget(Uri? uri) {
    if (uri != null) {
      /// home_widget을 클릭 한 후에 하고 싶은 동작을 아래에 자유롭게 수정
      /// 최근 접속링크 기억하는 코드 작성하기 귀찮아서 우선은 제일 첫번째링크로 접속하게 바꿈,.
      _navigateToWebView(_itemList.first); 
    }
  }

평상시에는 HomeWidget.widgetClicked에서 이벤트를 받아서 처리됩니다.

 

_checkForWidgetLaunch는 위젯을 클릭하여 앱이 처음 시작했을때의 이벤트는 다르게 처리 할 수 있습니다.

사용하지 않아도 문제없습니다. ( 여러번 테스트 해봄)

 

공식문서 중간 부분 https://pub.dev/documentation/home_widget/latest/

Clicking

To detect if the App has been initially started by clicking the Widget you can call HomeWidget.initiallyLaunchedFromHomeWidget() if the App was already running in the Background you can receive these Events by listening to HomeWidget.widgetClicked. Both methods will provide Uris, so you can easily send back data from the Widget to the App to for example navigate to a content page.

 

 

4. 마무리 

 

해당 작업 코드는 아래의 commit 이력을 따라가면 추적할 수 있습니다.

flutter 간단한 WebView app 만들기 (home_widget 후편)

flutter 간단한 WebView app 만들기 (home_widget 후편) · kimjuno97/hybrid_app@c3a059a