Flutterのサード・ステップのバックアップ(No.9) - .NET 開発基盤部会 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る
- Flutterのファースト・ステップ
- Flutterのセカンド・ステップ
- Flutterのサード・ステップ
- Flutterの4thステップ

目次 †

概要 †

Flutter の step by step（其の三）。

手順１：プッシュ通知 †

CIBAのAD実装の準備

mBaaS選定 †

色々なプラグインがあるが、
使うとmBaaSにロックインされる。

FCMは実質デファクトなので
ロックインの影響も少ない。

以下は、FCMでの設定手順。

設定手順 †

準備（iOSのみ） †

APNs入手
APNs認証キー、またはAPNs証明書の入手

FCM関連の設定 †

Firebaseにログイン
プロジェクトの作成
FCMへアプリを登録
ファイルのダウンロード
設定と実装
- ビルド・プロセスへの組込
- プッシュ通知のコード実装

Firebaseにログイン †

プロジェクトの作成 †

FCMへアプリを登録 †

ファイルのダウンロード †

設定と実装 †

以下については、参考の「ZUMA Lab」が参考になる。
若しくは、以下のコミット・ログを参照。
https://github.com/OpenTouryoProject/SampleProgram/commit/05aa697751eae228e2ef72cd8449deea9bd4c14e

ビルド・プロセスへの組込 †

Android、iOS、其々のプラットフォームに向けて、

前述のダウンロード・ファイルをビルド・プロセスへ組み込む。
メイク・ファイル的なものを一部、手修正する。

パッケージのインストール †

firebase_messagingパッケージを追加する必要がある。

firebase_messaging | Flutter Package
https://pub.dev/packages/firebase_messaging/install
```
import 'package:firebase_messaging/firebase_messaging.dart';
```

プッシュ通知のコード実装 †

デバイスの登録
- デバイスIDを取得し、
- サーバに送信して登録

送信・受信
- 送信
  サーバから送信
- 受信
  プッシュ通知の受信。

参考 †

Qiita †

【Flutter】FCMで初めてのプッシュ通知 2020年12月版
https://qiita.com/yana1316/items/9bd3806efc9cbdddcba9
FlutterでFCMを使ってプッシュ通知を受け取る
https://qiita.com/0maru/items/2b438a4c4fc87b7e10f9
FulutterでGoogleService?-Info.plist(google-services.json)を切り替える
https://qiita.com/yana1316/items/314fbe3eb8d4a95ea78c

FlutterFire? †

Firebase Cloud Messaging
https://firebase.flutter.dev/docs/messaging/overview/

FCM via APNs Integration
https://firebase.flutter.dev/docs/messaging/apple-integration/

その他 †

FlutterでFCMを使ったプッシュ通知の実装方法 (Android) - たけログ
https://takelg.com/flutter_push_notification_android/

Flutter初心者がFCMを使ってプッシュ通知を受け取る | ZUMA Lab
- 〜設定編〜(2021/3/22版)
  https://zuma-lab.com/posts/flutter-fcm-push-notify-settings
- 〜アプリ実装編〜(2021/3/22版)
  https://zuma-lab.com/posts/flutter-fcm-push-notify-development

FirebaseCloudMessaging?(FCM)を使って、
Flutterでプッシュ通知を実装するまとめ｜うぇるち｜note
https://note.com/welchi/n/n649728c5574d
FlutterでFCMを使ったプッシュ通知を実装してみた | DevelopersIO
https://dev.classmethod.jp/articles/flutter_fcm_push1/
【Flutter】FCMでプッシュ通知を送る際のOS毎の注意点
https://zenn.dev/shunyaendoh1215/articles/1d66e2612d23254ce2d1

手順２：全体構成の見直し †

サイズも増えて来たので、この辺りで、アプリの全体構成を見直してみる。

MaterialAppとScaffold †

MaterialApp? †

全体を構成する。
app.dartのWidget buildでreturnされる。

Scaffold †

Pageを構成する。
PageのWidgetのWidget buildでreturnされる。

フォルダ構成 †

main.dart †

runAppする。
その他、初期設定等。

common †

ButtonやView等のWidgetクラスを配置

components †

PageのWidgetクラスを配置

app.dart
- runAppするApp。
- MaterialApp? を返す。

importer.dart
- componentで使用されるライブラリをexportし、
```
export 'package:flutter/material.dart';
```

componentでimporter.dartをimporteする。
```
import '../importer.dart';
```

Page毎のファイル or ディレクトリ

configs †

グローバルな変数/定数クラスを配置
または、servicesのシングルトン化

helpers †

staticな関数クラスを配置

models †

モデルクラスを配置

repositories †

外部インターフェイス（DB等）クラスを配置

routes †

ルーティングの設定クラスを配置
fluro の configureなど。

services †

サービス・クラスを配置
configsでシングルトン化

参考 †

Qiita
- 管理しやすい(と思う)Flutterプロジェクトのディレクトリ構造
  https://qiita.com/tanakeiQ/items/2c4a7fcb8e95b9aa55ad
- Flutter - Create Library Packages (日本語訳)
  https://qiita.com/jugyo/items/21605821117ab0285de5

Flutterで本格的にアプリを書き始める前にやること
https://zenn.dev/razokulover/articles/fa15728b1d98b39c6998

【Flutter入門】100画面を超える規模のアプリ
を開発してみた感想 | 東京のアプリ開発会社
https://pentagon.tokyo/app/2937/

画面分割 †

runAppするApp。 †

app.dartのWidget buildでMaterialAppをreturnする。

Page毎のWidget †

PageのWidgetのWidget buildでScaffoldをreturnする。

部品化 †

Widget †

自作クラス †

パッケージ / プラグイン化しない
（≒個別にプロジェクト化しない）
自作クラスはhelpers、servicesに格納。

参考
- Flutter - Developing Packages & Plugins (日本語訳) - Qiita
  https://qiita.com/jugyo/items/9f678123533ffd8b39cd

参考 †