![](https://blog.flutteruniv.com/wp-content/themes/cocoon-master/images/man.png)
Flutterの最新情報をキャッチアップしたい!
そんなあなたに送る、Flutterニュース。
本記事ではFlutterニュースとして、2022年3月第2週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
- Flutter公式情報
- Flutterに関する話題
- Flutterに関する記事
- Flutterでのstreamとfutureの違いって?
- Dart/Flutterで一番早いローカルデータベースパッケージは何?
- 一年間更新しなかった後のFlutterの話
- Flutter Riverpod 情報:FutureBuilderやStreamBuilderより、RiverpodのAsyncValueを使おう!
- Flutter と Websocketsを使ったリアルタイムデータ受信、送信の実装方法
- Flutter Does That – An Overview of Flutter Widgets (A Series)
- Almost Netflix: Flutter + Appwriteで Netflixのクローンを作ろう
- Flutter package の作り方とPub devへの公開の仕方
- FlutterレアWidgets選
- Flutterに関する動画
- Flutter大学の動画
- Flutter大学メンバーによる記事
- 週刊Flutter大学の記事
- まとめ
- 編集後記(2022/3/14)
Flutter公式情報
FlutterPuzzleHack 締切迫る
1月より開催されていたFlutterのアプリコンテスト、
FlutterPuzzleHackの締切が間近となりました。
締切は【日本時間 3/15 7:00 AMまで 】となっています。
公開投票も3月から行われるようです。
Flutterに関する話題
Appwrite v0.13 リリース
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/0d6800d14b6f43db56adf84e983c5bc9.png)
Firebaseの代替手段としてのオープンソースのプロジェクト、
Appwriteの v0.13がリリースされました。
FlutterのSDKも用意されており、今後外部データベースの選択肢となるかもしれません。
アニメーション付きのListViewやGrid View を実装できるパッケージ、shaky_animated_listview
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/4fda6f6796207200e0c068c2797197f0.png)
アニメーション付きのListViewやGrid View を実装できるパッケージ、
shaky_animated_listviewが話題となりました。
パッケージページにgif画像付きでアニメーションが紹介されています。
Flutterに関する記事
Flutterでのstreamとfutureの違いって?
![](https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1646590179961%2Fk3CSfbib9.png%3Fw%3D1200%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng)
Stream と Future について、違いは何かを解説した記事です。
Stream と Future それぞれの解説も載っています。
この記事を参考にして週刊Flutter大学でも以下の記事を書いています。
合わせてご確認ください。
Dart/Flutterで一番早いローカルデータベースパッケージは何?
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/3aedf06a741be581d98006d0907866a9.jpeg)
Flutterのlocal Database として何を使うのが良いのか?という記事です。
この記事では性能の良いパッケージとして、主にObjectBoxの紹介がされています。
簡単な使い方から、データのブラウザでの可視化についてまで解説されていました。
一年間更新しなかった後のFlutterの話
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b0db0ecd17626be534599bf777e3cc10.png)
要約すると、
「約一年間放置したFlutterのプロジェクトをアップデートしたけど、
とても楽にアップデートできた」
という記事です。
null safety だったりパッケージのアップデートに対応した様子が体験談として綴られています。
Flutter Riverpod 情報:FutureBuilderやStreamBuilderより、RiverpodのAsyncValueを使おう!
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/2f45cb8119323a8056fdefbde5d2cddc.png)
FutureBuilder や StreamBilderを使うより、
Riverpod の AsyncValue使った方が良い、
という記事です。
AsyncValueではerror や loading などの状態を、
明示的にコントロールできるのが強みです。
コードの比較画像もあり、わかりやすく解説されています。
Flutter と Websocketsを使ったリアルタイムデータ受信、送信の実装方法
![](https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1646749547741%2FfTQP8TpvQ.png%3Fw%3D1200%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng)
Flutter と Websocketsを使ってリアルタイムデータ通信を実装しよう、という記事です。
サーバーにデータを投げ、サーバーのデータ状況を取得し、表示する、
という実装方法を紹介しています。
ダミーサーバーも紹介されており、
簡単に実装の練習ができます。
Flutter Does That – An Overview of Flutter Widgets (A Series)
Redit上でFlutter の Widgetについて解説したスレッドです。
Stateful Widget と Stateless Widgetについて、
要点まとめて説明されています。
Almost Netflix: Flutter + Appwriteで Netflixのクローンを作ろう
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b6071e633d2a32a356deae9ead0a37ff.png)
FlutterとオープンソースのバックエンドサービスのAppwriteを使って、
Netflixアプリのクローンを作ろう!という記事です。
状態管理手法としてProviderが使われていたり、
shared_preferenceやadaptive_dialogが使用されていたりと、
かなり勉強になります。
GitHubのソースコードも公開されています。
Flutter package の作り方とPub devへの公開の仕方
![](https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1646975457705%2Fij_M6l7j5.png%3Fw%3D1200%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng)
Flutterのパッケージの作り方、リリースの仕方について解説された記事です。
パッケージでアプリを細分化したい、パッケージを作りたい、
そんな時に有用な記事かと思います。
FlutterレアWidgets選
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/349c7055b3627b71460b25703ebfe81e.png)
約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で解決した
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/d8ff290bf58aaa1047bd4877c33adc54.png)
AlertDialogを使用した際のエラーの解消方法についての記事です。
発生状況から、発生事象、解消方法、なぜ解消したのかの考察と、
丁寧に解説されています。
【Flutter】Serverpodをちょっとだけ触ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/24d83d947eb970a742595d884f776dc7.png)
先週話題となったServerpodを早速使ってみて解説した記事です。
導入の方法から最初の実行まで、スクリーンショット付きで詳細に解説されています。
【Flutter】CodemagicでAndroidのbuildに失敗するので対応した
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/c96e86a1e313e2031c4798fe892ea5fd.png)
google-services.jsonをGitHubに公開していないがために起こる、
Codemagicのビルドエラーに対する対処法の記事です。
CI/CDではよく起こる事象かと思いますが、
スクリーンショット付きで丁寧に対処法について解説されています。
Flexible と Expanded って何が違うんだっけ?
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/2b3f83cba7346594180e68ecd328852e.png)
同じように思えるFlexibleとExpanded、
実際のところ何が違うのかについて解説した記事です。
触って確かめられるサンプルコード付きで詳しく解説されています。
【入門】FlutterでDeepLinkを実装してみよう。
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/79f4a1ba4972fb2fc3acf955180f9ab2.png)
WebサイトでTwitterのリンクを触ると、Twitterのアプリが開く、
そんなリンクをDeepLinkと言います。
このDeepLinkをFlutterにて実装するにはどうすればいいか、という解説記事です。
Dart Data Classって最強♡
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/f93f394879272e5b30e499f3b70534b0.png)
データクラスとして持っていると便利なCopyWithなどのメソッドを、
コマンド一つで実装してくれるAndroid Studio のプラグイン、
Dart Data Classについて解説した記事です。
導入方法から使い方まで、簡潔にわかりやすく解説されています。
週刊Flutter大学の記事
週刊Flutter大学で先週アップロードした記事を紹介します。
まとめ
![](https://blog.flutteruniv.com/wp-content/uploads/2022/03/新聞-1024x683.jpeg)
本記事ではFlutterニュースとして、2022年3月第2週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/3/14)
先週話題になったこととして、
「宣言的UIでMVVMを使うのは良いか?」
という話がありました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJThDU3dpZnRVSSVFMyU4MSVBN01WVk0lRTMlODIlOTIlRTYlOEUlQTElRTclOTQlQTglRTMlODElOTklRTMlODIlOEIlRTMlODElQUUlRTMlODElQUYlRTYlQUQlQTIlRTMlODIlODElRTMlODIlODglRTMlODElODYlRTMlODAlOEQlRTMlODElQTglRTYlODAlOUQlRTMlODElODQlRTglODclQjMlRTMlODElQTMlRTMlODElOUYlRTclOTAlODYlRTclOTQlQjEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTUwMzlmOWU1MjIxNjBiZDIwODExZmU1YjgxOGRmNTgx&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwa2FyYW1hZ2UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTIxNWI5MzY5NTk3ZTU3MGE1OGZkOWFkOWQzZTlhZWQ2&blend-x=142&blend-y=491&blend-mode=normal&s=1c6821da6e5ac6ddaf95963f7c3f177c)
同じく宣言的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 等であなたの意見を聞かせてもらえると嬉しいです。
面白い議題だと思うので、ぜひ考えてみてください。