Flutterの最新情報をキャッチアップしたい!
そんなあなたに送る、 Flutterニュース 。
本記事ではFlutterニュースとして、2022年11月第5週 ~ 12月第1週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
Flutter公式情報
Flutter での状態管理
あるウィジェットから別の場所にあるウィジェットの状態を参照する、といった、
Flutterでの状態管理についての動画です。
状態管理の手法としてRiverpod を題材に、
チェックボックスのチェックに応じてProgressIndicatorの値を増減する方法が紹介されています。
Observable<Flutter> Code Sharing & Postgres – Craig による ライブコーディング
Observable<Flutter>として始まったFlutterに関するライブコーディングのアーカイブ動画です。
フルスタックなDart のアプリケーションで、クライアントとサーバーでコードを共有する方法と、
バックエンドのPostges データベースに接続する方法が紹介されています。
Flutterに関する話題
stateful_props パッケージ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/4cce01b09826663ce60c700d35cd980d.png)
stateful_props というコード量削減、可読性の向上のためのパッケージが
Reddit で話題になっていました。
StatefulWidget
でのController 周りの実装を簡略化できるとのことです。
Flutterに関する記事
ゆめみの Flutter の研修課題を公開しました
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJTg2JUUzJTgyJTgxJUUzJTgxJUJGJUUzJTgxJUFFJTIwRmx1dHRlciUyMCVFMyU4MSVBRSVFNyVBMCU5NCVFNCVCRiVBRSVFOCVBQSVCMiVFOSVBMSU4QyVFMyU4MiU5MiVFNSU4NSVBQyVFOSU5NiU4QiVFMyU4MSU5NyVFMyU4MSVCRSVFMyU4MSU5NyVFMyU4MSU5RiZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9YzI5N2IxNTk5OWM5N2FmZWJiNjY0ZGExYmI0NjRkZmU&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYmxlbmR0aGluayZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODIxYzQzNjE1NmM0NzhjNmNkNTg5ZjE5ZTM0YmU0MjM&blend-x=142&blend-y=491&blend-mode=normal&s=9497ec63d9f837eef5a408dd07506e45)
Flutterについての研修課題を公開した、という記事が話題になっていました。
研修にあたって、自動化等による工数削減の手法等が紹介されています。
Dart ドキュメント読み直した備忘録
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/c8771d7ead9bf14e9e454747b61b7633.png)
スプレッド演算子やlate
等のDart の文法について、
それぞれのポイントを備忘録としてまとめられた記事です。
サンプルコード付きで各項目が紹介されています。
忙しい人のためのFlutter’s Rendering Pipeline
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/92d2c3018152acb429d9fec02cc36b8d.png)
Flutter’s Rendering Pipeline という動画の内容を要約して紹介された記事です。
Flutter のウィジェットが画面に描画されるまでの間に
どのようなことが行われているのかについて紹介されています。
Flutterに関する動画
Flutter のすべてのウィジェットの紹介動画
Flutter で用意されている215ものウィジェットすべてに対して、
使用例を紹介している動画です。
サンプルコードと、実装結果がわかるよう、ひとつひとつ解説がなされています。
Dismissible Stack ウィジェットの作り方
Dismissible
ウィジェットを基に重ね合わされたカードをスライドで削除できるようにする、DismissibleStack
ウィジェットを作ろう、という趣旨の動画です。
アニメーションのカスタマイズ方法等が触れられています。
Flutter大学メンバーによる記事
fvmを使って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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9ZnZtJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2Rmx1dHRlciVFMyU4MyU5NyVFMyU4MyVBRCVFMyU4MiVCOCVFMyU4MiVBNyVFMyU4MiVBRiVFMyU4MyU4OCVFMyU4MiU5MiVFNCVCRCU5QyVFNiU4OCU5MCVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MDg4ZjRlZWZjYzVjODlhZjcyN2Y2MWM5ZTQ0NzVlMjg&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2lsYWxhYnUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY0ZjVmZGNmYzdlYjBmNzYxNGZkNzVhMzhhOTJiZWM4&blend-x=142&blend-y=491&blend-mode=normal&s=933efeb1414a5aa1039bd13657681014)
Flutterのバージョン管理ツールであるFVMを使用して
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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU3JTk0JUJCJUU1JTgzJThGJUU4JUExJUE4JUU3JUE0JUJBJUUzJTgxJUE3JUUzJTgxJUJCJUUzJTgyJTkzJUUzJTgxJUFFJUUzJTgxJUExJUUzJTgyJTg3JUUzJTgxJUEzJUUzJTgxJUE4JUU4JUJBJTkzJUUzJTgxJTg0JUUzJTgxJTlGJUUzJTgxJTkzJUUzJTgxJUE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00M2Q0ZjU5YTFiZTc2OTMxMWQxZTlhZDg5NDBjNzZlYg&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=57b1b7923bdfa2d0fdb87d76d87b4146)
Flutter での画像表示にあたっての躓きポイントについて書かれた記事です。
assetの指定時のよくある間違いについて触れられています。
【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付きで紹介されています。
【Flutter Widget of the Week #28】Dismissibleを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/6818c0bff962cf40b4d1a998431827ab.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はスライドしてリスト項目を削除する機能を実現する、Dismissible
についての解説記事となっています。
【Flutter Widget of the Week #29】SizedBoxを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/ff71424f05afeb70a557288b52ce42a5.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はウィジェットのサイズを指定する、SizedBox
についての解説記事となっています。
go_routerでタブがある状態で画面遷移
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/d2b48c005a7ecd4741e1676852bc3449.png)
画面遷移管理パッケージであるGoRouter を用いた、BotttomNavigationBar を残した
画面遷移の実装について紹介された記事です。
サンプルコードを中心に実装方法が紹介されています。
Flutter大学アドベントカレンダーの記事
Flutter大学アドベントカレンダー 2022に投稿された記事を紹介します。
【FlutterFire × Stripe】flutter_stripe パッケージで楽々カード決済
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/3f12fbee148106066f75d8246016287a.png)
Flutter と 決済サービスであるStripeを組み合わせる方法について紹介された記事です。
Firebase, Cloud Functions を利用する方法が紹介されています。
ObjectBox × Freezed × StateNotifier のあれこれ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/9c9cbc144be3cbeaa315b7042de4b672.png)
Flutter のデータ永続化の手法であるObjectBox とFreezedを組み合わせて作成した、
サンプルアプリについて書かれた記事です。
記事内では組み合わせるに当たっての注意点やサンプルコードが紹介されています。
Firebaseでサイト内ポイントシステム構築してみた。
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9RmlyZWJhc2UlRTMlODElQTclRTMlODIlQjUlRTMlODIlQTQlRTMlODMlODglRTUlODYlODUlRTMlODMlOUQlRTMlODIlQTQlRTMlODMlQjMlRTMlODMlODglRTMlODIlQjclRTMlODIlQjklRTMlODMlODYlRTMlODMlQTAlRTYlQTclOEIlRTclQUYlODklRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODElOUYlRTMlODAlODImdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWFhNGI1ZjE3YWYxOWYyZjhmZDU3ZDAyMTM1N2U2NmNj&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTWl5YWppNTU1JnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kMzc0OWViMzdmYTAxYmNlODMyMWM2ZTQxYTZmZWM4ZQ&blend-x=142&blend-y=491&blend-mode=normal&s=06c1755e43b92b78f6b0c4f0629df0c7)
Firebase , Firestore を用いた有効期限付きのポイントシステムの構築について
解説された記事です。
Cloud Functions を用いたポイント失効のための定期チェック等についても触れられています。
Flutter × Bitriseでappstore&playストアにまとめてデプロイが快適すぎる件
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b70d05e3cd90c2a6a04b8dd837bbf98d.png)
Flutter アプリに対しBitrise を用いたストアへの自動デプロイ機能の構築について書かれた記事です。
自動化の構築についてスクリーンショット付きで丁寧に解説がなされています。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年11月第5週 ~ 12月第1週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/12/5)
今週のFlutterニュースでした。
12月のFlutterニュースでは、Flutter大学アドベントカレンダーの記事を
こちらでも紹介するようにしています。
週1の更新じゃ待てない、という方はこちらから日々の更新を追いかけることが可能です。
記事を書くのが初めて、という方から、
この練りに練ったトピックを記事化されている方まで様々です。
Flutter大学の雰囲気を掴むいい機会だと思いますので、ぜひこの機会に追いかけてみてください。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。