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

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

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

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

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

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

Dart のためのInteractive Shell (REPL)

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

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

calendar_day_view パッケージ

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

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

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

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

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

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 https://rxdb.info/ - 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 Code with Andrea.

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研修のビデオを見ていたら、講師が冒頭でそんなようなことを言っていた。きっとそれは正しい。なので、いったんは、私もそろそろ初心者を冠するのは卒業しようかと思ったのだが、結局、また書いている。 ...

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

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

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

構造を理解する Setup 2 公式ドキュメントのDeepLによる翻訳続き必要なもの既存のFlutterプロジェクト（ない場合は新規に作成します）既存のUnityプロジェクト（ない場合は新規に作成することができます）。もちろん新規に作成してもよいのだけ...

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

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

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

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

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

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

【Flutter web】Calling javascript functions with packages:js

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

外部の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 columnList, List rowList) { // ListViewで縦スクロール, SingleChildS...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flutter ニュース【2022年10月第3週】 | 週刊Flutter大学

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

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

週刊Flutter大学の記事

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

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

【 Dart 】 List の使い方【 Flutter 】 | 週刊Flutter大学

【 curved_navigation_bar 】おしゃれなNavigation Bar を実装しよう！【 Flutter 】 | 週刊Flutter大学