Flutterの最新情報をキャッチアップしたい!
そんなあなたに送る、 Flutterニュース 。
本記事ではFlutterニュースとして、2022年12月第3週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
- Flutter公式情報
- Flutterに関する話題
- Flutterに関する記事
- Flutterでモバイルアプリ開発着手からリリース後まで。【感想】
- 【Flutter】Material Theme Builder で好みの色をアプリに組み込む
- Flutterアプリ・Pilllの構成について
- Meilisearchを使ってFlutter×Firestoreの全文検索を実現する
- なぜFlutterにはClojureが必要か?
- どのようにしてFlutterのための高いカスタマイズ性を持ったRich Text Editorを実装したか
- Flutter Riverpod :アプリのAPI呼び出しを難なく管理する
- Flutter でRiverpod を用いたListViewのベストなパフォーマンスの実現
- Flutter大学メンバーによる記事
- Flutter大学アドベントカレンダーの記事
- 週刊Flutter大学の記事
- まとめ
- 編集後記(2022/12/19)
Flutter公式情報
flutter 3.3.10 リリース!
Flutter のstable チャンネルにて、Flutter 3.3.10がリリースされました。
Hotfixes一覧によると今回のリリースでの修正点は以下となります。
- Android のTVデバイスでのスクロール時に生じる不具合の修正
- Safari でのFlutter Web 、CanvasKit モード使用時に、ClipRRectでネストされたウィジェットが表示されない問題の修正
isolate_agents パッケージ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/7b56a2c9b8bf21ee917ceaa16644800f.png)
Flutter / Dart チームがリリースしたパッケージ、
isolate_agents パッケージについての記事です。
Flutter / Dart でのIsolateをより実装しやすくするパッケージとなっています。
go_router(今週のパッケージ)
Flutter 公式による パッケージ紹介動画シリーズ、Package of the Week の
最新動画がアップロードされました。
今回はFlutterアプリでURLを用いた画面遷移等を実装しやすくするパッケージ、
go_routerパッケージの紹介となります。
デスクトップのFlutter開発体験を良くするためには?
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/5b0a3738942127feb93f028ac540e67e.png)
2022年 Q3 のFlutterのデスクトップアプリ開発に関する調査結果の紹介記事です。
1,901ものFlutter でのデスクトップアプリ開発者に調査を行った結果が記載されています。
Flutterに関する話題
Flutter Socket.IO のクライアントパッケージ
双方向で低遅延の通信を実現するSocket.IOのクライアントパッケージ、
socket_io_client_flutter パッケージについての投稿がRedditで話題となっていました。
サーバーとのメッセージの送受信が実現できるとのことです。
camerawesome Rc1 リリース
Camerawesome パッケージについての投稿がRedditで話題となっていました。
ドキュメントやExample等が充実したとのことです。
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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Rmx1dHRlciVFMyU4MSVBNyVFMyU4MyVBMiVFMyU4MyU5MCVFMyU4MiVBNCVFMyU4MyVBQiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFOSU5NiU4QiVFNyU5OSVCQSVFNyU5RCU4MCVFNiU4OSU4QiVFMyU4MSU4QiVFMyU4MiU4OSVFMyU4MyVBQSVFMyU4MyVBQSVFMyU4MyVCQyVFMyU4MiVCOSVFNSVCRSU4QyVFMyU4MSVCRSVFMyU4MSVBNyVFMyU4MCU4MiVFMyU4MCU5MCVFNiU4NCU5RiVFNiU4MyVCMyVFMyU4MCU5MSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9MGZjMTlhOTZkYmU2OWJlZmI4MTY2NmIwNzEzNjY2ZTI&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTWFzYW9TYXNha2kmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRiM2U2YmZmYjE0NmM2Yzg4MTEyNGE1ZWU5ZDJmYWY3&blend-x=142&blend-y=491&blend-mode=normal&s=5e7fb530921a8da25af8f31bf6da9cbe)
Flutterでのモバイルアプリ開発に着手した理由から、
リリース後の市場の反応に至るまでをまとめて解説された記事です。
広告収益やリリース時にかかる金額等が紹介されています。
【Flutter】Material Theme Builder で好みの色をアプリに組み込む
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/2476ff77dd63a698269e89e656981a28.png)
Material Theme Builderを用いたアプリへの色の反映を行う方法について
書かれた記事です。
Material Designに則った統一感のある配色が設定可能となります。
Flutterアプリ・Pilllの構成について
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/29737b246f9194367230413df938a28d.png)
Flutterで作成された個人開発アプリのファイル構成等について書かれた記事です。
記事内で自作されたライブラリ、async_value_groupの紹介がなされています。
Meilisearchを使ってFlutter×Firestoreの全文検索を実現する
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/6dcfef2bc5d34b175706c01a1385cd89.png)
Meilisearchを利用したFlutter x Firestore での全文検索の実装方法について書かれた記事です。
Meilisearchの登場の背景から、優れている点等についてもまとめられています。
なぜFlutterにはClojureが必要か?
Flutterとプログラミング言語であるClojureの関係性について解説された記事です。
Dart で書かれたコードのClojureでの表現の対比や、
Flutter開発をClojureで行う方法が紹介されています。
どのようにしてFlutterのための高いカスタマイズ性を持ったRich Text Editorを実装したか
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/7b2ff0b82b7bb9ac7c5580ff4309abe0.png)
Notionの代替手段である、
高いカスタマイズ性を持ったRichText Editor 、
AppFlowy Editorの技術設計について書かれた記事です。
データ構造やサンプルコード等が紹介されています。
Flutter Riverpod :アプリのAPI呼び出しを難なく管理する
![](https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1671168444689%2F464YmzJLB.png%3Fw%3D1200%26h%3D630%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng)
状態管理フレームワークであるRiverpod を用いたAPI呼び出しの実装方法について
紹介された記事です。
2つのAPIを利用したサンプルアプリの作成方法が紹介されています。
Flutter でRiverpod を用いたListViewのベストなパフォーマンスの実現
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/12e1ee92297bd30f9c9a38b041748bf2.jpeg)
Riverpodを用いた、ListView での不要なリビルドの抑制について書かれた記事です。
selectやoverrideを用いた方法が紹介されています。
Flutter大学メンバーによる記事
Todo アプリを作成しました。『鏡を使わないと読めない』ですけど。【Mirror Todo】
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9VG9kbyUyMCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNCVCRCU5QyVFNiU4OCU5MCVFMyU4MSU5NyVFMyU4MSVCRSVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MCU4MiVFMyU4MCU4RSVFOSU4RiVBMSVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MiU4RiVFMyU4MSVBQSVFMyU4MSU4NCVFMyU4MSVBOCVFOCVBQSVBRCVFMyU4MiU4MSVFMyU4MSVBQSVFMyU4MSU4NCVFMyU4MCU4RiVFMyU4MSVBNyVFMyU4MSU5OSVFMyU4MSU5MSVFMyU4MSVBOSVFMyU4MCU4MiVFMyU4MCU5ME1pcnJvciUyMFRvZG8lRTMlODAlOTEmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPTIyNDk4NWQ4Yzk2OWUxNzNjNjRmMGMzNTQxZGEyZDUz&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwVW1pZ2lzaGktQW9pJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01MzJmMTRhNzdkNDg1MDk3YmEwMjc4NmQzMmNhOGI3Mw&blend-x=142&blend-y=491&blend-mode=normal&s=3a7f133f50560af1b9afbe3526214ad8)
登録されたToDoの文字列が鏡文字で表示されるアプリを作成した、
との体験談の記事です。
アプリのアーキテクチャやRiverpod Generator での状態管理等が紹介されています。
初心者リンクを埋める
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUUzJTgwJTgxJUUzJTgzJUFBJUUzJTgzJUIzJUUzJTgyJUFGJUUzJTgyJTkyJUU1JTlGJThCJUUzJTgyJTgxJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lYzc5NmE3NDk0ZTlmOTI2NmNlYzg4MWNmNTczODhjMA&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYWQ1MzMyZDNkNjlhY2Q3MDdiYzZhYjUyNzVmZTM5NA&blend-x=142&blend-y=491&blend-mode=normal&s=cb71bd2f316aa6d066aafeb9e55f7626)
url_launcher を使用した実装方法についての、悩んだ点や解決策について書かれた記事です。
どこに何を書けばいいのか、という悩みについてサンプルコードで1つの解が示されています。
プログラミングの勉強を1年半して思ったこと。
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgzJUE5JUUzJTgzJTlGJUUzJTgzJUIzJUUzJTgyJUIwJUUzJTgxJUFFJUU1JThCJTg5JUU1JUJDJUI3JUUzJTgyJTkyMSVFNSVCOSVCNCVFNSU4RCU4QSVFMyU4MSU5NyVFMyU4MSVBNiVFNiU4MCU5RCVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MSU5MyVFMyU4MSVBOCVFMyU4MCU4MiZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9MDRhMDNjZTVhNmRkY2ZlN2U2NDk2N2JkNGQ1OTE0MWU&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2FndXJhMSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjI5ZmYxN2M2ZTA1ZGRhMjc2NDliNTMxNzI4OTNlMjU&blend-x=142&blend-y=491&blend-mode=normal&s=ecade571a94bcaae58b482a72dbf563d)
筆者のプログラミングを1年半勉強してわかったノウハウについて書かれた記事です。
経験談ベースでポイントが丁寧に記載されています。
【Flutter Widget of the Week #32】AnimatedListを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/5327f98962de12614cf8051e7abc9523.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はアニメーション付きでリストの追加、削除等を行うのに有用なAnimatedList
についての解説記事となっています。
【Flutter Widget of the Week #33】Flexibleを使ってみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/3eecb7ce99ca23e0f5982e5ccd905715.png)
Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。
今回はウィジェットの大きさを割合で調整するウィジェット、Flexible
についての解説記事となっています。
go_routerいらないんじゃないですか?
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/54cdf9b8ff3013a16575656009fbc6d0.png)
短い記述での画面遷移の実装について書かれた記事です。
Extension を用いたgo_router を使用しない方法が紹介されています。
Flutter大学アドベントカレンダーの記事
Flutter x Firebaseでメール通知機能を実装してみる
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/553bb10e3c2195a4215edfd255fd7df7.png)
Flutter x Firebaseでのメール通知機能の実装方法について書かれた記事です。
SendGridを用いたメール配信の実装方法が紹介されています。
【Flutter】思い通りのバリデーションを簡単に作ろう
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/2b39244fac715f0dd8c0d4c3723b9440.png)
TextFormField に対するバリデーションの実装方法について書かれた記事です。
パッケージを利用した バリデーションの実装方法が紹介されています。
【Flutter】AsyncValue を使ってローディング表示、ダイアログ表示、スナックバー表示の共通化をしてみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/7f8d6ee3f42cb6a2960fc4019727641c.png)
Riverpod のAsyncValue を用いたローディング表示等の処理の共通化について書かれた記事です。
コード内の任意の場所で処理を呼び出す方法が紹介されています。
Rive Animation を使用してみた
アニメーション作成ツールであるRIveについて紹介された記事です。
FlutterでRiveを使用できるようにするパッケージの紹介等が行われています。
サンタさんのパラパラ漫画を実装した話
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUI1JUUzJTgzJUIzJUUzJTgyJUJGJUUzJTgxJTk1JUUzJTgyJTkzJUUzJTgxJUFFJUUzJTgzJTkxJUUzJTgzJUE5JUUzJTgzJTkxJUUzJTgzJUE5JUU2JUJDJUFCJUU3JTk0JUJCJUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk3JUUzJTgxJTlGJUU4JUE5JUIxJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz1iNmY3MzdlZDhmZDNmMjJiOTkyOTBiYTk1YjdiN2U4MQ&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG9uZ3JpNzI3JnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05MGM3OWI2MDU5MzhiNzFiM2QxZDI5Yjc1NGQzMjVlNw&blend-x=142&blend-y=491&blend-mode=normal&s=0ba3b4a55a2d984459946c8c58e364d2)
Flutter で作成したリコメンドアプリの紹介とアニメーションの実装方法について
書かれた記事です。
実装サンプルのコードが記事内で紹介されています。
Flutter x Firestore で無限スクロールのチャット機能を実装する
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/bc14aa0e6d96b829b5861d85a21c2f25.png)
Flutter x Firestore でのチャット機能の実装方法について解説された記事です。
過去の情報を少しずつ読み込んでいく、無限スクロールの実装方法についても紹介されています。
【Flutter】スポットライト風のチュートリアルを作成してみよう
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/cc76d4f9384b1c85586955b687fac57d.png)
アプリを初めて起動した人向けに、
スポットライト風に動作を指示するチュートリアルの実装方法について解説された記事です。
showcaseviewというパッケージを利用した方法が紹介されています。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年12月第3週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/12/19)
今週のFlutterニュースでした。
記事半ばで書いたMirror Todo という鏡文字を表示するTodo アプリは、
自分がクソアプリアドベントカレンダーの記事のために作成したものです。
去年記事を書いてからすぐにアプリの構想自体は思いついたので、
1年越しに作成したアプリでした。
レスポンシブ対応等もしていて、
意外と凝ったアプリになったかと思います。
ぜひ上記記事から覗いてみてください。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。