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

ニュース

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

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

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

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

Flutter公式情報

RepaintBoundary (Widget of the Week)

Flutterの公式Widget紹介動画シリーズ、Widget of the Week が更新されました。

アニメーションなどでの再描画領域を制限する、RepaintBoundaryが紹介されています。

MaterialStateProperties | Decoding Flutter

Flutterについて深堀りしていく動画シリーズ、Decoding Flutterが更新されました。

今回は、ボタンにフォーカスされた時や、
ホバーされた時などの状態を管理するMaterialStateについての解説動画です。
MaterialStateに応じて色を変える、プロパティ設定が少なくて済む方法について解説されています。

Flutterに関する話題

path_animator パッケージ

path_animator | Flutter Package
A flutter package to draw path with animation on the canvas

Canvasで描いた線をアニメーションで表示するパッケージ、
path_animatorパッケージがRedditで話題になっていました。

CanvasのdrawPathメソッドのpathに、作成したAnimatedPathを渡すだけで実装可能です。

こちらについて、週刊Flutter大学でも記事にしています。
併せてご確認ください。

sliding_clipped_nav_barパッケージ

sliding_clipped_nav_bar | Flutter Package
Bottom Navigation Bar with sliding menu icon and text with clipping effect, it also has ripple effect when tapped.

sliding_clipped_nav_barパッケージがRedditで話題になっていました。

BottomNavigationBarにアニメーションをつけ、
少しオシャレにすることが可能です。
パッケージ紹介ページにアニメーションのgifがあります。

Flutterに関する記事

Very good layered architecture in Flutter

Very good layered architecture in Flutter
Structuring code is one of the big – if not the most important – challenges when building large-scale applications. Learn more about our approach to app archite...

Flutterのプロジェクトのアーキテクチャについて書かれた記事がRedditで話題になっていました。

BloCを使ったアーキテクチャで、階層に分かれたアーキテクチャが紹介されています。

VSCodeでDartのBuild Runnerを統合しよう

Integrating Dart's Build Runner with VSCode
VSCode Tasks and Code Generation after Save

VScode で特定のファイルを保存したときに
自動でBuild Runner を走らせる方法について解説された記事です。

freezedなどのパッケージで使うbuild runnerをちょっとした設定で自動化できます。

API データのローカルコピーを保存する、リポジトリパターンのデータレイヤーの実装

Data layer in Flutter V2 | Use the Repository Pattern to keep a local copy of your API data
A couple of months ago I wrote an article in which I explained how to keep a local copy of data downloaded from an API using the Repository Pattern. In this art...

リポジトリパターンで、APIから取得したデータをローカルに保存するアプリケーションの
作成方法について書かれた記事です。

dioパッケージや、sqfliteパッケージなど、
さまざまなパッケージの使用例が一つにまとまっています。

Flutterに関する動画

RESPONSIVE DESIGN • Flutter Tutorial

画面の大きさによってレイアウトを変える、
レスポンシブなデザインの作り方に関しての解説動画です。

Layout Builderを使った方法について学ぶことができます。

Flutter大学メンバーがリリースしたアプリ

サポコン ~ギタリスト用作曲支援アプリ~

‎サポコン
‎ギタリスト必見!あなたの作曲アイデアをボタンを押していくだけで形にできます。 自分の作りたいベースのコードに合った、有名コード進行やダイアトニックコードをワンステップですぐに検索できます! あなたが作曲したいと思ったら、まずはベースになるコードを決めます。 あとは一覧で出てくるテンプレートのコード進行やフレーズを、パ...
サポコン - Apps on Google Play
ギタリスト必見!あなたの作曲アイデアをボタンを押していくだけで形にできます。有名なコード進行をワンステップで検索可能。あなたの作曲活動をサポートしてくれます。

栗田学さんによって、
ギタリストのための作曲支援アプリ、『サポコン』がリリースされました!

音楽を作曲するのにとても大事な要素となるコード進行の代表例の表示機能から、
実際にコード進行を作ってみて視聴できる機能まで用意されています。

Flutterの作りやすさにより、
両プラットフォームの対応をスピード感を持って作ることができたとのことです!

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

FlutterでHTTPリクエストやってみる。

FlutterでHTTPリクエストやってみる。 - Qiita
HTTP通信をやってみる Flutter: 2.8.0を使用 こちらのサイトのAPIを使用 pabspec.yaml name: getx_app description: A new Flut...

FlutterでHTTPリクエストを実行するサンプルコードが紹介されています。

コードと実行結果を載せ、SNS風のUIを作成する部分まで記載されています。

Flutter [Android Studio]FVMを超基礎的なことから設定していく

Flutter [Android Studio]FVMを超基礎的なことから設定していく - Qiita
FVMの導入方法 今回私がFVMの設定で躓いた点を述べ、その解決策をまとめて記しておきます。 補足:筆者はM1 Macを使って行いました。 初めに 基本的にFVMの大まかな設定方法はこちらを見て貰えばわかります。 まずFVMてなん...

Flutter、Android StudioでFVMを設定する方法について書かれた記事です。

すでにFVMが適用されているプロジェクトに対し、
自分の環境でFVMを使用する方法について、詰まったポイントを中心に丁寧に解説されています。

DartのStreamについて学んでみる

DartのStreamについて学んでみる - Qiita
Streamとは? 公式のドキュメントのリンク 非同期プログラミング:ストリームについて シンク< T >クラスについて https...

DartのStreamについて、学んだ内容を噛み砕いて解説している記事です。

FlutterではなくDartのプロジェクトとしてさまざまな検証を行った結果が記載されています。

BitriseからのSlack通知にBuildにかかった時間を表示させる

BitriseからのSlack通知にBuildにかかった時間を表示させる

FlutterアプリケーションのCI/CDを行っているBitrizeのSlack通知にて、
Buildにかかった時間を表示させる方法について解説されています。

環境変数に無い値をどうやって表示させるかについて、
試行錯誤した結果をわかりやすくまとめています。

【Flutter】Riverpodで部分再描画のConsumer()の使い方

【Flutter】Riverpodで部分再描画のConsumer()の使い方

Riverpodで部分的な再描画を指示するためのConsumer()の使い方について記載された記事です。

Providerパッケージでは良く使用されているConsumer()ですが、
これがRiverpodにも用意されていることを知らない方もいるのではないでしょうか。
こちらの使い方についてサンプルコードを元に詳しく解説されています。

【Flutter】カメラ機能を実装する

【Flutter】カメラ機能を実装する

Flutterでカメラ機能を実装する方法について解説された記事です。

カメラの起動から、写真の撮影、撮影した画像の表示までの機能の実装方法が書かれています。
実際の動きの画像から、サンプルのプロジェクトまで紹介されています。

【2022年】おすすめのロガーパッケージ4選【Flutter】

【2022年】おすすめのロガーパッケージ4選【Flutter】

Flutterプロジェクトのログ出力をサポートするロガーパッケージについて、
オススメのものを4つ紹介している記事です。

それぞれの特徴について紹介の上、機能の比較の表まで用意されています。

【Flutter】初めてのRiverpod+Hooks+Freezed+Firebase

【Flutter】初めてのRiverpod+Hooks+Freezed+Firebase

表題の通り、Riverpod, Hooks, Freezed, Firebaseを組み合わせたアプリケーションの
作り方を紹介した記事です。

各機能について詳しく解説の上、作成した買い物リストアプリを紹介しています。

Flutter逆引き辞典の追加ページ

Flutter逆引き辞典
Flutterに関するちょっとしたお悩みを解決する逆引き辞典です。 寄せられた質問に 1 問 1 答形式でお答えしていきます! 1 日 1 問ずつ解答予定です。 質問を随時募集しています! 「〇〇したい」という形式でIssueに投稿していただけると嬉しいです。 質問はこちらへ

先週の追加ページは以下になります。

週刊Flutter大学の記事

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

まとめ

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

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

編集後記(2022/4/18)

Flutterに関する動画でレスポンシブにする方法の動画を紹介しました。

アプリのレイアウトを考える時、
小さい端末でも大きい端末でもレイアウトの崩れなく
UIが表示できるよう、あなたは意識されていますでしょうか。

MediaQueryを使ったりLayoutBuilderを使ったり、
方法はさまざまありますが、複数の大きさの画面に対応しておくと
アプリのレビュー等でひっかからずに済むので、
なるべく早いうちから対応しておきたいものとなっています。

今回紹介した動画は簡単な例で実装方法を紹介されているので、
一度見ておくと実装に悩まずに済むかと思います。

ぜひ見てみてレスポンシブなアプリを作成してみてください。

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

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