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

Flutterニュース ニュース

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

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

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

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

  1. Flutter公式情報
    1. FlutterPuzzleHack 締切迫る
  2. Flutterに関する話題
    1. Appwrite v0.13 リリース
    2. アニメーション付きのListViewやGrid View を実装できるパッケージ、shaky_animated_listview
  3. Flutterに関する記事
    1. Flutterでのstreamとfutureの違いって?
    2. Dart/Flutterで一番早いローカルデータベースパッケージは何?
    3. 一年間更新しなかった後のFlutterの話
    4. Flutter Riverpod 情報:FutureBuilderやStreamBuilderより、RiverpodのAsyncValueを使おう!
    5. Flutter と Websocketsを使ったリアルタイムデータ受信、送信の実装方法
    6. Flutter Does That – An Overview of Flutter Widgets (A Series)
    7. Almost Netflix: Flutter + Appwriteで Netflixのクローンを作ろう
    8. Flutter package の作り方とPub devへの公開の仕方
    9. FlutterレアWidgets選
  4. Flutterに関する動画
    1. Flutter RichText and TextSpan | Powerful Widgets
    2. Native + Animated Splash Screen | Flutter Tutorial [2022]
    3. Animation for Page Loading or Network Request Flutter
  5. Flutter大学の動画
    1. 2022年最新【初心者向け超入門】M1 MacでFlutterの環境構築
  6. Flutter大学メンバーによる記事
    1. 【Flutter】Looking up a deactivated widget’s ancestor〜をBuilderで解決した
    2. 【Flutter】Serverpodをちょっとだけ触ってみた
    3. 【Flutter】CodemagicでAndroidのbuildに失敗するので対応した
    4. Flexible と Expanded って何が違うんだっけ?
    5. 【入門】FlutterでDeepLinkを実装してみよう。
    6. Dart Data Classって最強♡
  7. 週刊Flutter大学の記事
  8. まとめ
  9. 編集後記(2022/3/14)

Flutter公式情報

FlutterPuzzleHack 締切迫る

1月より開催されていたFlutterのアプリコンテスト、
FlutterPuzzleHackの締切が間近となりました。
締切は【日本時間 3/15 7:00 AMまで 】となっています。

公開投票も3月から行われるようです。

Flutterに関する話題

Appwrite v0.13 リリース

Appwrite - Open-Source End-to-End Backend Server
Appwrite provides web and mobile developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

Firebaseの代替手段としてのオープンソースのプロジェクト、
Appwriteの v0.13がリリースされました。

FlutterのSDKも用意されており、今後外部データベースの選択肢となるかもしれません。

アニメーション付きのListViewやGrid View を実装できるパッケージ、shaky_animated_listview

shaky_animated_listview | Flutter Package
List animations to track your scroll changes on screen or your list first attachment to animated your list items with different transition rules.

アニメーション付きのListViewやGrid View を実装できるパッケージ、
shaky_animated_listviewが話題となりました。

パッケージページにgif画像付きでアニメーションが紹介されています。

Flutterに関する記事

Flutterでのstreamとfutureの違いって?

What is the difference between stream and future in Flutter?
In today's this vs that version of Flutter, we will see the difference between Streams and Futures. Streams and Futures are widely used when...

Stream と Future について、違いは何かを解説した記事です。

Stream と Future それぞれの解説も載っています。

この記事を参考にして週刊Flutter大学でも以下の記事を書いています。
合わせてご確認ください。

Dart/Flutterで一番早いローカルデータベースパッケージは何?

The Fastest Local Database in Dart/Flutter
ObjectBox is a gamechanger with its performance and AutoSync option

Flutterのlocal Database として何を使うのが良いのか?という記事です。

この記事では性能の良いパッケージとして、主にObjectBoxの紹介がされています。
簡単な使い方から、データのブラウザでの可視化についてまで解説されていました。

一年間更新しなかった後のFlutterの話

Flutter After a Year of Inactivity
Man leaves frontend project unattended for almost a year and is shocked to find it mostly still works.

要約すると、
「約一年間放置したFlutterのプロジェクトをアップデートしたけど、
とても楽にアップデートできた」
という記事です。

null safety だったりパッケージのアップデートに対応した様子が体験談として綴られています。

Flutter Riverpod 情報:FutureBuilderやStreamBuilderより、RiverpodのAsyncValueを使おう!

Flutter Riverpod Tip: Use AsyncValue rather than FutureBuilder or StreamBuilder
The AsyncValue class from the Riverpod package offers a much nicer API compared to AsyncSnapshot from the FutureBuilder and StreamBuilder widgets. Here's how to...

FutureBuilder や StreamBilderを使うより、
Riverpod の AsyncValue使った方が良い、
という記事です。

AsyncValueではerror や loading などの状態を、
明示的にコントロールできるのが強みです。

コードの比較画像もあり、わかりやすく解説されています。

Flutter と Websocketsを使ったリアルタイムデータ受信、送信の実装方法

How to receive data in real-time with Flutter and Websockets
Today, we will see how you can connect to a WebSocket through your Flutter app. Websockets are used widely in....

Flutter と Websocketsを使ってリアルタイムデータ通信を実装しよう、という記事です。

サーバーにデータを投げ、サーバーのデータ状況を取得し、表示する、
という実装方法を紹介しています。

ダミーサーバーも紹介されており、
簡単に実装の練習ができます。

Flutter Does That – An Overview of Flutter Widgets (A Series)

r/FlutterDev - Flutter Does That - An Overview of Flutter Widgets (A Series)
52 votes and 4 comments so far on Reddit

Redit上でFlutter の Widgetについて解説したスレッドです。
Stateful Widget と Stateless Widgetについて、
要点まとめて説明されています。

Almost Netflix: Flutter + Appwriteで Netflixのクローンを作ろう

Almost Netflix: A Netflix clone built with Flutter + Appwrite
Welcome to the third post in our Almost Netflix series! We’ll be building upon the project setup from yesterday and build a frontend for…

FlutterとオープンソースのバックエンドサービスのAppwriteを使って、
Netflixアプリのクローンを作ろう!という記事です。

状態管理手法としてProviderが使われていたり、
shared_preferenceやadaptive_dialogが使用されていたりと、
かなり勉強になります。

GitHubのソースコードも公開されています。

Flutter package の作り方とPub devへの公開の仕方

How to create Flutter package and publish it on Pub dev
Packages that are written in Dart. They might contain Flutter-specific functionality and depend on the Flutter Framework.

Flutterのパッケージの作り方、リリースの仕方について解説された記事です。

パッケージでアプリを細分化したい、パッケージを作りたい、
そんな時に有用な記事かと思います。

FlutterレアWidgets選

FlutterレアWidgets選

約3年間Flutterを触ってきた人の目線で、
ちょっとレアなWidgetをたくさん紹介している記事です。

codepenで使い方が書かれており、
記事中で実際に触って見ることができます。

Flutterに関する動画

Flutter RichText and TextSpan | Powerful Widgets

RichText と TextSpanの使い方についての解説動画です。

サブタイトル付きのタイトルなど、
ちょっと凝ったテキストを簡単に

2分くらいで、サクッと使い方を学ぶことができます。

Native + Animated Splash Screen | Flutter Tutorial [2022]

flutter_native_splashを使ったスプラッシュスクリーンの
ダークモード対応の方法と、
アニメーション付きのスプラッシュスクリーンの
実装方法についての解説動画です。

概要欄からソースコードを見ることが可能です。

Animation for Page Loading or Network Request Flutter

flutter_spinkitを使っておしゃれなローディング画面を作成しよう、という解説動画です。

シミュレータで実装例を示していて、
動画でそれぞれのアニメーションがわかりやすく解説されています。

Flutter大学の動画

2022年最新【初心者向け超入門】M1 MacでFlutterの環境構築

2022年最新版の、M1 MacでのFlutter環境構築の仕方についての解説動画が追加されました。

M1 Macでは一部追加の対応が必要となります。
そこも含めて、全体の流れをわかりやすく解説しています。

これからFlutterを始める方にはかなり助かる動画となっています。
ぜひご覧ください!

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

今週Flutter大学メンバーが書いたFlutter関連の記事を紹介します。

【Flutter】Looking up a deactivated widget’s ancestor〜をBuilderで解決した

【Flutter】Looking up a deactivated widget's ancestor〜をBuilderで解決した

AlertDialogを使用した際のエラーの解消方法についての記事です。

発生状況から、発生事象、解消方法、なぜ解消したのかの考察と、
丁寧に解説されています。

【Flutter】Serverpodをちょっとだけ触ってみた

【Flutter】Serverpodをちょっとだけ触ってみた

先週話題となったServerpodを早速使ってみて解説した記事です。

導入の方法から最初の実行まで、スクリーンショット付きで詳細に解説されています。

【Flutter】CodemagicでAndroidのbuildに失敗するので対応した

【Flutter】CodemagicでAndroidのbuildに失敗するので対応した

google-services.jsonをGitHubに公開していないがために起こる、
Codemagicのビルドエラーに対する対処法の記事です。

CI/CDではよく起こる事象かと思いますが、
スクリーンショット付きで丁寧に対処法について解説されています。

Flexible と Expanded って何が違うんだっけ?

Flexible と Expanded って何が違うんだっけ?

同じように思えるFlexibleとExpanded、
実際のところ何が違うのかについて解説した記事です。

触って確かめられるサンプルコード付きで詳しく解説されています。

【入門】FlutterでDeepLinkを実装してみよう。

【入門】FlutterでDeepLinkを実装してみよう。

WebサイトでTwitterのリンクを触ると、Twitterのアプリが開く、
そんなリンクをDeepLinkと言います。

このDeepLinkをFlutterにて実装するにはどうすればいいか、という解説記事です。

この記事の内容について、
3/16 (水) 21:00 にFlutter 大学内で行われる共同勉強会にて
筆者のまつまるさんが解説されます。

勉強会の参加、アーカイブ動画の閲覧はFlutter大学メンバーのみ可能となっています。
Flutter大学への入会は以下リンクから。

Flutter大学
Flutterエンジニアに特化した学習コミュニティ

Dart Data Classって最強♡

Dart Data Classって最強♡

データクラスとして持っていると便利なCopyWithなどのメソッドを、
コマンド一つで実装してくれるAndroid Studio のプラグイン、
Dart Data Classについて解説した記事です。

導入方法から使い方まで、簡潔にわかりやすく解説されています。

週刊Flutter大学の記事

週刊Flutter大学で先週アップロードした記事を紹介します。

まとめ

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

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

編集後記(2022/3/14)

先週話題になったこととして、
「宣言的UIでMVVMを使うのは良いか?」
という話がありました。

「SwiftUIでMVVMを採用するのは止めよう」と思い至った理由 - Qiita
宣言的UIに、MVVMって不要なのでは? iOS開発の現場で、宣言的UIが当たり前に使われるような時代になりました。 SwiftUIの開発体験、素晴らしい です。最高です。 しかし最近、SwiftUIで当たり前のように 「MVVM...

同じく宣言的UIであるFlutterだとどうなのか、簡単に話そうと思います。
(あくまで個人の見解です。)

この話は、Stateful Widgetで書けば簡単に書けるものを、
何でもかんでもStateless Widget + 状態管理手法で書くのって、
本当に「良い」んだっけ、ということだと思っています。

宣言的 UI では、 UI = f(state)と書かれるように、
状態に応じてView(UI)を表現します。
View が 状態を持っている、Stateful Widgetのイメージです。

一方でMVVMでは状態をViewModelが持っていて、
状態の変化をViewに伝える、というアーキテクチャだと理解しています。

宣言的UIをMVVMで書く、ということは、
Viewが状態として持っていたものをわざわざ分けて、ViewModelに持たせる、ということです。

flutterでいうと、状態に応じてUIを変えるStateful Widgetで書かれたコードを、
Stateless Widget + 状態に分けて書く、ということだと思っています。

もちろん、状態を分けて書くメリットもあるので、
どちらが良いとは言えないと思いますが、
個人的には画面内で完結する状態
(カウンターアプリの_counterとか、スイッチオンオフのフラグとか)
がある場合は無理に分けず、StatefulWidgetで書く方が好きです。

あなたはどう思いますか?
私のTwitter 等であなたの意見を聞かせてもらえると嬉しいです。
面白い議題だと思うので、ぜひ考えてみてください。

週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。

タイトルとURLをコピーしました