『Flutterの最新情報をキャッチアップしたい!』
そんなあなたに送る、 Flutterニュース 。
本記事ではFlutterニュースとして、2022年9月第5週〜10月第1週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
- Flutter公式情報
- Flutterに関する話題
- Flutterに関する記事
- Flutter大学メンバーによる記事
- 『超簡単』FlutterとFirebaseと接続してみる
- 『自分用』Flutter入門 Providerの使い方
- 『コピペで簡単』Flutter✖️Firebase メール認証してみよう!
- The Non-Designer’s Color Schemes
- Flutterでメモアプリを作る!!
- FlutterWebでjavaScript関数を呼び出す
- 【Flutter Widget of the Week #6】FutureBuilderを使ってみた
- 【Flutter Widget of the Week #7】FadeTransitionを使ってみた
- 【Flutter Widget of the Week #8】FloatingActionButtonを使ってみた
- 週刊Flutter大学の記事
- まとめ
- 編集後記(2022/10/3)
Flutter公式情報
Flutter 3.3.3 リリース!
Flutter のstable チャンネルにて、Flutter 3.3.3がリリースされました。
Hotfixes一覧によると今回のリリースでの修正点は以下となります。
- Xcode 14の iOS pod bundle resourcesのサインインエラー “Signing for “x” requires a development team.” の修正
- AnimatedContainer / Containerのheightを0に設定するとアプリがクラッシュし、
uncaught exception となる現象の修正 - Flutter tools で ShaderCompilerException が発生する問題の修正
- TextField で テキストを選択しようとするとjava.lang.AssertionError でアプリがクラッシュする問題の修正
- セキュリティ脆弱性の改善
- 不正なsuper パラメータの利用が含まれる場合に、シンタックスエラーとしてレポートされずにクラッシュする問題の修正
pay プラグインのアップデート
Flutter 公式により、Pay プラグインのアップデートが紹介されました。
このアップデートで、Google Pay に対応したとのことです。
Actions 今週のウィジェット
Flutter 公式による ウィジェット紹介動画シリーズ、Widget of the Week の
最新動画がアップロードされました。
3週にわたってキーボードショートカットの実装について解説する中、
3週目の今週は、Actions
ウィジェットの紹介となります。
Flutterに関する話題
Riverpod バージョン 2.0 リリース!
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/485447331b3ae63a8bb37fc0715ba9e9.png)
Flutter の状態管理フレームワーク、Riverpod のバージョン2.0がリリースされました。
こちらのChangelog で変更点等を見ることができます。
flutter_anchorlable パッケージ
特定の位置まで自動でスクロールする機能を持ったウィジェット等を提供するパッケージ、
flutter_anchorlable パッケージがReddit で話題となっていました。
こちらのパッケージ紹介ページにて使用感のGIFを見ることができます。
live_activities プラグイン
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/485447331b3ae63a8bb37fc0715ba9e9.png)
iOSのActivityKit API を利用した、LiveActivity や Dynamic Island の機能の
実装をするためのプラグイン、live_activities プラグイン がRedditで話題となっていました。
こちらのプラグイン紹介ページにて使用感のGIFを見ることができます。
アニメーション付きドーナツ型グラフのサンプル
アニメーション付きのドーナツ型グラフのサンプルリポジトリが
Reddit で話題になっていました。
上記リンクのREADME にて、アプリの動作の動画を確認することができます。
Flutterに関する記事
【Flutter】アプリ全体のアーキテクチャを0から考えて作り直した話
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/36b77a6d2332342260ab3fa46ce5e5a3.png)
アプリのアーキテクチャの構成例についてまとめられた記事です。
ある要件を持ったプロジェクトに対してアプリのアーキテクチャをどうするべきか、
考え方と例がまとめられています。
ネスト化ルーティングでのBottomNavigationBar : GoRouter vs Beamer の比較
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/5f8a188437927a2d9a1ed166eac804d5.png)
BottomNavigationBar を残したまま画面遷移する方法について書かれた記事です。
GoRouter と Beamerパッケージそれぞれを使用して実装し、比較を行っています。
Flutter でFlameを用いて ピンポンゲームを作成する
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/310178d73d98d617cf64811560bea227.jpeg)
Flutter とゲームエンジンであるFlame を用いてピンポンゲーム(卓球ゲーム)を実装する方法について解説された記事です。
衝突検知の実装方法や対戦相手の動作の管理手法等がまとめられています。
動画メインのソーシャルアプリをFlutterで作成する:課題と対処法
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/394b0b34faca3b56073736d879fdedfb.png)
ソーシャルアプリのSpontyをFlutterで作成する最中に直面した課題と、対処法について書かれた記事です。
動画メインのソーシャルアプリを作成するにあたってのプラグイン選定の経緯等がまとめられています。
Flutter大学メンバーによる記事
『超簡単』FlutterとFirebaseと接続してみる
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgwJThFJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUUzJTgwJThGRmx1dHRlciVFMyU4MSVBOEZpcmViYXNlJUUzJTgxJUE4JUU2JThFJUE1JUU3JUI2JTlBJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hMTA2ZTg0ZWY2ZjJiZWI3NDU1NTcyZGMxNTE3ZWUxNA&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweXV0bzk2MzE1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MzJkMmM4YzE2ZDAxMmFjMzU3NGVhYzU3Nzg3MTQ2NA&blend-x=142&blend-y=491&blend-mode=normal&s=50cd972c4739811f92437a223a21e17b)
FlutterアプリとFirebase の接続方法についてまとめられた記事です。
接続に必要なコマンド等が端的にまとめられています。
『自分用』Flutter入門 Providerの使い方
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgwJThFJUU4JTg3JUFBJUU1JTg4JTg2JUU3JTk0JUE4JUUzJTgwJThGRmx1dHRlciVFNSU4NSVBNSVFOSU5NiU4MCVFMyU4MCU4MFByb3ZpZGVyJUUzJTgxJUFFJUU0JUJEJUJGJUUzJTgxJTg0JUU2JTk2JUI5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iN2JiOTE4MDU0ZGJmOTM3MTI2NmZlYTc3YWQ1NzgxYg&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweXV0bzk2MzE1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MzJkMmM4YzE2ZDAxMmFjMzU3NGVhYzU3Nzg3MTQ2NA&blend-x=142&blend-y=491&blend-mode=normal&s=3c1974688954487f02292b18bd9fc24c)
Flutter の状態管理パッケージ、Provider の使い方について解説された記事です。
ChangeNotifier
を利用した使い方について紹介されています。
『コピペで簡単』Flutter✖️Firebase メール認証してみよう!
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgwJThFJUUzJTgyJUIzJUUzJTgzJTk0JUUzJTgzJTlBJUUzJTgxJUE3JUU3JUIwJUExJUU1JThEJTk4JUUzJTgwJThGRmx1dHRlciVFMiU5QyU5NiVFRiVCOCU4RkZpcmViYXNlJTIwJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgzJUFCJUU4JUFBJThEJUU4JUE4JUJDJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJTg4JUUzJTgxJTg2JUVGJUJDJTgxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jNzI4MGQ1YmVlZjk5ZjdhNTAyYTVjMGQ0ZmE2MzE2OQ&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweXV0bzk2MzE1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02MzJkMmM4YzE2ZDAxMmFjMzU3NGVhYzU3Nzg3MTQ2NA&blend-x=142&blend-y=491&blend-mode=normal&s=07b6387b4d46894fc91309760295fd64)
Flutter と Firebase Auth でのメール認証の実装について紹介している記事です。
Providerとの組み合わせでサンプルコードが紹介されています。
The Non-Designer’s Color Schemes
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/ee616797821087db28e38a9096906c53.png)
アプリでの色の選択方法について書かれた記事です。
Material Designに則った色の選択方法について、
役立つサイト等が紹介されています。
Flutterでメモアプリを作る!!
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/e746d6b47a2bf8c5b33f720e14705ffa.png)
Flutter でメモアプリを作成した際のアーキテクチャ等を紹介された記事です。
システムの設計について図を用いて紹介がなされており、
構成におけるポイント等がまとめられています。
FlutterWebでjavaScript関数を呼び出す
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b448777123e7e7b9cdddde53f0b38084.png)
Flutter Web で JavaScriptの関数を呼び出す方法についてまとめられた記事です。
自作のjs関数を定義し、呼び出す方法について例がまとめられています。
【Flutter Widget of the Week #6】FutureBuilderを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/fd3188dd0470e00dca78650c87905f19.png)
Flutter 公式 の動画シリーズ, “Widget of the Week”で紹介されたウィジェットについて
解説している記事です。
今回はFutureBuilder
について、まとめられています。
【Flutter Widget of the Week #7】FadeTransitionを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/43c5f826fc90e9bf4b1df50e955322ea.png)
Widget of the Week で紹介された、FadeTransition
ウィジェットについてまとめられた記事です。
サンプルアプリの紹介や、ウィジェットの各プロパティの紹介がなされています。
【Flutter Widget of the Week #8】FloatingActionButtonを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/6218f3ca7617e16feb706bcde0b2529b.png)
FloatingActionButton
ウィジェットについてまとめられた記事です。
Material 3 での FloatingActionButton
について紹介されています。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年9月第5週〜10月第1週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/10/3)
今週のFlutterニュースの記事でした。
個人的に気になったのはFlameでのピンポンゲームの実装ですね。
Flame自体、一回チュートリアルをやったくらいで
ほとんど触ったことがないので、
是非一度アプリらしいアプリを作ってみたいと考えていました。
このピンポンゲームの記事は、実装もシンプルで作成するのに良い題材だな、
と感じました。
(確か、世界初のコンピューターゲームもピンポンゲームのようなものだったと
記憶しています。)
実際に作ってみた後、感想を編集後記やTwitterで紹介できればと思います!
ぜひお楽しみにしていてください!
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。