Flutterの最新情報をキャッチアップしたい!
そんなあなたに送る、 Flutterニュース 。
本記事ではFlutterニュースとして、2022年12月第4週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。
読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください!
Flutter公式情報
Observable Flutter: Payments in Flutter
Observable<Flutter>と題した、Flutterに関するライブコーディングのアーカイブ動画です。
今回Flutter への Google Pay の導入方法について紹介されています。
Flutterに関する話題
Flutter Markup Language パブリックベータリリース
マルチプラットフォームなアプリ作成ができるマークアップ言語、
Flutter Markup Languageのパブリックベータがリリースされたとの投稿が、
Redditで話題となっていました。
こちらからこの言語の概要を見ることが可能です。
Serverpod バージョン1.0 RC版
Dartで記述されたオープンソースのスケーラブルなアプリサーバー、
Serverpod がバージョン1.0 のRC版となったとの投稿がRedditで話題となっていました。
来年1月初旬にバージョン1.0がリリースされる予定だとのことです。
paperfold パッケージ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/5f90b96d791a8f25c70c3ed67a9d1d01.png)
紙を折りたたむようなアニメーションを実装できるパッケージ、
paperfoldパッケージがRedditで話題となっていました。
pub.devのReadmeにて、アニメーションを見ることが可能です。
flutter_rust_bridge アップグレード
Flutter と Rust を結びつける、flutter_rust_bridge がアップグレードしたとの投稿が
Redditで話題となっていました。
こちらからflutter_rust_bridge の概要を見ることが可能です。
Dropboxのような個人ファイルストレージFlutterアプリ
Flutterで作られた、Dropboxのような個人ファイルストレージモバイルアプリのGitHubが、
Redditで話題となっていました。
AWS Amplify 等を用いて作成されたとのことです。
Flutterに関する記事
【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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwRmx1dHRlciVFMyU4MCU5MSVFOCVBNiVBQSVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MSVBRSVFNSVCOSU4NSVFMyU4MSVBRSVFNiU5QyU4MCVFNSVCMCU4RiVFNSU4MCVBNCVFMyU4MiU5MiVFOCVBOCVBRCVFNSVBRSU5QSVFMyU4MSU5NyVFMyU4MSU5RiVFNyU4QSVCNiVFNiU4NSU4QiVFMyU4MSVBNyVFMyU4MCU4MSVFNSVBRCU5MCVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MSU4QyVFNSU4QiU5NSVFNyU5QSU4NCVFMyU4MSVBQiVFNSVBNCU4OSVFNSU4QyU5NiVFMyU4MSU5NyVFMyU4MSU5RiVFOSU5QSU5QiVFMyU4MSVBQiVFOCVBNiVBQSVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MSVBRSVFNSVCOSU4NSVFMyU4MiU5MiVFNSU4RiVBRiVFNSVBNCU4OSVFNSU5RSU4QiVFMyU4MSVBQiVFMyU4MSU5OSVFMyU4MiU4QiVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2JkMTkxOTgyNGEzNWQ0NGY4MDhkYWVlNGVjZDA1M2U&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZGVvZGVvX21nJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kYjA4ZTRjZWJmZDYzNTM0MWY1MDQ5ODljZTY4ZDM3Zg&blend-x=142&blend-y=491&blend-mode=normal&s=9a6c3cef9a78fa1874947e33e828fbf1)
子要素の大きさに応じて大きくなることができるConatiner
の実装方法について書かれた記事です。
constraints
プロパティの利用法や、Row
に対する設定など、
重要なポイントが丁寧に解説されています。
2023年にFlutterチームがすべき10のこと
![](https://firebasestorage.googleapis.com/v0/b/flutter-bounty-hunters.appspot.com/o/blog%2Ften-things-flutter-should-do-in-2023%2Fheader.png?alt=media&token=46b8aa95-e6dc-4ba8-9741-e7c62ccaeb54)
Flutter でさまざまなオープンソースのプロジェクトを作成しているチームの目線から、
10個のFlutter チームに望むことを紹介している記事です。
画面描画に関するものから、テキスト入力システムに関するものなど、
幅広く紹介されています。
Flutter アプリのハッキングの仕方と守り方
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/1c8e70c7b64e4ba662e706c13ab0732f.png)
Flutterアプリがどのようにしてハッキングされる可能性があり、
それに対してどのようにして守るのか、という内容について記載された記事シリーズです。
記事では、リバースエンジニアリングのためのツール等が紹介されています。
2022年12月のニュースまとめ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/e62658dabca2f6666ab69a372469f17d.png)
2022年12月のFlutter のニュースについてまとめて紹介されている記事です。
Dart 3 について書かれた、The road to Dart 3の紹介や、ListenableBuilder
クラスの紹介等が書かれています。
Flutterに関する動画
Riveを利用したアニメーションのFlutterへの実装の仕方
Riveを利用したアニメーションのFlutterへの実装の仕方について紹介された動画です。
Riveアニメーション付きのタイトル画面の実装方法等が紹介されています。
Flutter大学メンバーによる記事
【Flutter】fl_chart:折れ線グラフで使用するプロパティ詳細
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/72b70157e05cdf2083a4fd0c5cc7f3cb.png)
fl_chartパッケージでの折れ線グラフを実装する際の使用するプロパティについて、
日本語で紹介された記事です。
サンプルコードをベースとして、
各プロパティの内容が解説されています。
Flutterでインターネットの通信速度を測定する
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/64be94f4922ead03ad8e9c12b3344642.png)
Flutterでインターネットの通信速度を測定する方法について書かれた記事です。
speed_test_dart というパッケージの使い方が解説されています。
dartでネストされたMapをディープコピーする
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/7d64ded0eb98e6b92a1503a7560b3c7e.png)
Dart のMap
を参照渡しではなくディープコピーする方法について解説された記事です。
再帰関数を用いた方法と、エンコードとデコードを用いた方法の2つが紹介されています。
Riverpod2.0でCRUD
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/9b43635a1c249c672a8a437fa79b4896.png)
Flutter の状態管理フレームワークであるRiverpodを用いた
CRUDの実装方法について紹介された記事です。
サンプルアプリとしてFirebaseを組み合わせたアプリが紹介されています。
【dio × riverpod】http_mock_adapter で APIクライアントのテストを書く
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/92247579899a74e30e9f0556aa1391be.png)
http_mock_adapter というパッケージを利用した、
dioを用いたHTTP 通信の、モックを用いたテストについて解説された記事です。
Riverpod を組み合わせたユニットテストの方法が解説されています。
Androidの赤いエラー?
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/bebf023c83a46e8778094105ad2a33b4.png)
Flutter で Firebase を利用する際に遭遇するエラーについて、
解決方法を紹介された記事です。
build.gradle
の修正内容が紹介されています。
Firebaseの値を次のページに渡す
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/b56cf33e8fc2dd0147bcf7edc4c86366.png)
Firebaseから受け取った値を表示した画面から、
次の詳細画面に値を橋渡しする方法について紹介された記事です。
サンプルコードをベースとしてコメントで方法が紹介されています。
Flutter大学アドベントカレンダーの記事
【Flutter】macOSのクライアントアプリを作る
![](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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwRmx1dHRlciVFMyU4MCU5MW1hY09TJUUzJTgxJUFFJUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUE0JUUzJTgyJUEyJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz1lODg2MmJlYjIxNDI2YjEzYWZkN2JjODc1ZDdlM2MzYw&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdG9ra3VuNTU1MiZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OWI4MjQ3ZmE2ZThiNzQ2YTI5MjY1OGYwNWE4NDhiN2E&blend-x=142&blend-y=491&blend-mode=normal&s=6697ffa392e42cd08d6a5e1a6b195359)
Flutter 3.0 でstable になったmacOSでのアプリのビルドについて、
実際にやってみた結果を記載した記事です。
ビルドの方法だけでなく、
macOSでビルドすると出てくるワーニングに対する対応についても書かれています。
【Flutter】さよなら、 Renderflex overflowed – 恐らくもっとも遠回りなUIエラーの解説 –
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/9ab6a42820e077432f5bb6f5c811eb51.png)
Renderflex overflowed
等のUIエラーについて対処法を含めて解説された記事です。
Flutterの画面描画の仕組みから、
UIエラーが何故起こるのか、といった原因についてまで細かく分析し紹介されています。
【Flutter✖️WebRTC】WebRTCについて学んだことのまとめ
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/65edc3c36860826cd7b1ab038d5d5087.png)
リアルタイムな音声やビデオ等の通信を確立する技術であるWebRTCについて解説し、
Flutterへの導入方法を紹介した記事です。
WebRTCについて基礎から解説がなされており、
参考になるウェブサイトや動画等も多数紹介されています。
【Flutter × GoFデザインパターン】Commandを実装してみた
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/49802a97fa586c6e5bd46ff14c4ef821.png)
GoF デザインパターンの中の、Command パターンを紹介し、
Flutterでの導入例について解説された記事です。
サンプルアプリをベースとして、
コマンドの履歴管理ができるアプリの作り方を学ぶことができます。
【Flutter】Flutter大学女子部でプレゼントおすすめするアプリを作った話💖
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/11147638c11070a116f49d3cd0da2a10.png)
Flutter大学女子部の共同開発アプリ、『レコメンだー』について、
開発の経緯や技術面について紹介された記事です。
開発することで気付いたことや身についたこと等、
共同開発を通して得られた経験、スキルが紹介されています。
ChatGPTをFlutterで使う方法をChatGPTに聞いた結果
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/88ec944601b972739a359a0ef302b0e1.png)
ChatGPT をFlutter で使う方法について、
ChatGPTに直接聞いてみた結果を紹介された記事です。
API Key の取得方法や、完成したコード等が紹介されています。
モバイルアプリでWeb上決済を導入する
![](https://blog.flutteruniv.com/wp-content/uploads/cocoon-resources/blog-card-cache/0c017c9d97aed49d2c74fc8021c4392f.png)
モバイルアプリに対してWeb上で行う決済を導入する方法について解説された記事です。
Stripeや、Firebase Dynamic Linksの設定方法から、
詳細に導入方法が紹介されています。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年12月第4週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
編集後記(2022/12/26)
昨日、Flutter大学アドベントカレンダーが25日目を迎え、
25個の記事が無事揃いました。
ほぼ遅れなく25個の記事が揃ったのは、
本当にすごいことだと思っています。
1つ1つの記事が分量や内容が薄い生地か、
というとそんなことはなく、
1つ1つFlutter大学メンバーが全力で書いた、
渾身の記事になっているかと思います。
まだ読んでない方はぜひ読んでみてほしいと思います。
驚くほど内容が濃いです。
これに影響を受けて、
週刊Flutter大学では今週、12月30日まで毎日記事を投稿しようと思います。
年末休みのお供に、こちらもぜひ読んでみていただければと思います。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。