そんなあなたに送る、Flutterニュース。
本記事ではFlutterニュースとして、2022年3月第2週に話題になったFlutter関連の情報や、 アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください！
Flutter公式情報
FlutterPuzzleHack 締切迫る
1月より開催されていたFlutterのアプリコンテスト、 FlutterPuzzleHackの締切が間近となりました。 締切は【日本時間 3/15 7:00 AMまで 】となっています。
公開投票も3月から行われるようです。
Flutterに関する話題
Appwrite v0.13 リリース
Firebaseの代替手段としてのオープンソースのプロジェクト、 Appwriteの v0.13がリリースされました。
FlutterのSDKも用意されており、今後外部データベースの選択肢となるかもしれません。
アニメーション付きのListViewやGrid View を実装できるパッケージ、shaky_animated_listview
アニメーション付きのListViewやGrid View を実装できるパッケージ、 shaky_animated_listviewが話題となりました。
パッケージページにgif画像付きでアニメーションが紹介されています。
Flutterに関する記事
Flutterでのstreamとfutureの違いって？
Stream と Future について、違いは何かを解説した記事です。
Stream と Future それぞれの解説も載っています。
この記事を参考にして週刊Flutter大学でも以下の記事を書いています。 合わせてご確認ください。
Dart/Flutterで一番早いローカルデータベースパッケージは何？
Flutterのlocal Database として何を使うのが良いのか？という記事です。
この記事では性能の良いパッケージとして、主にObjectBoxの紹介がされています。 簡単な使い方から、データのブラウザでの可視化についてまで解説されていました。
一年間更新しなかった後のFlutterの話
要約すると、 「約一年間放置したFlutterのプロジェクトをアップデートしたけど、 とても楽にアップデートできた」 という記事です。
null safety だったりパッケージのアップデートに対応した様子が体験談として綴られています。
Flutter Riverpod 情報：FutureBuilderやStreamBuilderより、RiverpodのAsyncValueを使おう！
FutureBuilder や StreamBilderを使うより、 Riverpod の AsyncValue使った方が良い、 という記事です。
AsyncValueではerror や loading などの状態を、 明示的にコントロールできるのが強みです。
コードの比較画像もあり、わかりやすく解説されています。
Flutter と Websocketsを使ったリアルタイムデータ受信、送信の実装方法
Flutter と Websocketsを使ってリアルタイムデータ通信を実装しよう、という記事です。
サーバーにデータを投げ、サーバーのデータ状況を取得し、表示する、 という実装方法を紹介しています。
ダミーサーバーも紹介されており、 簡単に実装の練習ができます。
Flutter Does That - An Overview of Flutter Widgets (A Series)
Redit上でFlutter の Widgetについて解説したスレッドです。 Stateful Widget と Stateless Widgetについて、 要点まとめて説明されています。
Almost Netflix: Flutter + Appwriteで Netflixのクローンを作ろう
FlutterとオープンソースのバックエンドサービスのAppwriteを使って、 Netflixアプリのクローンを作ろう！という記事です。
状態管理手法としてProviderが使われていたり、 shared_preferenceやadaptive_dialogが使用されていたりと、 かなり勉強になります。
GitHubのソースコードも公開されています。
Flutter package の作り方とPub devへの公開の仕方
Flutterのパッケージの作り方、リリースの仕方について解説された記事です。
パッケージでアプリを細分化したい、パッケージを作りたい、 そんな時に有用な記事かと思います。
FlutterレアWidgets選
約3年間Flutterを触ってきた人の目線で、 ちょっとレアなWidgetをたくさん紹介している記事です。
codepenで使い方が書かれており、 記事中で実際に触って見ることができます。
Flutterに関する動画
Flutter RichText and TextSpan | Powerful Widgets
RichText と TextSpanの使い方についての解説動画です。
サブタイトル付きのタイトルなど、 ちょっと凝ったテキストを簡単に
2分くらいで、サクッと使い方を学ぶことができます。
Native + Animated Splash Screen | Flutter Tutorial [2022]
flutter_native_splashを使ったスプラッシュスクリーンの ダークモード対応の方法と、 アニメーション付きのスプラッシュスクリーンの 実装方法についての解説動画です。
概要欄からソースコードを見ることが可能です。
Animation for Page Loading or Network Request Flutter
flutter_spinkitを使っておしゃれなローディング画面を作成しよう、という解説動画です。
シミュレータで実装例を示していて、 動画でそれぞれのアニメーションがわかりやすく解説されています。
Flutter大学の動画
2022年最新【初心者向け超入門】M1 MacでFlutterの環境構築
2022年最新版の、M1 MacでのFlutter環境構築の仕方についての解説動画が追加されました。
M1 Macでは一部追加の対応が必要となります。 そこも含めて、全体の流れをわかりやすく解説しています。
これからFlutterを始める方にはかなり助かる動画となっています。 ぜひご覧ください！
Flutter大学メンバーによる記事
今週Flutter大学メンバーが書いたFlutter関連の記事を紹介します。
【Flutter】Looking up a deactivated widget’s ancestor〜をBuilderで解決した
AlertDialogを使用した際のエラーの解消方法についての記事です。
発生状況から、発生事象、解消方法、なぜ解消したのかの考察と、 丁寧に解説されています。
【Flutter】Serverpodをちょっとだけ触ってみた
先週話題となったServerpodを早速使ってみて解説した記事です。
導入の方法から最初の実行まで、スクリーンショット付きで詳細に解説されています。
【Flutter】CodemagicでAndroidのbuildに失敗するので対応した
google-services.jsonをGitHubに公開していないがために起こる、 Codemagicのビルドエラーに対する対処法の記事です。
CI/CDではよく起こる事象かと思いますが、 スクリーンショット付きで丁寧に対処法について解説されています。
Flexible と Expanded って何が違うんだっけ？
同じように思えるFlexibleとExpanded、 実際のところ何が違うのかについて解説した記事です。
触って確かめられるサンプルコード付きで詳しく解説されています。
【入門】FlutterでDeepLinkを実装してみよう。
WebサイトでTwitterのリンクを触ると、Twitterのアプリが開く、 そんなリンクをDeepLinkと言います。
このDeepLinkをFlutterにて実装するにはどうすればいいか、という解説記事です。
この記事の内容について、 3/16 (水) 21:00 にFlutter 大学内で行われる共同勉強会にて 筆者のまつまるさんが解説されます。
勉強会の参加、アーカイブ動画の閲覧はFlutter大学メンバーのみ可能となっています。 Flutter大学への入会は以下リンクから。
Dart Data Classって最強♡
データクラスとして持っていると便利なCopyWithなどのメソッドを、 コマンド一つで実装してくれるAndroid Studio のプラグイン、 Dart Data Classについて解説した記事です。
導入方法から使い方まで、簡潔にわかりやすく解説されています。
週刊Flutter大学の記事
週刊Flutter大学で先週アップロードした記事を紹介します。
まとめ
本記事ではFlutterニュースとして、2022年3月第2週に話題になったFlutter関連の情報や、 アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
Flutterを一緒に学んでみませんか？ Flutter エンジニアに特化した学習コミュニティ、Flutter大学への入会は、 以下の画像リンクから。
編集後記（2022/3/14）
先週話題になったこととして、 「宣言的UIでMVVMを使うのは良いか？」 という話がありました。
同じく宣言的UIであるFlutterだとどうなのか、簡単に話そうと思います。 （あくまで個人の見解です。）
この話は、Stateful Widgetで書けば簡単に書けるものを、 何でもかんでもStateless Widget + 状態管理手法で書くのって、 本当に「良い」んだっけ、ということだと思っています。
宣言的 UI では、 UI = f(state)と書かれるように、
状態に応じてView（UI）を表現します。
View が 状態を持っている、Stateful Widgetのイメージです。
一方でMVVMでは状態をViewModelが持っていて、 状態の変化をViewに伝える、というアーキテクチャだと理解しています。
宣言的UIをMVVMで書く、ということは、 Viewが状態として持っていたものをわざわざ分けて、ViewModelに持たせる、ということです。
flutterでいうと、状態に応じてUIを変えるStateful Widgetで書かれたコードを、 Stateless Widget + 状態に分けて書く、ということだと思っています。
もちろん、状態を分けて書くメリットもあるので、 どちらが良いとは言えないと思いますが、 個人的には画面内で完結する状態 (カウンターアプリの_counterとか、スイッチオンオフのフラグとか) がある場合は無理に分けず、StatefulWidgetで書く方が好きです。
あなたはどう思いますか？ 私のTwitter 等であなたの意見を聞かせてもらえると嬉しいです。 面白い議題だと思うので、ぜひ考えてみてください。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。 記事の更新情報はFlutter大学Twitterにて告知します。
