「Flutterの最新情報をキャッチアップしたい!」
そんなあなたに送る、 Flutterニュース 。
本記事ではFlutterニュースとして、2022年10月第4週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
- Flutter公式情報
- Flutterに関する話題
- Flutterに関する記事
- Flutterに関する動画
- Flutter大学メンバーによる記事
- 初心者 flutter_unity_widget 2022.2.0のpub.devを読む
- 【Flutter Web】Javascriptを呼び出す (packages:js)
- [Flutter] 縦横スクロールできる表を作る
- 【Flutter】なぜウィジェットの import 先に「material.dart」を選ぶのか
- 【Flutter Widget of the Week #15】InheritedModelを使ってみた
- 【Flutter Widget of the Week #16】ClipRRectを使ってみた
- 【Flutter Widget of the Week #17】Heroを使ってみた
- 仙人「弟子よ。Firestoreからランダムなドキュメントを取得することはできるかの?」
- 週刊Flutter大学の記事
- まとめ
- 編集後記(2022/10/24)
Flutter公式情報
Flutter 3.3.5 リリース!
Flutter のstable チャンネルにて、Flutter 3.3.5がリリースされました。
Hotfixes一覧によると今回のリリースでの修正点は以下となります。
FadeInImage
でキャッシュされた画像からキャッシュされていない画像に切り替えた時にアプリがクラッシュする不具合の修正- post-submit のビルドとデプロイメントのドキュメントの移動
- 絵文字と韓国語の組み合わせでアプリがクラッシュする問題の修正
- Web アプリをデバック時誤ったエラーが表示される問題の修正
Flutterに関する話題
Flutter Smooth
Flutterでリスト等をよりスムーズにスクロールできるようにするパッケージ、
flutter_smoothについての投稿がRedditで話題となっていました。
こちらにて比較動画等詳細を見ることが可能となっています。
Flutter Web で作成されたポートフォリオ ウェブサイト
Flutter Web で作成されたポートフォリオとしてのWeb サイトとソースコードの紹介記事です。
Web サイトでは筆者が作成したアプリの一覧を見ることができます。
Dart のためのInteractive Shell (REPL)
シェル上で入力したDartのコードを実行する等ができるソフトウェアが
Redditで話題となっていました。
GitHub内のREADME にて実行例等を見ることができます。
calendar_day_view パッケージ
日の予定表を作成するのに有用なパッケージ、calendar_day_view パッケージについての投稿が
Redditで話題となっていました。
pub.dev のパッケージ紹介ページにて使用例の画像を見ることが可能です。
プロフィール画像の重ね合わせサンプル
コインの形で表示されたプロフィール画像を重ね合わせ、
追加や削除のアニメーションを実装したサンプルプロジェクトがRedditで話題となっていました。
リンク先の動画にて、実装結果のアニメーションを見ることができます。
Flutter/Flutter Web で作られた シンプルなお絵かきアプリ
Flutter / Flutter Web で作成されたシンプルなお絵かきアプリのリポジトリが
Redditで話題となっていました。
リンク先の”Link to Demo”からデモアプリを触って確認することができます。
RxDB の Flutter での使い方
データベースである RxDB を Flutter で扱うための方法について書かれたREADMEが、
Reddit で話題となっていました。
今後、Example内でサンプルアプリも作成される模様です。
Flutterに関する記事
Dr.Riverpod : どのようにして状態管理についての不安を解消し愛するようになったか | Codemadic Blog
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/28144513f416f7dad29a492665f9711a.png)
Flutter の状態管理手法の変遷の歴史から、
筆者の状態管理手法の選定の理由について書かれた記事です。
記事内では、状態管理手法の Pub.devでのLike 数ランキング等が紹介されています。
Flutter Rivepod Generator でのProviderの自動生成方法
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/72825d55d09f787edc3a3ca1ba679bd6.png)
状態管理フレームワーク Riverpod で利用するProvider を
パッケージを利用して自動生成する方法について書かれた記事です。
build_runner
での自動生成にてProvider
を自動生成することができます。
ガラスが割れるようなアニメーションの実装方法
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/505679976c634acc81f39931ad3eae68.gif)
正方形のパネルが、ガラスが割れるように割れ散るアニメーションの実装方法について
解説された記事です。
記事内のGIFで実装内容のアニメーションを見ることができます。
2022年 10月のニュースまとめ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/e62658dabca2f6666ab69a372469f17d.png)
2022年10月に起きた出来事についてまとめて紹介している記事です。
Isar 3.0 のリリースやRiverpod 2.0 のリリースの他、筆者の作成した記事等が紹介されています。
Flutterに関する動画
Reddi のクローンアプリ作成チュートリアル
Reddit のクローンアプリを作成するチュートリアル動画がRedditにて話題となっていました。
Flutter, Firebase, Riverpod 2.0 を利用して作成したチュートリアルとなっています。
Apple Watch + Flutter = No Problem! | FlutterVikings 2022
Apple Watch とFlutterの組み合わせについてのFlutter Vikings の講演の切り抜き動画です。
実装方法やスマホとの連携方法等が紹介されています。
Flutter大学メンバーによる記事
初心者 flutter_unity_widget 2022.2.0のpub.devを読む
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JTIwZmx1dHRlcl91bml0eV93aWRnZXQlMjAyMDIyLjIuMCVFMyU4MSVBRXB1Yi5kZXYlRTMlODIlOTIlRTglQUElQUQlRTMlODIlODAlMjAlRUYlQkMlOTEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVhYTNlMDgzMWQ0N2RkYWY2OWZhN2YyMmUyMWRlNjI4&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=bc847f52d09d2c01719c063941ba0a72)
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JTIwZmx1dHRlcl91bml0eV93aWRnZXQlMjAyMDIyLjIuMCVFMyU4MSVBRXB1Yi5kZXYlRTMlODIlOTIlRTglQUElQUQlRTMlODIlODAlMjAlRUYlQkMlOTImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTgzMzU5YzZlNDEwODgwNzk0NjBkZjQ4OTMxOGMzMzlk&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=17dde55e42122f4ef83af8f319faf104)
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JTIwZmx1dHRlcl91bml0eV93aWRnZXQlMjAyMDIyLjIuMCVFMyU4MSVBRXB1Yi5kZXYlRTMlODIlOTIlRTglQUElQUQlRTMlODIlODAlMjAlRUYlQkMlOTMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRjYzc3MjU4ZjQzNDM2MjViYTIxMzIzZmE3NWZkNDIy&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=99811801954400fa965f6575651f9ee9)
Flutter x Unity でのアプリ作成に挑戦している体験談について書かれた記事です。
flutter_unity_widget パッケージのドキュメントを読み解くことで、
Flutter x Unityのアプリの実装に挑戦しています。
【Flutter Web】Javascriptを呼び出す (packages:js)
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwRmx1dHRlciUyMFdlYiVFMyU4MCU5MUphdmFzY3JpcHQlRTMlODIlOTIlRTUlOTElQkMlRTMlODElQjMlRTUlODclQkElRTMlODElOTklMjAlMjhwYWNrYWdlcyUzQWpzJTI5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xNWRhM2UzOGQ0MWJkMzlmNzliYTYwZWM1ZWY4N2Q3ZA&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGV5aGV5MTAyOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjVhYTM5ZDMwNWFmY2YwNWNhNDhlNjhlMzZmMjY1OWU&blend-x=142&blend-y=491&blend-mode=normal&s=39ff6d3e67849efe9e27e9e4f0535141)
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/4f7f26760fbf232c7a5121dd083cc9ce.png)
Flutter Web で javascript のコードを呼び出す方法について書かれた記事です。
外部のjsライブラリを呼び出す方法についても記載がされています。
こちらの記事について英語版の記事も作成されています。
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/3490702513959e3585bf7f6417b6ab20.gif)
[Flutter] 縦横スクロールできる表を作る
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRmx1dHRlciU1RCUyMCVFNyVCOCVBNiVFNiVBOCVBQSVFMyU4MiVCOSVFMyU4MiVBRiVFMyU4MyVBRCVFMyU4MyVCQyVFMyU4MyVBQiVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QiVFOCVBMSVBOCVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2I2OTgxNmY4MzdlYjUwZjVmYzdjNGZiNmE0YWVhYTI&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2lsYWxhYnUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY0ZjVmZGNmYzdlYjBmNzYxNGZkNzVhMzhhOTJiZWM4&blend-x=142&blend-y=491&blend-mode=normal&s=b7f1eaa50d0b605076cdd1f2f2e5864c)
Flutter での縦横スクロールできる表の作り方について解説されている記事です。
シンプルな設定方法とTable
との組み合わせについて紹介されています。
【Flutter】なぜウィジェットの import 先に「material.dart」を選ぶのか
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/d364ff24c464abe57015e1071204f40a.png)
Flutterのウィジェットをインポートする際に選ぶmaterial.dart
について、
その選択理由を深堀りした記事です。
図を用いて、選択理由について詳細に解説されています。
【Flutter Widget of the Week #15】InheritedModelを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/5eaa0f4060a283f6cdf037f953eca670.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はInheritedModel
についての解説記事となっています。
【Flutter Widget of the Week #16】ClipRRectを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b11bcea6244ed23fcf88fbca498cb7b9.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はClipRRect
についての解説記事となっています。
【Flutter Widget of the Week #17】Heroを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/a8ca96224266baaea678017ed65ff042.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はHero
についての解説記事となっています。
仙人「弟子よ。Firestoreからランダムなドキュメントを取得することはできるかの?」
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/f545835f2cb232416c232769fbcc63a1.png)
Firestore からランダムなドキュメントを取得する方法について書かれた記事です。
全県取得する方法ではないランダムなドキュメントを取得する方法について紹介されています。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年10月第4週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/10/24)
今週のFlutter ニュースの記事でした。
今週紹介した内容の中で、Apple Watch との組み合わせの動画がとても興味深かったです。
最近 Google もPixel Watch を リリースしましたし、
腕時計型デバイスはどんどん使う人が増えていくものだと思っています。
Flutter で腕時計型デバイスも同時開発できる、となったら、
Flutterの需要は一気に高まるのではないでしょうか。
今後のFlutter の公式サポートの動向に期待ですね。
しっかりと “Watch” していこうと思います。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。