【Flutter】HomeWidgetで使っていい感じに作成してみた（Android版）

はじめに

HomeWidgetってなんかあるといいですよね。作ってみたいとは思いつつ、難しそうだなとあまり触っていませんでした。ただ、今回チャレンジをしてみたところ、割とできちゃったので、ご共有しようと思います。

注意
今回は、画像を入れるだけなため、シンプルな実装になります。動的な実装をする場合は、別途作業が必要になります⚒️

実装するのに必要なPackages

 flutter pub add home_widget

dependencies:
  home_widget: ^0.7.0

HomeWidgetで使用するファイルとフォルダについて

警告
画像などは、細かく調べていくと端末のサイズによって画像のサイズが必要っぽいので注意してください。僕の場合は、個人開発だからまあいいかと１種類だけの用意にしました🙇

また、あくまでも僕の認識なので、間違いがあるかもしれません。

android/app/src/main/AndroidManifest.xml・・・接続に必要な記載
android/app/src/main/res/drawable/・・・プレビューやHomeWidgetに必要な画像
android/app/src/main/res/layout/・・・HomeWidgetの全体のレイアウトなど
android/app/src/main/res/xml/・・・HomeWidgetの中身（画像）の調整

実装していく

必要な画像を用意

layout/widget_eat_layout.xml

android/app/src/main/res/layout/widget_eat_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <ImageView
        android:id="@+id/food_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:importantForAccessibility="no"
        android:scaleType="centerCrop"
        android:src="@drawable/eat_widget"
        tools:targetApi="jelly_bean" />
</RelativeLayout>

xml/app_widget_eat_provider.xml

android/app/src/main/res/xml/app_widget_eat_provider.xml

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:initialLayout="@layout/widget_eat_layout"
    android:minWidth="40dp"
    android:minHeight="40dp"
    android:previewImage="@drawable/eat_widget"
    android:resizeMode="none"
    android:updatePeriodMillis="0"
    android:widgetCategory="home_screen"
    tools:targetApi="jelly_bean_mr1" />

AndroidManifest.xml

android/app/src/main/AndroidManifest.xml

<service
    android:name="es.antonborri.home_widget.HomeWidgetBackgroundService"
    android:exported="true"
    android:permission="android.permission.BIND_JOB_SERVICE" />
<receiver
    android:name="MyAppWidgetProvider2"
    android:exported="false">
<intent-filter>
<action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
</intent-filter>
<meta-data
    android:name="android.appwidget.provider"
    android:resource="@xml/app_widget_eat_provider" />
</receiver>

完成図

実装してみた感じだと以下の通りになります。そのほかのHomeWidgetや中ぐらいの作り方については別記事で書くとかで共有できたらなと思っております。

こちらが作業していた内容です👇

最後に

MapLibreを使用したアプリを個人で開発しています･:*+.(( °ω° ))/.:+

• 「FoodGram」は、フードシェアアプリとなっており、あなたの好きなレストランの食事をぜひこのアプリで共有していただけると嬉しいです!!

このアプリのセールスポイント

• このアプリだけのレストランマップをユーザー全員で作成できる⭐️
• 自分だけのフードアルバムを構築できる⭐️
• 世界中の人たちの投稿を自由に閲覧できる⭐️