『Flutterの最新情報をキャッチアップしたい!』
そんなあなたに送る、 Flutterニュース 。
本記事ではFlutterニュースとして、2022年9月第3週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
Flutter公式情報
Flutter 3.3.2リリース!
Flutter のstable チャンネルにて、Flutter 3.3.2がリリースされました。
Hotfixes一覧によると今回のリリースでの修正点は以下となります。
- パッケージのアセットの読み込みに失敗する不具合の修正
- Flutterエンジンのカスタムエンベッダーが32bitの対象に対してビルドに失敗する不具合の修正
- Platform View のVirtural Display フォールバックを使った際にAndroidのプラグインがクラッシュする不具合の修正
- テキストのレンダリングが正しく処理されない不具合の修正
catch
ブロックでlate
修飾子をつけて定義した変数を使用した際型推定が不正確になる不具合の修正
Flutter 利用者のIDEの変遷
Flutterを使うためのIDE(統合開発環境)の、
ユーザーの使用状況についてまとめた記事を紹介しているツイートです。
Tweet内記事にて、
Flutter 公式のアンケート結果より、
Android Studio とVS code どちらを使用している人が多いか、
どちらが満足度が高いか、を紹介しています。
Focus(今週のウィジェット)
Flutter 公式による ウィジェット紹介動画シリーズ、Widget of the Week の
最新動画がアップロードされました。
3週にわたってキーボードショートカットの実装について解説する中、
1週目の今週は、Focus Widgetの紹介となります。
FlameでDashのゲームを作ろう ~ Learning to Fly ~
初心者がFlutter に関するアプリを作成している様子を動画化したシリーズ、
Learning to Fly が更新されました。
今回のエピソードではFlameを使って上下操作のみのアクションゲームの実装を行う際に、
良かった点や困った点等が紹介されています。
PrimaryScrollController | Decoding Flutter
Flutterの情報や機能を深掘りするシリーズ、Decording Flutterが更新されました。
今回は画面スクロールを管理するScrollControllerについての深掘り動画となっています。
Flutterでのレンダリングの最適化
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/de538257d0e5b9e8a0ecb5dd2971ce2e.jpg)
Flutter 3.3 の公開と同時に話題となったアプリ、Wonderousの作成チームが作成した
レンダリングの最適化に関する記事がFlutter公式により紹介されました。
記事内では5つのパフォーマンス向上の手法が紹介されています。
Flutterに関する話題
Flutter のバージョンと Flutter engineのバージョンの対応表
Flutter のバージョンと Flutter engineのバージョンの対応を表にまとめた投稿が、
Redditで話題となっていました。
今後、DartのSDKバージョンもこの表に加わるようです。
flutter_credit_card パッケージ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/11f8c52ecd0f5711c4cfacbf2e0aecfb.png)
クレジットカードのUIを簡単に実装できるパッケージ、
flutter_credit_card パッケージがRedditで話題となっていました。
リンク先のGIFにてパッケージの使用感を見ることができます。
App Widget プラグイン
スマホのホームスクリーンに置くウィジェットを実装可能にするプラグインです。
プラグインのpub.devのページにて実装結果のGIFを見ることができます。
現状はAndroidのみ対応しているとのことです。
VS Code拡張 Flutter Stacked MVVM
MVVMのファイル構成を自動生成するVS Code拡張がRedditで話題となっていました。
こちらのページのGIFにて使用感を見ることが可能です。
Appwrite 1.0 リリース
オープンソースのBaaSである、Appwrite の1.0 がリリースされました。
こちらのページにてAppwriteについての詳細を見ることが可能です。
Flutterを使っている企業のリスト
Flutter を使っている企業についてまとめたリストについての投稿がRedditで話題となっていました。
GitHubにて管理され、プルリクエストを送ることで更新依頼を出せるとのことです。
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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUU5JUFCJTk4JUU2JUEwJUExJUUzJTgxJUFFJUU2JTk2JTg3JUU1JThDJTk2JUU3JUE1JUFEJUUzJTgxJUE3JUUzJTgyJUJEJUUzJTgzJTk1JUUzJTgzJTg4JUUzJTgyJUE2JUUzJTgyJUE3JUUzJTgyJUEyJUU5JTk2JThCJUU3JTk5JUJBJUUzJTgyJTkyJUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJThBJUU4JUE5JUIxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03ZTkzMTc3ZTQ3YTU5YzIwNWY4Mzk3ZGFmN2Q2ZWNiOA&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwWXVtTnVtbSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzE0M2M4OGRhOTczOGY0MTBjZTA1ZTRiYWYyNzM0ZjQ&blend-x=142&blend-y=491&blend-mode=normal&s=4690161f42d2b0d485459895312378b4)
高校の文化祭でのクラスのアトラクションの企画を裏から支えるソフトウェアを作成し運用した、
その体験談の記事です。
問題の表示ソフトウェアやお客さんが投げるボールのカウント用ソフトウェア、
全体の管理用ソフトウェアなど複数のソフトウェアを一人で開発したそうです。
技術面ではFlutter と Supabase を使って作成したとのことです。
How to Store API Keys in Flutter: –dart-define vs .env files
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b0e6c4e73042b791f8a758811bf0550a.png)
アプリのコーディングの中でAPI キーをどのように保管するか、という趣旨の記事です。
--dart-define
を使用した方法と、.env ファイルを使用した方法をそれぞれ紹介しています。
FlutterでSupabaseのオフラインサポートを得よう
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/bb49ca6d8c294c10e9e30e30d701fcfd.png)
オンラインの時はSupabaseからのデータを取得し、
オフラインの時はローカルデータベースに保存していた
オンラインの時に取得したデータのキャッシュを読み取ることができるようにするパッケージ、
Stockの紹介記事です。
サンプルアプリの作成を通し、Stockパッケージの効果を紹介しています。
Flutter アプリケーションでのアダプティブなマテリアルコンポーネント
![](https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1663190390457%2F29SY9z0lC.png%3Fw%3D1200%26h%3D630%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng)
Flutter での様々な画面サイズに対する対応について書かれた記事です。
アダプティブな対応について歴史から、効果的なパッケージの紹介等がなされています。
Flutter大学メンバーがリリースしたアプリ
CoffeeChat 〜企業で働く人との会話マッチングツール〜
ミンさんにより、企業で働く人との会話マッチングツール、
『CoffeeChat』がリリースされました!
完全匿名で、各分野の企業で実際に働く方をメンターとして、
一対一で話すことのできるアプリとなっています。
業種や職種を表すアイコンがとても特徴的でした!
また、画面内での縦横のスクロールがしっかりと配置されているのも印象的でした!
Flutter大学メンバーによる記事
Sample App of Flutter3 x MySQL8 with mysql_client
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9U2FtcGxlJTIwQXBwJTIwb2YlMjBGbHV0dGVyMyUyMHglMjBNeVNRTDglMjB3aXRoJTIwbXlzcWxfY2xpZW50JUUzJTgwJTgwNCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MDVlN2VjNGRkOTRjODZkZDUyZjIwZDJiOTZkODJhYmU&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=a15851270afc28346db9e3739619d59d)
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9U2FtcGxlJTIwQXBwJTIwb2YlMjBGbHV0dGVyMyUyMHglMjBNeVNRTDglMjB3aXRoJTIwbXlzcWxfY2xpZW50JTIwNSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjFkNjdkZGZiNWMwN2Y1OGJlMmMzOTVhNDYyYjJhNzU&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=790f8b4e848585d0755d09e68f0efc58)
Flutter と MySQL8 を組み合わせたアプリを作成している筆者の進捗をまとめた記事です。
記事に対して動画を作成していて、MySQL8との組み合わせのチュートリアルとして、
かなり良い取り組みがなされています。
TextFormFieldをたくさん並べるfileをすっきりさせる
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9VGV4dEZvcm1GaWVsZCVFMyU4MiU5MiVFMyU4MSU5RiVFMyU4MSU4RiVFMyU4MSU5NSVFMyU4MiU5MyVFNCVCOCVBNiVFMyU4MSVCOSVFMyU4MiU4QmZpbGUlRTMlODIlOTIlRTMlODElOTklRTMlODElQTMlRTMlODElOEQlRTMlODIlOEElRTMlODElOTUlRTMlODElOUIlRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYwYjdjMjlkNTc3NTczMGYyMzExZGYwYzU0OTdhNGVj&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=524a274dd2142673c1d475fda41152c4)
複数のTextFormField
を扱うようなページのコードを短く記述する方法について
書かれた記事です。
切り出した自作のTextFormField
のウィジェットと使い方をコードで紹介されています。
LINE LIFF × Flutter Web:サンプルアプリで動作確認
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/e27c208b981ba662b7ca38db89e0f9a5.png)
LINE のLIFFと Flutter Webを組み合わせてユーザー情報を取得するサンプルを作成し、
紹介している記事です。
パッケージの利用で比較的簡単にユーザー情報の取得ができるとのことです。
asset_manager_cli試してみた!
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/7328ef9875b612896d701a8a94d60874.png)
Flutterの便利ツール、asset_manager_cli を試してみた内容についての記事です。
フォルダに入れた画像等のアセットからpub.spec yaml への記述を
自動でしてくれるツールとのことです。
【Flutter Widget of the Week #1】SafeAreaを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/6f8bf6bf5799f539acc0e31c2a7e8dbe.png)
Flutter公式のウィジェット紹介動画シリーズ、
Widget of the Weekで紹介されたウィジェットを、実際に触って紹介している記事です。
1つ目としてこの記事ではSafeArea
ウィジェットの紹介が
画像付きでなされています。
【Flutter Widget of the Week #2】Expandedを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/5bf7652bb3765cc82a722b44982632f3.png)
1つ上の記事と同じく、
Widget of the Weekで紹介されたウィジェットを、実際に触って紹介している記事です。
2つ目としてExpanded
ウィジェットについて、
プロパティの設定の有無でどう変わるかを含めて解説されています。
Sample App for MySQL8
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/f99e30db6bf8b4a0f07b5a3470a4da0d.png)
Flutter x MySQL8 のサンプルアプリについての記事です。
全編英語で書かれている上に、YouTube動画での紹介までなされています。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年9月第3週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/9/19)
今回気になった項目は、なんといっても高校の文化祭でソフトウェア開発をしたお話
ですね。
見れば見るほど、こんなシステムを一人で作れるものなのか、と技術の高さに驚かされます。
さらに驚くべきはその発想力ですね。
自分の高校の文化祭の時を思い出してみても、
アトラクションを裏から支えるシステムを自作しよう、なんて考えは全く思い浮かばなかったように思います。
ソフトウェアは購入したりするもので、自力で作れるものではない、
という固定観念がありました。
今の10代の人たちはパソコンを触れる人が多く、
プログラミングでソフトウェアを作る、ということが自分達より身近なものなのかな、
とこの記事を読んで思いました。
これはとても素晴らしいことですよね。
Flutterは特にソフトウェアを作る速度だったり、マルチプラットフォームだったりで、
アトラクションのソフトウェア制作にマッチしていたのかな、と思います。
10代、20代の人から学びつつ、
自分の実力をもっとつけていかなければな、と思いました。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。