Flutterの最新情報をキャッチアップしたい!
そんなあなたに送る、 Flutterニュース 。
本記事ではFlutterニュースとして、2022年12月第2週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
Flutter公式情報
NavigationBar(今週のウィジェット)
Flutter 公式による ウィジェット紹介動画シリーズ、Widget of the Week の
最新動画がアップロードされました。
今回はMaterial 3 のデザインのBottomNavigationBar
を実装できる、NavigationBar
ウィジェットの紹介動画となっています。
Dart + Postgres – Observable Flutter
Observable<Flutter>と題した、Flutterに関するライブコーディングのアーカイブ動画です。
前回 に続いて、Dart Frog を使ったサーバーサイドアプリでの、
Postgres 接続のハンドリングの向上をテーマとしたライブコーディングとなっています。
The road to Dart 3,完全なsound null safe な言語
Dart の次のメジャーアップデートであるDart 3 で追加される要素や展開について書かれた記事です。
null safety でないコードのサポートの廃止についての解説と、
2023年中頃のstable リリースまでの展開等が書かれています。
2つの開発端末で、6つのプラットフォームをサポート
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/c583f6cd2c8d2caff7d01ef8e715344d.jpeg)
Flutter がサポートする6つのプラットフォーム全てに対して開発を行うために、
どのような開発端末を用意すべきか、という内容について解説された記事です。
macOSとWindowsの開発端末それぞれが、
どのプラットフォームに対しサポートしているかを紹介しています。
Flutter Q3 2022 調査結果
Flutterに関する満足度等のユーザー調査結果についてまとめられた記事です。
満足度の調査結果に加えて、
Firebase SDK に対してどのような問題に直面したか?等の質問の調査結果がまとめられています。
Flutterに関する話題
Flutter Graphite パッケージ
Flutter でデータ構造等のグラフを実装するのに有用なパッケージ、
Graphite パッケージがRedditで話題となっていました。
こちらから作成例のGIFをみることが可能です。
MMAS : Money Tracker
App Store で5,000 ダウンロード以上を記録したオープンソースの家計簿アプリ、
MMASがRedditで話題となっていました。
Flutterで、Firebase や Providerを用いて作成されているとのことです。
Flutterベースのターミナル、 Wives
Flutter で作られたターミナル、Wives がRedditで話題となっていました。
こちらからソースコードや使用感の画像を見ることができます。
Flutter のボイラープレートプロジェクトと、Mediumのチュートリアル
Flutterでのクリーンアーキテクチャに沿ったアプリケーションの作成方法について、
サンプルコードとチュートリアル記事を紹介した投稿がRedditで話題となっていました。
flutter_bloc や auto_routeを用いて作成がなされているとのことです。
auth0_flutter2 パッケージ
Auth0 をアプリに統合するのに有用なパッケージ、
auth0_flutter2 パッケージがRedditで話題となっていました。
作成者によると、モバイル、Web の両者に唯一対応しているAuth0パッケージとのことです。
Flutterに関する記事
FlutterのMaterialAppでCupertinoTabViewっぽく遷移するボトムナビゲーションを作ったよ
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Rmx1dHRlciVFMyU4MSVBRU1hdGVyaWFsQXBwJUUzJTgxJUE3Q3VwZXJ0aW5vVGFiVmlldyVFMyU4MSVBMyVFMyU4MSVCRCVFMyU4MSU4RiVFOSU4MSVCNyVFNyVBNyVCQiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MyU5QyVFMyU4MyU4OCVFMyU4MyVBMCVFMyU4MyU4QSVFMyU4MyU5MyVFMyU4MiVCMiVFMyU4MyVCQyVFMyU4MiVCNyVFMyU4MyVBNyVFMyU4MyVCMyVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MiU4OCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGM0ZjFiZWNhNGQ4NjliYTcwODYzOWE0ODE2YmMwMDE&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGlfa2F3YW5vJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMmU1YjVlMjU2YTkzMjExZTVmYjQ5MzBkM2Q2ZGIxNA&blend-x=142&blend-y=491&blend-mode=normal&s=8fbd333a82e3fa7bc333afcb0dd8447c)
BottomNavigationBarを残したまま画面遷移を行う方法について書かれた記事です。
Stack とOffstageを用いた方法が紹介されています。
Flutter の環境分けの新時代
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/abdd170a8c7d96247cf7739c431c0881.png)
Flutter でのdevやprod 等の環境分けの方法について紹介された記事です。
現在master チャンネルで開発が進んでいる手法について紹介がされています。
初学者のためのFlutter学習コース2022
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b61efc39e30018b38ccb6f5392d69798.png)
初学者がFlutterを学び始めるに当たっての心構えや参考にすべきサイト等について
まとめられた記事です。
環境設定からFlutterの内部の処理に至るまで、学ぶべき情報がまとめられています。
衝突検知と追加のノウハウでFlameを32倍速くする
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/be7506333fca8a4ea8e4692696a705b2.png)
Flame 1.4 からの衝突検知に関するアルゴリズムについて紹介された記事です。
Quad tree を利用したアルゴリズムになっている、と紹介がされています。
Flutterに関する動画
Floffee – Flutter Coffee App
Flutter で作られたコーヒー注文用アプリに関する動画がRedditで話題となっていました。
音声入力、認識機能が実装されており、
声による注文が可能となっています。
Flutter大学メンバーによる記事
MySQL8Quickを修正する
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TXlTUUw4UXVpY2slRTMlODIlOTIlRTQlQkYlQUUlRTYlQUQlQTMlRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTAxYzkyOTFjODRmMmU2NTRhMTAzZjU1NWQyMDhkODEw&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=b6703e23e7a8814813223e9a4b3a999c)
MySQL8Quick という作成したアプリのその後について書かれた記事です。
Youtubeのコメントでの指摘に対しての対応内容が書かれています。
【Flutter Widget of the Week #30】ValueListenableBuilderを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/2852e3b2eb7b77957e4fc5b2a0b54c5e.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回は管理する値の変化を監視し、変化があった場合に画面の再構築を行う、ValueListenableBuilder
についての解説記事となっています。
【Flutter Widget of the Week #31】Draggableを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/2852e3b2eb7b77957e4fc5b2a0b54c5e.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はウィジェットをドラッグ可能にする、Draggable
についての解説記事となっています。
Flutter大学アドベントカレンダーの記事
Flutter大学アドベントカレンダー 2022に投稿された記事を紹介します。
.familyについて学んでみた!
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9LmZhbWlseSVFMyU4MSVBQiVFMyU4MSVBNCVFMyU4MSU4NCVFMyU4MSVBNiVFNSVBRCVBNiVFMyU4MiU5MyVFMyU4MSVBNyVFMyU4MSVCRiVFMyU4MSU5RiUyMSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9Y2Q5YjhhNTE5NmM1Y2VmZWFjNjczMDhhOWNjNzRhNzc&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwSnVuaWNoaUhhc2hpbW90byZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGQ3YzBjNjViNzk3OGQwOGM3MmQxNjRhOTUyMDhiNjQ&blend-x=142&blend-y=491&blend-mode=normal&s=524898de59fccb6def74e51d3e2694a5)
Flutter 、Riverpod のProvider
に対する修飾子であるfamily
について書かれた記事です。
主にサンプルコードにてfamily
でのProvider
利用を行っています。
【Flutter × RevenueCat】Androidでアプリ内課金(消耗型)の導入 -準備編-
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/fd9c46f3daca870d15e14a39246a2436.png)
課金機能導入をサポートするプラットフォームのRevenueCat を使ったアプリを
作成するための準備について書かれた記事です。
この記事ではAndroid 向けの準備について紹介されています。
【Flutter✖️UIデザイン】 Tabbarデザインのあれこれ
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwRmx1dHRlciVFMiU5QyU5NiVFRiVCOCU4RlVJJUUzJTgzJTg3JUUzJTgyJUI2JUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgwJTkxJTIwVGFiYmFyJUUzJTgzJTg3JUUzJTgyJUI2JUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgxJUFFJUUzJTgxJTgyJUUzJTgyJThDJUUzJTgxJTkzJUUzJTgyJThDJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz1lMTY4YWVmYjE3OThmZTQ3ZDYwODA3Y2IzNTg5OGMyZA&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwSGlrYXJ1S3VzYW5hZ2kmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWM1Mzc4NDA1N2Q3ODI5ZjE2NTBlZmFjNjllMzhlODVh&blend-x=142&blend-y=491&blend-mode=normal&s=b5801bb9270299111a970aa70ae87319)
TabBar ウィジェットの各プロパティについて、
設定することでどのような変化があるか紹介した記事です。
各プロパティの設定による変化をGIF付きで紹介されています。
Riverpod(2.0対応)を学んで初学者の壁をぶち破る
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Uml2ZXJwb2QlRTMlODIlOTIlRTUlQUQlQTYlRTMlODIlOTMlRTMlODElQTclRTUlODglOUQlRTUlQUQlQTYlRTglODAlODUlRTMlODElQUUlRTUlQTMlODElRTMlODIlOTIlRTMlODElQjYlRTMlODElQTElRTclQTAlQjQlRTMlODIlOEImdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPTI0YWUxYTVmNGE5ZWY5MjFjMzQwZDQyYjQ5YjFjMDRh&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFpc2VpX2RldiZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTZhMTliMzNkMjE1MzM5ZGFiZjdkOGFmMTBjZTEyYjY&blend-x=142&blend-y=491&blend-mode=normal&s=ba649a63321079b7455074bbd4fe5bc5)
Riverpod 2.0 の使い方について、API通信を行うアプリを題材に解説を行った記事です。
基本的な使い方からRiverpod Generatorを用いたコード生成についても紹介がされています。
Flutter大学の2年間で得られたもの
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Rmx1dHRlciVFNSVBNCVBNyVFNSVBRCVBNiVFMyU4MSVBRTIlRTUlQjklQjQlRTklOTYlOTMlRTMlODElQTclRTUlQkUlOTclRTMlODIlODklRTMlODIlOEMlRTMlODElOUYlRTMlODIlODIlRTMlODElQUUmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPTUyMTFmZjk4NzM0MWJlOGE0ZjE4NjBjODdjNGFmZTk5&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbmFva2l3YWthdGEmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg2ZmRkMGY0ZDhiZjkyOTU3ZWZjZjJmN2I0NWM1ZWNi&blend-x=142&blend-y=491&blend-mode=normal&s=23f390e19d1c8b47e1bf1f5841caa6e4)
大学院生の筆者がFlutter大学に2年間在籍して得られた経験について書かれた記事です。
2年間で経験した個人開発や実務、インターン等について経験談が語られています。
沖縄で地域クーポンが使えるお店をGoogleマップで表示するために無理やりdartでスクレイピングをしてみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b9ea66a0a80c7bcfd2ae6be1ce7b20f5.png)
Dartでのスクレイピングを活用した
沖縄で地域クーポンが使えるお店をGoogleマップで表示の方法について書かれた記事です。
実装のコードや、作成したGoogleマップが記事内で紹介されています。
Figmaで定義したdesign tokenをFlutterで利用する
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/da3eea38e222b3ca722d966aa4bac6ad.png)
デザインツールであるFigma上で定義したカラーの定数等のdesign tokenを、
Flutterで利用する方法について書かれた記事です。
tokenのダウンロード方法やdartファイルへの変換方法等が
スクリーンショット付きで解説されています。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年12月第2週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/12/12)
今週のFlutter ニュースでした。
Dart 3に関する記事は、ワクワクする話題でしたね。
Stable のリリースが2023年中頃、と明言されたのも、
インパクトが強かったです。
記事内では同時にリリース予定の機能等についても触れられており、
今後の発展にワクワクしていました。
この記事を要約した記事を出すのもいいかもしれませんね。
気になる方は、ぜひ読んでみてください。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。