「Flutter」の記事 - Crieit

Flutterのcard_swiperで独自のアイコンを使うにはどうしたらいいか

2022-10-28T11:44:15+09:00

ページ移動のボタンアイコンはSwiperControlというものをSwiperに指定している。これにはIconDataしか設定できない。

ただこのSwiperControlは勝手に作れるので元のソースをコピーして自分で作って単なる画像を表示できるようにすればいいだけ。

https://github.com/TheAnkurPanchani/card_swiper/blob/master/lib/src/swiper_control.dart

flutter_launcher_iconsでminSdkが見つからないエラーが出る

2022-07-13T09:22:27+09:00

Flutterでflutter_launcher_iconsを使ってアイコンを生成しようとすると、下記のようなエラーが出た。

Cannot not find minSdk from android/app/build.gradle or android/local.propertiesSpecify minSdk in either android/app/build.gradle or android/local.properties

最近のFlutterプロジェクトはbuild.gradleに変数で値が仕込まれているためだと思われる。

        minSdkVersion flutter.minSdkVersion

なのでメッセージも書かれている通り android/local.properties に値を書き込んでおく。

flutter.minSdkVersion=21

参考
https://github.com/fluttercommunity/flutter_launcher_icons/issues/371

Targeting S+ (version 31 and above) requires that one of FLAG_IMMUTABLE or FLAG_MUTABLE be specified when creating a PendingIntentエラー

2022-05-29T10:37:53+09:00

FlutterでtargetSdkVersionを31にしたアプリを実機で試してみたらいきなり落ちてしまった。ログを見てみると下記のようなエラー。

Targeting S+ (version 31 and above) requires that one of FLAG_IMMUTABLE or FLAG_MUTABLE be specified when creating a PendingIntent

調べてみると色々記事が見つかり、どうもFirebaseやAdMobのライブラリが関係していてみんな困っていた。とはいえそれらの情報は2021年の情報だったので、2022/5現在はさすがに改善しているのではないかと思いそのあたりのライブラリを最新にしてみたら起動するようになった。

FlutterのHiveで type 'UnspecifiedInvalidResult' is not a subtype of type 'LibraryElementResult' in type cast エラー

2022-05-24T09:09:10+09:00

FlutterのHiveでbuild_runnerしたところ下記のようなエラーが出た。

type 'UnspecifiedInvalidResult' is not a subtype of type 'LibraryElementResult' in type cast
[SEVERE] hive_generator:hive_generator on lib/models/message.dart:

調べてみたところいくつかの箇所で一旦pubspec.lockを削除したらいける、とのことで試してみたらなおった。依存関係が更新されてしまうのでちょっと怖いが。

https://github.com/google/json_serializable.dart/issues/924

追記）やっぱ仕様変更したライブラリがあって困ったがそれはまた別の話…

Flutter用問い合わせフォームウィジェット＆サービスを作った

2022-04-11T23:43:19+09:00

Flutter用の問い合わせフォームのウィジェットを簡単に設置できるパッケージ及び連携サービス Contact Nite を作りました。

上記画像のように簡単なコードを設置するだけで、サービス上で設定した項目通りの問い合わせフォームウィジェットを表示することができます。また、
送信された問い合わせはサービス上で確認することができるようになっています。

サービス
https://contact-nite.com/ja
パッケージ
https://pub.dev/packages/contact_form

無料プランもありますので気になる方は是非試してみてください。僕も自分のアプリに入れて試してみています。

問い合わせが来るとメール及びSlack通知を行うことができます。そのうちサービス内で直接問い合わせ下ユーザーとやり取りができるようにしてみようと思っています。

技術的な話

パッケージ自体は純粋なFlutterパッケージです。サービス側は今回 Next.js, PlanetScale, Cloud Run を利用しました。

PlanetScale

丁度開発している途中で知った、MySQLサービスです。最近記事も書いたので良ければ見てみてください。

サーバーレスMySQLのPlanetScaleをNext.js+Prismaで使ってみた
 PrismaでPlanetScaleを使う時のエラーあれこれ

ここ最近はずっとFirestoreを使ってサービスを作っていました。安くて容量が大きいとなるとこれくらいしかなかったためです。ところがPlanetScaleを知りそちらに乗り換えてみることにしました。とにかく容量が大きいというのが決め手です。本当はMySQLの方が好きなので僕にとっては嬉しいサービスです。

まだリリースしたサービスで利用した経験が無いのでどうなるかわかりませんが、これから見ていこうと思っています。問題なければこれからの僕の定番になりそうです。

Next.js

Next.jsで作っています。サーバー側もNext.jsのAPI Routesです。もうとにかく楽ちんですね、サーバーサイドとフロント側の連携とか、何も考えなくて良いというのは。仕事だと色々問題が出てくるのかもしれませんがとにかく個人で開発するものだと今はこれが楽すぎて他を考えられません。

特に日本専用サービスとする必要もないためInternationalized Routingを使って日本語と英語の対応を行っています。

デプロイ

Cloud Runを利用しています。最近こればかり使っているので元々持っている資産的に楽になってきたため他を考えられません。といいつつPlanetScaleを使っているのでDBまわりで悩まなくてもいいしHerokuとかで良かったかもしれません。

push時に連動もできるのですが、自動テストはGitHub Actionsでやったほうが超簡単なため、push→GitHub Actionsでテスト→Cloud Buildでビルド＆Runにデプロイという流れをとっています。DBのマイグレーションもCloud Buildでビルドしたイメージを利用して自動化しています。

テストはJestによるシンプルなAPIのテストと、Cypressを使ったE2Eテストを行っています。Cypressはあまり使ってないですがCypress Dashboardと連携して動画も見れたりするの面白いですね。

メール

SendGridです。Dynamic Templatesむっちゃ楽ちんですね。SendGrid上でメールの本文を調整して簡単に送信できます。ごちゃごちゃプログラムやDB上にテンプレートを定義しなくていいので良いです。

あとはメール受信のhookを利用して、メールも見ずにサービス上だけでやり取りできるようにもしたいなと思っています。なんかできるっぽいので。

Flutter側

多言語化

ハマりどころとして、多言語化が結構複雑でした。パッケージを作成する場合一緒に作成されたサンプルプロジェクトと連携して動作させるのですが、そのプロジェクト内だとうまくいくのに、別途他のアプリに組み込んでみたらちゃんと言語が反映されないという問題が発生したりして手こずりました。

ちなみにFlutterはVS Code拡張Flutter Intlを使うことで簡単にローカライズできるのですが、それも使えたようです。

テスト

パッケージは公開ということもありGitHub Actionsでのテストが無料で放題なので、せっかくなので自動テストをいれてあります。

まとめ

小ネタですがサービスサイトの問い合わせフォームもWebではありますがContact Niteに送信して実現しています。

Flutterベースのモバイル向けタイムラインの作成

2022-01-07T16:19:06+09:00

Quireタイムライン（モバイル向け）の構造を初公開

2018年に初めてFlutterベースのアプリを作ったときは、とても楽しく興奮しました。それから3年経ち、Quireアプリもかなり充実して、従来のモバイル向けプロジェクト管理アプリの域を超えるまでになりました。Quireモバイルアプリの現行バージョンは、階層表示、ボード表示だけでなく、タイムライン表示にも対応しています。

モバイルアプリ向けのタイムライン表示の作成を決めたときは、簡単にできるとは思いませんでした。当時は類似の既成コンポーネントもなかったためですが、驚いたのは、インターネットでタイムライン表示の構造についての情報も見当たらなかったことです。そこで、いちかばちか、自分たちで作ってみることにしました。

Quireモバイルアプリ用のタイムラインでは、以下を計画していました。

横方向への無限日付スクロール
レンダリングオンデマンド（ROD）。ビューポートにあるときのみ実行されるWidgetのState
任意の位置に素早く配置
操作がかんたんで使いやすいインターフェースと、スムーズなユーザーエクスペリエンス

数週間で初期開発が完了し、以下のような構造になりました。

タイムラインペインのコアベース（週、週末のセクションなど）
タスクリスト（階層構造のタスクリスト）
タイムラインペインのビューポートベース双方向リスト
1ペインのみのとき、2ペインにまたがるときの両方に対応した期間の横棒
期間の横棒上の固定ラベル

上図のように、タスクごとにタイムラインペインが割り当てられ、すべてのタイムラインのスクロール位置は互いに同期されます。

インデックスベースのスクロールビュー

Google Flutter Widgetに似たインデックスベースのスクロールビューを作るために、Centerに引数のあるカスタムスクロールビューを使用します。実装すると、任意の位置まで素早くスクロールできるようになります。スクロール中のどの時点でも、各位置とインデックスを表示できます。

イメージ的には、少しスクロールした時点で、新しいCenterの引数でタイムラインをリロードしてビューポートの外に移し、またスクロールするとビューポート内に配置される、という感じです。

タイムラインペイン

タイムラインをスムーズに使えるように、インデックスベースのスクロール表示と似た発想で、横方向にスクロールできるカスタム「無限双方向スクロールビュー」を実現しました。実装すると、タイムラインをなめらかにスクロールできます。

無限双方向スクロールビューには、Flutterの強力なViewportの考え方を活用しました。そして、Backwardリストのインデックスを-1から始まる負の数に変更しました。Index 0に当たる日付が分かるようにフラグも設定して、任意の日付まで素早くスクロールできるようにしました。

Widget forwardList = SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return cellBuilder(context, _getIndex(forward: true, index: index));
  })
);

Widget backwardList = SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return cellBuilder(context, _getIndex(forward: false, index: index));
  }),
);

Scrollable(
  viewportBuilder: (BuildContext context, ViewportOffset offset) {
    return Viewport(
      offset: offset,
      center: forwardListKey,
      slivers: [
        backwardList,
        forwardList,
      ]
    );
  },
)

2ペインにまたがるときの問題と解決方法

ビューポートには無限のリスト2つがスクロールされるため、期間の横棒が2つのリストにまたがることもあります。そこで、どちらのリストにも完全に同じ期間の横棒を作成し、ぴったり重ねて、リストがビューポートの外に移動してもリスト内のアンカーが壊れないようにしました。

固定ラベルで解決

モバイル機器の小さい画面ではプロジェクトのどこを見ているかが分かりにくく、使っていると混乱してきます。この問題は、できるだけ多くの情報を提供することで軽減できます。そこで便利なのが固定ラベルです。

最初はとにかくシンプルにするため、スクロールビューのスクロール通知に従って、位置を取得してから配置されたラベルに設定していました。固定ラベルを各タイムラインペインの開始位置に表示するには、期間の横棒の現在位置の計算がベースとなります。

しかし、新しく配置されたラベルは次のフレームまでしか更新されず、スクロールビューと同じ時間枠で同期されないため、ずれて見えてしまいました。

幸いFlutterコミュニティーが、レンダリングレイヤー固定ヘッダーというすばらしい解決方法を教えてくれました。つまりレイアウトのタイミングによる方法です。レンダリングレイヤーにすべてのWidgetをサイズとともに入れるだけでなく、そのピクセルすべてを計算する必要があります。最後にlocalToGlobal関数を、スクロール位置、および2ペインにまたがるときのペイン切り替えに基づいた演算操作と置き換えて、パフォーマンスを向上させました。

始まりはこれから

今は大変な時代ですが、だからこそテクノロジーの分野で貢献したいと考えています。タイムライン表示の作成でまず考えたのは、どうやってFlutterの強力なフレームワークを活用して、ビューコンポーネントを一から作り直すことなく、軽く安定したゴージャスなUIを実現するか、ということでした。

各日付単位はインデックスとして、FlutterのSliverに組み込まれています。ほとんどのものはWidgetレイヤーの高レベルの開発概念に留まり、固定ビューのときのみレンダリングレベルに移動します。

Quireアプリをインストールして、Flutterベースのモバイルアプリを使ってみませんか。Quireタイムラインについて気になることは、コメントを投稿するか、@quire_ioでツイートしてお知らせください！

※転載許可済み: https://zenn.dev/quireteam/articles/2b2c44c3e49fac

Flutterでラジオボタンのバリデーションを行う

2021-12-27T16:01:13+09:00

Flutterのラジオボタンにはvalidatorがない。そもそもラジオボタングループのようなウィジェットもない。

ではラジオボタンもFormの _formKey.currentState!.validate() でバリデーションさせたい時にはどうしたらよいか。

Flutter FormBuilderというパッケージにそういうのがあるのでそれを使うと簡単。

flutter_form_builder | Flutter Package

FormBuilderRadioGroup(
    name: 'gender',
    decoration: const InputDecoration(
      contentPadding: EdgeInsets.zero,
      border: InputBorder.none,
    ),
    onChanged: onGenderChanged,
    validator: (value) {
      if (value == null || value.isEmpty) {
        return '性別を選択してください。';
      }
      return null;
    },
    options: const [
      FormBuilderFieldOption(value: 'man', child: Text('男性')),
      FormBuilderFieldOption(value: 'woman', child: Text('女性')),
    ],
  )

デフォルトだとラッパーの枠がつくのでdecorationのborderで消している。

あとはデフォルト選択で良ければいちいちバリデーションを入れずにそれでも良いような気もする。

ちなみにどうしてもカスタマイズが必要な場合は下記のように自作も可能。

Flutterでバリデーションに対応したカスタムなフィールドを作成する

2021-12-11T23:48:47+09:00

Flutterにはフォームのサブミットボタンを押した時に各入力項目のバリデーションを一括で行ってくれる機能があります。公式でも説明のページがあります。

Build a form with validation | Flutter

基本的なやり方

具体的には例えば下記のようにTextFormFieldにvalidatorプロパティを設定します。

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
),

そしてフォームには下記のようなキーを割り当てます。

  final _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,

あとは決定ボタンが押されたときなどに下記のようにバリデーションメソッドを呼び出します。

    if (_formKey.currentState!.validate()) {

対応していない場合がある

しかしチェックボックスなど、validatorに対応していない場合があります。その時だけ独自にvalidateメソッド以外でチェックをするのはちょっと面倒です。

このような場合に、どのようなものでもバリデーションに対応させる方法があります。もちろんTextFormFieldのvalidatorのようにチェック方法は自分で実装する必要がありますが、たとえばチェックボックスのうち一つは必ずチェックが必要とか、お絵かきをさせてある程度の面積は描かないといけないとか、なんでも自由にバリデーションさせるフィールドをカスタムで作成することができます。

具体的には？

具体的にはFormFieldを継承したウィジェットを作ることでバリデーションを導入することができます。このFormFieldというのは例で上げたTextFormFieldのようにvalidatorプロパティを持っているためバリデーションさせることができます。

ただ、FormField自体がステートを持っており、ちょっと扱い方が特殊になりますので最初はちょっとハマりどころがあったりします。そのあたりも解決する形の解説をしていきます。具体的には下記のようなことをします。

基本的な継承の方法
独自ウィジェットの描画方法（現在の値の取得方法）
入力した時にバリデーションが働いてしまうのでボタンを押したときだけにしたい場合
描画時のbuilderメソッドの引数にBuildContextがないためそれでもcontextを利用したい場合
呼び出し元の親ウィジェットに値を渡す方法
エラーの際のエラーメッセージ表示方法

FlutterのPackageInfoの処理を含むtestを実行する

2021-11-27T23:35:23+09:00

FlutterのtestでPackageInfoの実行を含むコードのtestを実行するとエラーになる。

  Null check operator used on a null value
  package:flutter/src/services/platform_channel.dart 121:86        MethodChannel.binaryMessenger
  package:flutter/src/services/platform_channel.dart 146:36        MethodChannel._invokeMethod  
  package:flutter/src/services/platform_channel.dart 329:12        MethodChannel.invokeMethod
  package:flutter/src/services/platform_channel.dart 356:49        MethodChannel.invokeMapMethod
  package:package_info/package_info.dart 42:26                     PackageInfo.fromPlatform

恐らくテストなのでネイティブ処理が無いためだろう。MethodChannelでネイティブの処理を呼ぼうとして失敗している。

ということで新規パッケージプロジェクトを作った際に元々入っていたMethodChannelのテストを参考にして、PackageInfoの実行をMockで実行する。具体的にはsetMockMethodCallHandlerを実行する。

下記を参考にしてる。もしくはPackageInfoのソースコードを見ても分かると思う。（ただこれだけだと他のテストに影響がでるかもとのことのため対処は後述）

https://stackoverflow.com/questions/54162467/how-to-test-a-method-that-uses-package-info-in-flutter

ensureInitializedを入れないと下記のようなエラーも出るのでちゃんと入れる。

  Null check operator used on a null value
  package:flutter_test/src/deprecated.dart 95:47         TestMethodChannelExtension.setMockMethodCallHandler

ちなみにsetMockMethodCallHandlerを指定しているせいで影響が出て別のテストでエラーが出る可能性があるのかもしれない。新規パッケージプロジェクトではそちらの対処っぽいものも入っていた。上記のソースコードや他の解説記事などでも対処しているものが見つからなかったのでそれも下記に書いておく。

全体としては下記のコードのような感じ。

flutter_secure_storageでCipher functions:OPENSSL_internal:BAD_DECRYPTエラー

2021-11-11T08:12:52+09:00

Flutterで実機デバッグしていたらいきなりflutter_secure_storageのエラーが出るようになっていた。下記のようなエラー。（2021/11現在）

PlatformException(Exception encountered, readAll, javax.crypto.BadPaddingException: error:1e000065:Cipher functions:OPENSSL_internal:BAD_DECRYPT

なんだかよくわからないが、エラーが出はじめたタイミングでtargetSdkVersionを30にしていたのでもしかしたら高いバージョンのAndroid環境（Android11以降？）だと発生するのかもしれない。（とはいってもbuild.gradleを戻してもなおらない。なぜかコミットをもとに戻さないと発生しないので謎）

issueを調べてみたら現在報告されているところで改善もしていないっぽい。なのでこれからの修正を待つしかなさそう。

一時的な対処方法

まずreadAllは使わない。これを使うと絶対エラーになる。でもそれ以外はなんとなく動いているっぽい気がする。

ということでreadを使う。しかし、多分データがなにもないとかキーが無いとかでもエラーになる。そのため、readもtry catchで囲んで、エラーが出たらデフォルト値を返すようにして利用する必要がある。

とりあえずそれで動いた。

issueはなんか同じようなのがいっぱいあるがとりあえずこれ
https://github.com/mogol/flutter_secure_storage/issues/248

Riverpod v1とFlutter Hooksの使い方

2021-11-06T23:12:54+09:00

どうも昨日か今日（2021/11/6）あたりにRiverpodのバージョン1が正式リリースされていたようです。めでたい！

hooks_riverpodも同時に1.0.0になっています。ということで使い方のメモ。といってもExampleに載っています。

元々HookWidgetを継承してウィジェットを作っていましたが、HookConsumerWidget に変更となりました。（Hookを使わない場合はConsumerWidget）

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

読み込みの変更

値の読み込み方法も変更となります。

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final records = ref.watch(recordsProvider);

buildメソッドにはWidgetRefの引数が付きます。useProviderは無くなったので代わりにこのrefを使うことで値の読み取りを行うことができます。

更新の変更

値の更新方法も同様に変更となります。今までは context.read を使っていたと思いますが、refを使う ref.read に変更となります。

      ref.read(recordsProvider.notifier).setRecords(RecordRepository.all());

まとめ

あわせて公式サイトもようやくリニューアルされたようなので見直してみると良いでしょう。

https://riverpod.dev/

The method 'setMockMessageHandler' isn't defined for the class 'BasicMessageChannel'エラー

2021-09-27T22:24:22+09:00

Flutter2.5.1にしたら下記のようなエラーが出た。

/C:/Users/alpha/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/wakelock_platform_interface-0.2.0/lib/messages.dart:100:17: Error: The method 'setMockMessageHandler' isn't defined for the class 'BasicMessageChannel'.

よくわからないけどもこの場合はwakelockに依存しているなにかのパッケージを更新すればなおるかもらしい。僕の場合はchewieをアップグレードしたら治った。

fvmでFlutter2.5がインストールの候補に出てこない

2021-09-20T21:21:10+09:00

fvm releases しても全然Flutter2.5.1が出てこないためインストールできない…。

fmvのバージョンが低すぎると出てこないようです。僕はFlutter1時代のfvm v1を使っていたためだったっぽいです。アップグレードしたら2.5.1が出てくるようになりました。

Flutterのaudioplayersを入れるとexpected version is 1.1.15というエラーがでる

2021-09-02T23:38:57+09:00

Flutterでaudioplayersを入れると expected version is 1.1.15 というエラーがたくさん出る。

よくわからないが build.gradle の kotlin_version を下記のように上げると良いらしい。

ext.kotlin_version = '1.4.32'

参考

flutter - Execution failed for task ':audioplayers:compileDebugKotlin' - Stack Overflow

Flutterで「～～ is not a readable directory」エラー

2021-08-24T10:10:08+09:00

Flutterアプリで「～～ is not a readable directory」みたいなエラーが出て全く起動できなくなってしまった。

なんか起動中についついpubspec.yamlを編集してVSCodeが自動でpub getしてしまったのでそのせいかもしれない。

gradlew cleanしてもFlutterプロジェクトをcleanしてもPCを再起動しても該当のパスを削除しても全然ダメ。

結局、android/.gradle というフォルダがあるのだがそれを削除したら動くようになった。

参考
Gradle Error: Path is not a readable directory for an Android Project saved in OneDrive - Stack Overflow

Flutterでアプリを作る時に使っている僕の定番パッケージ

2021-08-23T08:55:22+09:00

この２年でFlutterアプリを5つリリースしました。最初はよく分からない感じで適当に作っていましたが、やっているうちにだんだんわかってきたのと、あとは諸々の便利なライブラリなども出てきてそれらをキャッチアップして開発するようにしていて、最近なんとなくだんだん自分のアプリの作り方が固まって来ました。せっかくなので一度まとめて紹介したいと思います。

基本的なやつ

google_mobile_ads

これは公式のAdMobパッケージです。サードパーティのものや、古い公式の別ライブラリがあったりして紛らわしいかもですが、これが最新です。ちゃんとウィジェットとして画面内に埋め込むことができます。

とはいえまだ時々よくわからない問題が出たりすることもあるのでシンプルな使い方をするほうが良さそうです。僕はだいたい下の方に表示するだけにしています。まだまだ改善してほしいなと思う部分は多いです。

あとはapp_tracking_transparencyもあわせつつ

Flutter Launcher Icons

https://pub.dev/packages/flutter_launcher_icons

大きい画像を一つ作っておけばあとはAndroid、iOS用のアイコンサイズをぶわっと作ってくれるやつです。便利です。

app_review

レビューリクエストをしてくれるライブラリです。とても簡単に使えるのでリリース時から入れておきましょう。

まとめ

あくまでも僕の定番です。みなさんも自分のお気に入りを探しましょう。

実際に作ったやつは下記のポートフォリオにの「アプリ」というグループでまとめてあります。（Flutterじゃないゲームも混じってますが）
https://www.alphabrend.co.jp/portfolio

FlutterでpushNamedを使うメリット

2021-07-24T22:54:58+09:00

Flutterでページ遷移をする場合、pushを使う方法とpushNamedを使う方法があります。pushは直接ページ用のウィジェットを指定して呼び出す方法で、pushNamedは予め定義したページパスの文字列を指定して呼び出す方法です。

push

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) {
      return SomePage();
    },
  ),
);

pushNamed

Navigator.of(context).pushNamed('/some/page');

どっちが良いのか？

どっちが良いのか僕もよくわかりませんが、僕はpushNamedを知ってからはそちらだけ使っています。後々気づいたのですが、namedパターンの場合にはどうもFirebase Analyticsでアクセスされたパスを自動的に記録してくれるようで、解析が楽になります。下記のような値として保存されています。

そのため独自にどのページに行ったかというイベントを送る必要がなくなります。ファネルの設定などもこれを使えば簡単です。

使いづらい点

いくつか使いづらい点はあると思いますので下記のように解消はできます。

ページパスの誤り

ページパスは単なる文字列のため、間違える可能性もあります。そのため定数にしておけば実行しなくても誤りに気づけます。

const topPagePath = '/';
const contactPagePath = '/contact';

final routes = {
  topPagePath: (BuildContext context) => SplashPage(),
  contactPagePath: (BuildContext context) => ContactPage(),

Navigator.of(context).pushNamed(contactPagePath);

arguments の型がない

pushNamedを使う時にargumentsとしてパラメータを渡すことが出来ますが、dynamicなのでここも間違える可能性があります。この場合は各ページにpushNamedをラップしたstaticメソッドを作成しておくと間違えることなく書くことが出来ます。

class ContactPageArguments {
  ContactPageArguments({
    required this.contactCategoryId,
    required this.title,
  });

  final int contactCategoryId;
  final String title;
}

class ContactPage extends StatelessWidget {
  static Future push(BuildContext context, ContactPageArguments arguments) {
    return Navigator.of(context).pushNamed(contactPagePath, arguments: arguments);
  }

  @override
  Widget build(BuildContext context) {
    final arguments = ModalRoute.of(context)?.settings.arguments as ContactPageArguments;

Flutterのaudioplayersでなぜかassetsを再生できない時

2021-04-24T20:28:10+09:00

Flutterにはaudioplayersという音声ファイルを再生できるライブラリがある。ファイルも再生できるし、AudioCacheというやつでassetsの音声ファイルも再生できる。

…がなぜか再生できない。ファイルが見つからないっぽくてエラーになる。

そもそもサンプルのコードが

audioCache.play('audio.mp3')

となっており、そもそもパスってどういう仕組で解釈されてるんだ！？　と謎がある。

で、調べてみたところ、どうも assets というフォルダに入れなければならず、そこからの相対パスを書く必要があるらしい。つまり sounds/aaa.mp3 とかだとそもそも再生できない。 assets/sounds/aaa.mp3 として配置し、 audioCache.play('sounds/aaa.mp3') とすれば辻褄があるという感じらしい。ドキュメントに書いてよ！

モバイルアプリ開発フレームワーク

2021-04-13T16:45:08+09:00

現在、40億人を超えるモバイルユーザーがいるため、モバイルでオーディエンスとつながることができなければ、あなたは存在しません。人々はスマートフォンの使用をとても楽しんでいるので、技術のない日を過ごすために自分自身に挑戦する必要があります。スマートフォンは、電話、テキストメッセージ、メールのチェック、さらには娯楽まで、必要なものをすべて提供できます。そのため、モバイルアプリフレームワークが実現します。
このような陰謀的なアプリケーションの舞台裏には、何千ものモバイルアプリ開発フレームワークがあります。ただし、モバイルアプリをうまく作るには、適切なモバイルアプリ開発フレームワーク、関連技術、プラットフォーム、データベースが不可欠です。とはいうものの、あまりにも多くの選択肢があり、どれかひとつに絞るのはこれまで以上に難しい状況です。そこでこの記事では、iOSとAndroid両方のプラットフォームで最も人気の高いモバイルアプリ開発フレームワークについて説明します。その前に、効率的なモバイルアプリ開発フレームワークとはどのようなものかを簡単に見ていきましょう。

1. React Native
React Nativeは、AndroidアプリとiOSアプリの両方向けに構築された非常に人気のあるフレームワークです。特に、モバイルアプリの開発者は、より短いビルドサイクルでより高速なデプロイ時間で高性能アプリをビルドでき、予算にやさしいオプションです。さらに、React Nativeは、ビュー、テキスト、画像など、プラットフォームに依存しないネイティブコンポーネントのコアセットを提供し、すべてプラットフォームのネイティブUIビルディングブロックにマップされます。また、フルスタックに必須のJavaScriptもサポートしています。

2. Flutter
FlutterはGoogle が作ったオープンソースのネイティブアプリケーション開発フレームワークです。Dart という共通言語で開発を行います。詳しいデバッグができるので React Native で感じる「隔靴掻痒」感は少ないです。
Flutterを使うことで同一のコードベースからAndroidやiOSアプリを構築でき、その見た目もネイティブアプリです。FlutterはGoogleによる導入が2015年でしたが、2018年12月の公式リリースまではベータ段階にとどまっていました。
Flutterのユーザーは、携帯電話、テレビ、タブレット、ウェアラブルデバイス、スマートディスプレイ用のアプリを作成できます。
ちなみに Flutter Studio は Flutter の UI 作成のために使えるサイトです。ビルドのためのものではありません。Flutter を採用するなら使うことになるのではないかと思われます。Flutter ではそれぞれの Native パートをプロジェクト含めることができる。

3. Ionic
Ionicは、クロスプラットフォームアプリケーションとともにインタラクティブハイブリッドおよびPWAを構築するのに役立ちます。このオープンソースフレームワークは、アプリケーションを作成するためのプレミアムサービスを提供します。さらに、Ionicは、Web、Android、およびiOS用のアプリケーションの構築をカバーしています。さらに、Ionicで作業している間は、常にアプリケーションを作成して、展開可能な場所に出荷できます。すぐに使用できる機能を備えているため、アプリケーション開発に最適です。

まとめ
以上挙げた３つのフレームワーク以外、他にもモバイルアプリ開発フレームワークがあります。どのフレームワークを選択するかは、要件、予算、技術的要件、そして短期的または長期的な成功の可能性に応じて、最も適したものを選ぶと良いでしょう。

Flutterのurl_launcherでApp StoreのURLを開くとフリーズする問題

2021-04-06T23:16:07+09:00

Flutterで作ったアプリ内で別のアプリに送客をしようと思い、url_launcherでApp StoreのアプリのURLを開くことにしました。

https://pub.dev/packages/url_launcher

テストしてみると特に問題ない……と思いきや、どうもストアの画面からアプリに戻ってみるとアプリがフリーズしていて動かない…！！！　Android側は問題ないのですが、iOS側だけ。

調べてみると完全にフリーズしているわけではなく、画面の描画だけがフリーズしており、ボタンは押した時のアニメーションが途中で止まったまま。しかも操作をするとログが流れていくので描画は止まっているけどアプリ自体は動いていて画面遷移などボタンのタップなどは動いている状態のようです。

なぜか全然分からず、とにかくタップ時に遷移するのがまずいのかと思い、 Future.delayed をしてみたり、launchを呼び出す時にどうせURLを開くだけだからとawaitを省略していたのを追記してみたりしましたがそれでも全然うまくいきません。

多分普通のURLだと大丈夫だと思うのですが、App StoreのURLはダメっぽいようです。Schemeを使って開いたら良いのかな、とも思いましたが、どうもSchemeはちょいちょい変わったりURLが古いっぽかったりして全然安心できなかったので、ひとまず使わない方向で考えていくことにしました。

解決方法

そしてついに解決法を見つけました。大変でした……。