Flutter ニュース 【2022年10月第4週】

「Flutterの最新情報をキャッチアップしたい！」

そんなあなたに送る、 Flutterニュース 。

本記事ではFlutterニュースとして、2022年10月第4週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行います。

読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください！

Flutter公式情報

Flutter 3.3.5 リリース！

🤖 A new #Flutter release is available 🎉!
Channel: stable
Version: 3.3.5#flutterdev #flutterio #dartlang

— Flutter Releases (@FlutterReleases) October 19, 2022

Flutter のstable チャンネルにて、Flutter 3.3.5がリリースされました。

Hotfixes一覧によると今回のリリースでの修正点は以下となります。

• FadeInImageでキャッシュされた画像からキャッシュされていない画像に切り替えた時にアプリがクラッシュする不具合の修正
• post-submit のビルドとデプロイメントのドキュメントの移動
• 絵文字と韓国語の組み合わせでアプリがクラッシュする問題の修正
• Web アプリをデバック時誤ったエラーが表示される問題の修正

Flutterに関する話題

Flutter Smooth

Be 60FPS smooth, no matter how janky your app originally was due to heavy build/layout, by drop-in replacements or builders. Anyone interested in this? Will further polish it if many are interested. from FlutterDev

Flutterでリスト等をよりスムーズにスクロールできるようにするパッケージ、
flutter_smoothについての投稿がRedditで話題となっていました。

こちらにて比較動画等詳細を見ることが可能となっています。

Flutter Web で作成されたポートフォリオ ウェブサイト

🕸 Portfolio website using Flutter Web: Open-source! from FlutterDev

Flutter Web で作成されたポートフォリオとしてのWeb サイトとソースコードの紹介記事です。

Web サイトでは筆者が作成したアプリの一覧を見ることができます。

Dart のためのInteractive Shell (REPL)

Interactive shell (REPL) – quickly trying things like in Python/Julia – supporting 3rd party packages, hot reload, full grammar, and playing with existing code side-by-side from FlutterDev

シェル上で入力したDartのコードを実行する等ができるソフトウェアが
Redditで話題となっていました。

GitHub内のREADME にて実行例等を見ることができます。

calendar_day_view パッケージ

calendar_day_view: Dav View widget for calendar app. from FlutterDev

日の予定表を作成するのに有用なパッケージ、calendar_day_view パッケージについての投稿が
Redditで話題となっていました。

pub.dev のパッケージ紹介ページにて使用例の画像を見ることが可能です。

プロフィール画像の重ね合わせサンプル

Flutter-Animations/lib/flutter_design_challenges/pictures_stack at master · rutvik110/Flutter-Animations

Exploring "Animations In Flutter", having fun building and writing about them while doing design challenges to see the extent of what Flutter can achieve. - rut...

github.com

コインの形で表示されたプロフィール画像を重ね合わせ、
追加や削除のアニメーションを実装したサンプルプロジェクトがRedditで話題となっていました。

リンク先の動画にて、実装結果のアニメーションを見ることができます。

Flutter/Flutter Web で作られた シンプルなお絵かきアプリ

GitHub - JideGuru/flutter_drawing_board: A simple drawing app made with Flutter

A simple drawing app made with Flutter. Contribute to JideGuru/flutter_drawing_board development by creating an account on GitHub.

github.com

Flutter / Flutter Web で作成されたシンプルなお絵かきアプリのリポジトリが
Redditで話題となっていました。

リンク先の”Link to Demo”からデモアプリを触って確認することができます。

RxDB の Flutter での使い方

rxdb/examples/flutter/README.md at master · pubkey/rxdb

A fast, local first, reactive Database for JavaScript Applications - pubkey/rxdb

github.com

データベースである RxDB を Flutter で扱うための方法について書かれたREADMEが、
Reddit で話題となっていました。

今後、Example内でサンプルアプリも作成される模様です。

Flutterに関する記事

Dr.Riverpod : どのようにして状態管理についての不安を解消し愛するようになったか | Codemadic Blog

Dr. Riverpod: How I learned to stop worrying and love state management | Codemagic Blog

A discussion on choosing the best state management solution for Flutter in 2022/2023 with all the argumentation you’d expect

blog.codemagic.io

Flutter の状態管理手法の変遷の歴史から、
筆者の状態管理手法の選定の理由について書かれた記事です。

記事内では、状態管理手法の Pub.devでのLike 数ランキング等が紹介されています。

Flutter Rivepod Generator でのProviderの自動生成方法

How to Auto-Generate your Providers with Flutter Riverpod Generator

Thanks to the new Riverpod Generator package, we no longer have to declare providers manually. This guide explains how to use the new @riverpod syntax.

codewithandrea.com

状態管理フレームワーク Riverpod で利用するProvider を
パッケージを利用して自動生成する方法について書かれた記事です。

build_runnerでの自動生成にてProviderを自動生成することができます。

ガラスが割れるようなアニメーションの実装方法

Explosion animation in flutter

Learn how to make a widget to break down to many pieces and then do an explosion animation and reform the original shape again.

medium.com

正方形のパネルが、ガラスが割れるように割れ散るアニメーションの実装方法について
解説された記事です。

記事内のGIFで実装内容のアニメーションを見ることができます。

2022年 10月のニュースまとめ

October 2022: Riverpod 2.0, Isar 3.0, Upcoming Dart Language Features

The last month in Flutter: Official Riverpod 2.0 and Isar 3.0 releases, upcoming Dart language features, new videos from the Flutter team, and the latest from C...

codewithandrea.com

2022年10月に起きた出来事についてまとめて紹介している記事です。

Isar 3.0 のリリースやRiverpod 2.0 のリリースの他、筆者の作成した記事等が紹介されています。

Flutterに関する動画

Reddi のクローンアプリ作成チュートリアル

Reddit のクローンアプリを作成するチュートリアル動画がRedditにて話題となっていました。

Flutter, Firebase, Riverpod 2.0 を利用して作成したチュートリアルとなっています。

Apple Watch + Flutter = No Problem! | FlutterVikings 2022

Apple Watch とFlutterの組み合わせについてのFlutter Vikings の講演の切り抜き動画です。

実装方法やスマホとの連携方法等が紹介されています。

Flutter大学メンバーによる記事

初心者 flutter_unity_widget 2022.2.0のpub.devを読む

初心者 flutter_unity_widget 2022.2.0のpub.devを読む １ - Qiita

初心者を名乗るものは、いつまでも初心者である。　　先日、トヨタのFlutter研修のビデオを見ていたら、講師が冒頭でそんなようなことを言っていた。きっとそれは正しい。なので、いったんは、私もそろそ…

qiita.com

初心者 flutter_unity_widget 2022.2.0のpub.devを読む ２ - Qiita

大きめの展望　今回、この挑戦をして記事化しようと思った決め手はこのビデオである。初心者には遠き道程だが、ここまでできる技術なのだとわかっていれば、やりがいもある。オープンソースではないのでコードを…

qiita.com

初心者 flutter_unity_widget 2022.2.0のpub.devを読む ３ - Qiita

構造を理解する　Setup 2公式ドキュメントのDeepLによる翻訳　続き必要なもの既存のFlutterプロジェクト（ない場合は新規に作成します）既存のUnityプロジェクト（ない場合は新…

qiita.com

Flutter x Unity でのアプリ作成に挑戦している体験談について書かれた記事です。

flutter_unity_widget パッケージのドキュメントを読み解くことで、
Flutter x Unityのアプリの実装に挑戦しています。

【Flutter Web】Javascriptを呼び出す (packages:js)

【Flutter Web】Javascriptを呼び出す (packages:js) - Qiita

webの開発の為に多種多様なjavascriptのライブラリが存在しますが、flutter web開発時に使いたくてもdart・flutterでそれらを扱うパッケージが存在しないこともあると思いますそんな場合にはdart側からJavascirptの処理を直接呼び出すサポートをしてくれるの…

qiita.com

【Flutter Web】Javascriptを呼び出す (packages:js)

zenn.dev

Flutter Web で javascript のコードを呼び出す方法について書かれた記事です。

外部のjsライブラリを呼び出す方法についても記載がされています。

こちらの記事について英語版の記事も作成されています。

【Flutter web】Calling javascript functions with packages:js

There are a wide variety of javascript libraries for web development, but there are times when you want to use them for flutter web…

medium.com

[Flutter] 縦横スクロールできる表を作る

[Flutter] 縦横スクロールできる表を作る - Qiita

縦横スクロールできる表をつくってみたので紹介します。コードWidget _table(List<DataColumn> columnList, List<DataRow> rowList) { …

qiita.com

Flutter での縦横スクロールできる表の作り方について解説されている記事です。

シンプルな設定方法とTableとの組み合わせについて紹介されています。

【Flutter】なぜウィジェットの import 先に「material.dart」を選ぶのか

【Flutter】なぜウィジェットの import 先に「material.dart」を選ぶのか

zenn.dev

Flutterのウィジェットをインポートする際に選ぶmaterial.dartについて、
その選択理由を深堀りした記事です。

図を用いて、選択理由について詳細に解説されています。

【Flutter Widget of the Week #15】InheritedModelを使ってみた

【Flutter Widget of the Week #15】InheritedModelを使ってみた

zenn.dev

Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。

今回はInheritedModelについての解説記事となっています。

【Flutter Widget of the Week #16】ClipRRectを使ってみた

【Flutter Widget of the Week #16】ClipRRectを使ってみた

zenn.dev

Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。

今回はClipRRectについての解説記事となっています。

【Flutter Widget of the Week #17】Heroを使ってみた

【Flutter Widget of the Week #17】Heroを使ってみた

zenn.dev

Flutter 公式のウィジェット紹介動画シリーズ、Widget of the Week で
紹介されたウィジェットを、一つ取り上げて解説する記事です。

今回はHeroについての解説記事となっています。

仙人「弟子よ。Firestoreからランダムなドキュメントを取得することはできるかの？」

仙人「弟子よ。Firestoreからランダムなドキュメントを取得することはできるかの？」

zenn.dev

Firestore からランダムなドキュメントを取得する方法について書かれた記事です。

全県取得する方法ではないランダムなドキュメントを取得する方法について紹介されています。

週刊Flutter大学の記事

先週週刊Flutter大学に追加された記事は以下になります。

Flutter ニュース 【2022年10月第3週】

本記事では Flutter ニュース として、2022年10月第3週に話題になったFlutter関連の情報や、 アップされた記事、YouTube動画の紹介を行います。 読むだけでFlutterの最新情報がキャッチアップできます。 ぜひ読んでみてください！

blog.flutteruniv.com

2022.10.17

１年間で5つのFlutterアプリをリリース！？ストリクトシステムズ株式会社の開発効率がすごい

Flutterを扱っている企業さんにインタビューし、日本のFlutterのイマを深ぼっていく新企画「今週のFlutter企業」が始まりました。記念すべき第一回の会社さんはFlutter大学メンバーが3人働いているストリクトシステムズ株式会社です。

blog.flutteruniv.com

2022.10.18

【 Dart 】 List の使い方 【 Flutter 】

Dart (Flutter) で頻出する、List についての解説記事です。 Listの作成方法から、用意されているメソッドまで、 用意されているほぼ全てを解説します。 辞書的に使える記事となっています。 ぜひ読んで使ってみてください！

blog.flutteruniv.com

2022.10.20

【 curved_navigation_bar 】おしゃれなNavigation Bar を実装しよう！【 Flutter 】

本記事では curved_navigation_bar パッケージを使った、 おしゃれな Navigation Bar の実装方法について解説します。 基本的な使い方からカスタマイズ方法まで、詳しく解説します。 ぜひ読んでみてください！

blog.flutteruniv.com

2022.10.21

まとめ

本記事ではFlutterニュースとして、
2022年10月第4週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。

この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。

編集後記（2022/10/24）