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

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

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

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

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

Flutterに関する話題

どのIDEを使っているかのアンケート

IDE(統合開発環境)として何を使っているか、
アンケートをとったスレッドがRedditで話題となっていました。

Android Studioが約24%、VScodeが約61%という結果で、
VScodeを使っている人が多いようです。
(詳しい得票数は上のリンクからご確認ください。)

IDEの選択の参考になれば幸いです。

Flutter Puzzle Hack 作品集

Flutter Puzzle Hack Projects | Play Online + Source Code | Flutter Gems
Flutter Gems is a curated package guide for Flutter which functionally categorizes some of the most useful and popular flutter packages available on pub.dev

今年行われたハッカソンであるFlutter Puzzle Hack の投稿作品で、
選りすぐりのものを紹介しているページです。

実際にプレイできるページのリンクや、
ソースコードなどがまとめられています。

flutter_tree パッケージ

flutter_tree | Flutter package
Flutter tree widget plugin, you can use this plugin to show a tree like layout, some thing a department tree.

Flutterで以下のようなツリー構造を実装できるパッケージ、
flutter_treeが話題となっていました。

  • あああ
    • いいい
    • ううう

タップで出すように設定する、
出るまでのローディングを表示する、など色々とできるようです。

audio_waveforms パッケージ

audio_waveforms | Flutter package
A Flutter package that allow you to generate waveform while recording audio or from audio file.

音声録音と録音中の波形を表示してくれるパッケージ、
audio_waveformsがRedditで話題となっていました。

まだリリースしたてのようですが、
見た目よく音声録音したいアプリに良いパッケージです

install_referrer パッケージ

install_referrer | Flutter package
Detect from where your application was installed (Google Play, App Store, TestFlight…)

アプリがどこからインストールされたものかを検知するプラグイン、
install_referrerが話題となっていました。

iOSだったら、AppStoreからインストールされたものか、
TestFlightからインストールされたものかを検知できるようです。

Flutterに関する記事

FlutterのCupertinoTabBarの高さやTextStyleを自由に変更したい

FlutterのCupertinoTabBarの高さやTextStyleを自由に変更したい - Qiita
はじめにアプリの画面切り替えに使うTabBarの選択肢として、CupertinoTabBarは便利ですが、CupertinoTabBarにもう少し設定を加えたい!って思っても、引数に自分が調整…

CupertinoTabBarの高さやTextStyleを自由に変更する方法についての記事。

この記事で、既存のWidget クラスを継承して、
必要な部分をオーバーライドして書き換える、という方法について学べます。

FlutterでChromeの拡張機能を作ろう

Vercel Security Checkpoint

Chromeの拡張機能をFlutterで作る方法についての解説記事です。

設定はごく僅かで、簡単にChromeの拡張機能としてアプリを作成できます。

こちらの記事の日本語版として、週刊Flutter大学で記事を出しています。
合わせてご確認ください。

Cocoapodを使ってFlutterモジュールを統合しよう

Integrate flutter modules with Cocoapods
Announcing cocoapods plugin: cocoapods-embed-flutter, providing a way to declare flutter modules as target dependency in Podfile.

既存のiOSプロジェクトにflutterを埋め込むのを楽にする方法として、
cocoapods-embed-flutterプラグインを使う方法を紹介した記事が話題になっていました。

公式の複雑な方法に対し、シンプルに解決できるとのことです。

Flutterのプロジェクト構造:機能優先か、レイヤー優先か?

Flutter Project Structure: Feature-first or Layer-first?
An overview of the feature-first and layer-first approaches when choosing a project structure for medium/large Flutter apps, along with their tradeoffs and comm...

Flutterのプロジェクト内のフォルダ分けの方法について、
先週紹介したRiverpod のアーキテクチャをベースに、
レイヤー優先で分ける方法と、機能優先で分ける方法の紹介記事です。

フォルダ分けの方法に悩んでる方は一度読んでみることをお勧めします。

FlutterのBoxDecoration バックグラウンドアニメーションの修正

Fixing BoxDecoration background animation in Flutter
I wrote a Flutter package that lets you smoothly animate color, gradient and image background in the Container widget.

Containerをアニメーションで変化させる際、
どのようにしたらスムーズに変化させられるか、の考察記事です。

結論として作成された筆者のパッケージも紹介されており、
記事内で比較のgifが提示されています。

Flutterに関する動画

Flutterでマインスイーパを作ろう

Flutterでマインスイーパを作ろう、という動画です。

コーディングの様子を流しているだけの動画ですが、
特別なパッケージも使わずにシンプルにマインスイーパを作成しています。

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

FlutterのWidgetについて学び直してみる

FlutterのWidgetについて、学び直してみる。 - Qiita
FlutterのWidgetの種類こちらが、公式のドキュメントいっぱいありますね...今回は簡単…

基礎的なWidgetの使い方についての紹介記事です。

スクリーンショットやコードを交えて、色々な用法を紹介されています。

【Flutter】just_audioを使って音声ファイルを再生する

【Flutter】just_audioを使って音声ファイルを再生する - Qiita
概要Flutterで音声ファイルの再生を可能にするパッケージはいくつかありますが、この記事ではjust_audioを使って、基本となる再生とバックグラウンド再生などを解説していきますその1: 音…

Flutterで音声ファイルを再生可能にするパッケージ、
just_audioの使い方の解説記事です。

一つ一つ、図や動画も交えて丁寧に解説されています。

【Flutter】音声ファイルをバックグラウンド再生する

【Flutter】音声ファイルをバックグラウンド再生する - Qiita
概要Flutterにて音声ファイルを再生するのにjust_audioを使いますが、実際アプリとして使うような場合はバックグラウンド再生もやりたいですよね。今回はjust_audioパッケージに加…

音声ファイルのバックグラウンド再生を可能にする実装方法についての解説記事です。

上のjust_audioパッケージに加えて、audio_seriveパッケージの使用方法について、
丁寧に解説されています。

バックグラウンドでのプログレスバーの動作にも対応しており、
かなり参考になる記事かと思います。

FlutterのLogin画面のバリデーションについて学んでみた!

FlutterのLogin画面のバリデーションについて学んでみた! - Qiita
入力フォームのエラーメッセージの表示の仕方公式ドキュメントのはこちら 'pack…

Login画面の入力フォームをベースに、
TextFormFieldのvalidationの方法について学べる記事です。

正規表現を使った書き方についても学ぶことができます。

MultiProvider classとは?

MultiProvider classとは? - Qiita
Providerを勉強し直してみた...今まで、ChageNotifire、Consumerし使ったことがなかった。Provider.of(context);だとか、context.watch<…

Flutterの状態管理手法、ProviderのMultiProviderについて解説した記事です。

サンプルをベースにわからないところを試行錯誤し、解決されています。

MVVM学んでみる

MVVM学んでみる - Qiita
配列を操作する簡単なサンプルを作ったflutterバージョン: 2.5.2状態管理: Provider6.0.2フォルダ構成lib├── main.dart├── models│ └─…

Providerを使ったシンプルなサンプルプロジェクトの紹介記事です。

ViewModelとViewの分離をしっかり行い、
リストビューへの反映をさせています。

基礎を学ぶのに良いプロジェクトだと思います。

【Flutter×Firebase】ユーザーのブロック機能の実装

Zenn

Flutter × Firebaseでのユーザーのブロック機能の実装方法についての解説記事です。

コードベースで実装方法を解説されています。

投稿型アプリでAppleの審査を受ける際に必須となる機能なので、
この実装例を提示してもらえるのは助かりますね。

flutter_native_splash エラーで1日無くなった話・・・

Zenn

flutter_native_splashを使っていて詰まった点の共有記事です。

タイプミスは見つけるのに時間がかかるので、
このような事例の共有はありがたいです。

【Flutter】AndroidのエミュレータでGoogleMapが表示されない時の解決法

【Flutter】AndroidのエミュレータでGoogleMapが表示されない時の解決法

google_maps_flutterとgeolocatorを使ってGoogle Mapの表示を実装するにあたり、
エミュレータでの表示がされない原因とその解決策についての記事です。

結構落とし穴なポイントかと思います。
事例として覚えておきたいです。

FlutterWebでFirebaseAuthのcurrentUserがリロード時にnullになることに対しての対処法

FlutterWebでFirebaseAuthのcurrentUserがリロード時にnullになることに対しての対処法

FlutterWebでFirebaseAuthのcurrentUserが
リロード時にnullになることに対しての対処法について解説した記事です。

アプリにはないFlutterWeb特有のブラウザでのリロードに関する
ハマりポイントについて解説されています。

FlutterWeb とFirebaseAuthを併用する際に覚えておきたいです。

週刊Flutter大学の記事

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

まとめ

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

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

Flutterを一緒に学んでみませんか?
Flutter エンジニアに特化した学習コミュニティ、Flutter大学への入会は、
以下の画像リンクから。



編集後記(2022/3/28)

今週は特にFlutter大学メンバーの記事が多い週でした。
週刊Flutter大学の記事も合わせるとなんと14本のFlutter関連の記事が上がっています。
特に「今週集中して記事を書こう!」とか呼びかけしていません。
それなのにこの本数は本当に凄いと思います。

12月のアドベントカレンダーはどうなってしまうんでしょう?
2つくらいカレンダーを作らないと追いつかないかもしれませんね。

記事を書く、というのは頭の中の整理にもなるし、ノウハウの共有にもなる、
一石二鳥の取り組みだと個人的に思っています。

ちょっとしたエラーの対処法についてまとめた記事でもなんでも良いので、
みなさんもぜひ記事を書いてみてはいかがでしょうか。

きっとエンジニア生活が豊かになりますよ。

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

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