Photo by Hush Naidoo Jade Photography on Unsplash「一般的なモバイルアプリ」の設計全般において、特に何に気を付ける必要があるか、あるいは逆にあまり気にしてなくても良いのではと思うことなどを述べていきます。 (…のつもりでしたが、後者含めると1記事に収めるの困難で、最後にさらっと触れつつ別記事で手厚く書きたいところです🤔) ここでの「一般的なモバイルアプリ」は規模観点では以下程度のイメージですが、それを超えるような規模でも通ずる内容も多いと思っています。 コード量: 数万〜十数万行実装者: 一桁人種類としては(スマホ向けの)クライアントアプリコードであり、以下などではないです。 パッケージ・ライブラリではないサーバーサイドではないこの種類によって適切な組み方はけっこう変わり、アプリコードは依存関係の末端側(基本的に依存される側にはならない)な

そのため例えば、FirestoreのTimestampなどが入ったMap構造は”JSON”ではないです。なので、そういった値を含むものをJSONと呼ぶのはおかしいという声をたまに聞きます。 それはそうですが、Dartの場合は以下が慣例になっているため、厳密な定義に拘らず「JSON構造の Map<String, dynamic> 」をJSONと呼んで済ませる程度の割り切りをするのが良いと思っています。 エンコード: Map<String, dynamic> toJson() => {...}; 形式のメソッド定義デコード: fromJson(Map<String dynamic> json) 名前付きコンストラクタ定義

Flutter Interact ’19 での “Flutter Octopus” よりFlutterは、Android・iOS・Web・Windows・macOS・Linux・Fuchsia の7プラットフォームに対応するマルチプラットフォームフレームワークですが、それらの分岐対応などのためにPlatform判定することがあります(Flutterフレームワーク内でしてくれる対応だけで済むことが多く自前で書く機会は少なめですが)。 その際、いくつか判定方法があり、その扱いに迷ったり適当に勘で済ませてしまうこともありがちだと思うので、この記事で体系的に整理しながら解説します。 また、Platformに関する値がそれぞれの実行環境でどうなるのか、カスタマイズ可能な値を弄るとそれがどう作用するのか、を以下のサンプルで試せるように用意したので適宜活用ください。 デモアプリ: https://flu

Photo by Austin Kirk on UnsplashRiverpod の Provider の命名は何が良いのか迷うことがけっこうあると思うので、自分が良いと思う命名とその理由などを述べていきます。 ソースコード・ドキュメント・APIレファレンスなどを主に参考にしつつ、自分でしっくりくるルールとして整理した感じです。また、サンプルコードのため左辺での型明示をしている箇所がありますが、通常のコードでは省略が推奨です。 以下、Provider と 表記しているのは https://pub.dev/packages/provider ではなく、https://pub.dev/packages/riverpod の Provider クラス群を指します。 普通のProviderの名前結論から言うと、「Provider名は基本的には対象の値名に Provider 接尾辞を付けた名前にする

Photo by Nick Fewings on UnsplashDartは、2021年3月リリースのバージョン2.12にてnull safety対応されました。同時期にFlutter 2.0もリリースされ、それにDart 2.12が同梱されました(2021年12月現在の最新はFlutter 2.8.1/Dart 2.15.1)。 そこからしばらく経ちましたが、自分が書いてきた経験や巷のコード眺めて感じたことを踏まえて、ベターなnull safetyの扱いについて書いていきます。 前提として、null safety を有効にするには、 pubspec.yaml にて以下のように指定する必要があります。 environment: sdk: ">=2.12.0 <3.0.0" // 最低でも2.12.0以上下限は、可能な範囲上げておくと最新の言語機能を使えて良いです。例えばFlutter st

Appleのサービス4つを、手頃な月額のセットプライスで。それがApple One。Apple Music、Apple TV+、Apple Arcade、iCloudの魅力をまとめて楽しみたい方におすすめです。 今のところ個人プランですが、Apple Musicなど家族でも共有したい需要があり次第1,850円/月の家族プランに切り替えます。 Apple Music個人プラン単体で980円に対して、+120円の差額でtv+・Arcade・iCloud 50GBが付いてくるのでApple Oneにしています。 iCloud 2TB (1,300円/月)

以下の記事でも触れている StateNotifier は状態値をimmutableで扱うことが実質必須ですが、そのimmutableプログラミングがあまり理解できていない様子が散見されたり質問を受けることが多いのでそれについて記事にしてみました。 immutableについての良い解説記事なども色々ありますが、Flutter/Dartにおいての実践的な扱い方に対して飛躍がある気がしていて、それを埋められることを意識して順を追って説明してきます。 以下で示したコードは https://github.com/mono0926/riverpod_example/blob/main/test/test.dart に大体含まれています。 mutableなクラスの挙動まず、mutableなクラスの挙動は以下のようになります。 class Mutable { Mutable(this.value); in

Photo by an_vision on Unsplashこれまでは `flutter build ios`とアーカイブの2つの手順が必要だったFlutterで、iOS向けのビルドをしてApp Store Connectなどにアップロード可能なipaファイルを得るにはこれまで以下の2つの手順が必要でした。 flutter build iosXcodeアプリを使ってArchive実行(コマンドなら、fastlaneの build_app ( gym ) など)バージョン 1.24.0–6.0 以降では `flutter build ipa` だけで済むようになった1.24.0-6.0以降のバージョンのFlutterでは flutter build ipaでそれらをまとめて1コマンドで実行できるようになりました 🎉 (2020年12月11日時点では beta以降のchannelで利用可能で

Photo by Daniel Pelaez Duque on UnsplashFlutterの状態管理周りの手法はちょくちょく動きがあって、それに関する話題が度々盛り上がっている気がします。 今の自分は以下を組み合わせて使っていて、満足しています。 Riverpod (新Provider)StateNotifier (Better ValueNotifier)freezed (immutableなクラスの扱いなどを楽にするコード生成器)どうしてこの組み合わせを好んでいるのか、以下述べていきます(コード例などはリンク先で充分かなと思うものが多かったので少なめです)。 Riverpod (新Provider)そもそもProviderとはProvider自体、決して古いものではなく、2018年末に登場し、2019年初めにFlutterチームとのやり取りを経て認められ、Google I/O 20

FlutterのWidgetを分類する際、以下の分け方はよくなされますが、本記事では違う切り口で分類してみます。 StatelessWidgetStatefulWidgetWidgetがどう組み合わされるかという観点で分類すると、次のように大別できます。 Widgetを1つも受け取らないWidget1つのWidgetを受け取るWidget(Single Child な Widget)複数のWidgetを受け取るWidget本記事では2つめのSingle ChildなWidgetに焦点を当てますが、その前に前置きとしてそれぞれ何を指しているのかざっくり説明します。 Widgetを1つも受け取らないWidgetWidgetツリーの末端のWidgetがこれに相当します。Textが代表例ですね。 Text( // WidgetではなくString ’Hello’, // このようなプロパティは指定

Say hello to the helpful Firebase Emulator - a local first UI to boost your productivity Today we are extremely excited to introduce the Emulator UI to the Firebase community. The Emulator UI is a web app… 今まではエミュレーターの管理画面が無く、データの確認などがなかなかしにくい問題がありましたが、”Emulator UI”の提供によりそれが大きく改善されました。 最近までFirebaseエミュレーターはかなり致命的なバグもあり(今は解消されました)、どのくらい力を入れているのかやや疑っていましたが、今回の発表はそういう意味でもきちんと取り組まれている様子が伺えて良いなと思いました。 さ

With Flutter, Google's UI framework Material Design is built right in, giving you access to useful widgets and smooth… ただ、とてももったいないことに、上の公式記事内で、せっかくのCodePenのMedium記事埋め込み機能を活用していなかったので、その補足記事を書いています。 Mediumは、embed.ly を使ってURL展開表示をしていて、そのembed.lyが対応しているCodePenのURLも良い感じに展開されます。ここに載っている対応言語(Web系が多い)の記事では、活用されているのをちょくちょく見かけていました。

Web対応のざっくりとした変遷は次のようになっています。 2019年5月(Google I/O): テクニカルプレビュー版公開2019年12月: ベータ版リリース(beta channelでも使えるようになった、という方が正確かも)このペースを見ると、2020年のGoogle I/Oにリリースプレビュー、同年12月に開催されるであろうFlutterイベントで正式リリース、などの流れもあり得そうですが、そういうバージョン表記はマーケティング的意味合いも大きいと思っていて、実際の対応ベースで評価する方が適切だとも思います。 (とはいえ、そういう表記が正式版に近づくと現場でプロダクション利用が認められたりすることもあるはずなので、現実的には大事といえば大事ですが。) 本記事では、2019年末現時点でのFlutterのWeb対応の実情を、公式アナウンスをなぞりながら、普段Web周りもよく触っている

Recordings are posted on YouTube in case you missed any of the sessions or want to go back and rewatch your favorites…

本記事は、このPublicationの中でも特に初学者向けに書かれています。主なターゲット層は以下のような方です。 JavaScript・PHPなどとっつきやすいWeb系の言語は見よう見まねで触ったことがあるがきちんとは理解できてはいない(プログラムを1行も書いたこと無いレベルの場合はFlutterの前にまず何かとても簡単な入門書をまず一冊挟んだ方が良いです)Flutterを触り立て(環境構築は済んでいる)以前、以下の呟きをしましたが、例えばデザイナー本業の方がFlutterも活用できるようになると幅が広がると思い、また公式ドキュメントにもその旨が書かれていました。 とはいえ、元々バリバリコードを書けてしまうようなごく一部のデザイナーを除いて、やはりFlutterを使いこなせるようになるには(UIレイアウト周りに絞ったとしても)けっこう障壁が高いとは思うので、本記事がその補助となれば幸いで

Flutter モバイルアプリ開発バイブル2019年10月31日発売のFlutter モバイルアプリ開発バイブルという本を、著者の1人である 南里勇気さん(＠neonankiti) から献本していただいたので、それを読んだ感想などを書いていきます。 Chapter1: FlutterとはFlultterの魅力的な点の紹介がざっくり述べられています。また、宣言的UIフレームワークの例として、以下がコード付きで紹介されています。 Appleプラットフォーム: SwiftUIAndroid: Jetpack Composeまた、既存のクロスプラットフォーム開発技術との比較もされていて、全体感が分かるようになっています。 XamarinUnityReact Native個人的に少し違和感があったのは、以下の記述です。 公式サイトでは、3D描画にも将来的に対応すると言及されており、 出典のリンクの記

TL;DR特にFlutterアプリの場合は、手っ取り早く強め(Flutter推奨 + α)に静的解析強化したいときには以下がお勧めです。 1. インストールpedantic_mono パッケージをインストール。 dev_dependencies: pedantic_mono: any2. analysis_options.yamlの配置https://github.com/mono0926/pedantic_mono/blob/master/example/analysis_options.yaml をプロジェクトのルートに置く。 analysis_options.yaml とはそれでは、以下もう少し詳しく補足していきます。 Dart/Flutterプロジェクトでは、analysis_options.yamlを設定することでその記述内容に応じて静的解析をかけてくれるようになります。