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 パッケージ
Canvasで描いた線をアニメーションで表示するパッケージ、
path_animatorパッケージがRedditで話題になっていました。
CanvasのdrawPathメソッドのpathに、作成したAnimatedPathを渡すだけで実装可能です。
こちらについて、週刊Flutter大学でも記事にしています。
併せてご確認ください。
sliding_clipped_nav_barパッケージ
sliding_clipped_nav_barパッケージがRedditで話題になっていました。
BottomNavigationBarにアニメーションをつけ、
少しオシャレにすることが可能です。
パッケージ紹介ページにアニメーションのgifがあります。
Flutterに関する記事
Very good layered architecture in Flutter
Flutterのプロジェクトのアーキテクチャについて書かれた記事がRedditで話題になっていました。
BloCを使ったアーキテクチャで、階層に分かれたアーキテクチャが紹介されています。
VSCodeでDartのBuild Runnerを統合しよう
VScode で特定のファイルを保存したときに
自動でBuild Runner を走らせる方法について解説された記事です。
freezedなどのパッケージで使うbuild runnerをちょっとした設定で自動化できます。
API データのローカルコピーを保存する、リポジトリパターンのデータレイヤーの実装
リポジトリパターンで、APIから取得したデータをローカルに保存するアプリケーションの
作成方法について書かれた記事です。
dioパッケージや、sqfliteパッケージなど、
さまざまなパッケージの使用例が一つにまとまっています。
Flutterに関する動画
RESPONSIVE DESIGN • Flutter Tutorial
画面の大きさによってレイアウトを変える、
レスポンシブなデザインの作り方に関しての解説動画です。
Layout Builderを使った方法について学ぶことができます。
Flutter大学メンバーがリリースしたアプリ
サポコン ~ギタリスト用作曲支援アプリ~
栗田学さんによって、
ギタリストのための作曲支援アプリ、『サポコン』がリリースされました！
音楽を作曲するのにとても大事な要素となるコード進行の代表例の表示機能から、
実際にコード進行を作ってみて視聴できる機能まで用意されています。
Flutterの作りやすさにより、
両プラットフォームの対応をスピード感を持って作ることができたとのことです！
Flutter大学メンバーによる記事
FlutterでHTTPリクエストやってみる。
FlutterでHTTPリクエストを実行するサンプルコードが紹介されています。
コードと実行結果を載せ、SNS風のUIを作成する部分まで記載されています。
Flutter [Android Studio]FVMを超基礎的なことから設定していく
Flutter、Android StudioでFVMを設定する方法について書かれた記事です。
すでにFVMが適用されているプロジェクトに対し、
自分の環境でFVMを使用する方法について、詰まったポイントを中心に丁寧に解説されています。
DartのStreamについて学んでみる
DartのStreamについて、学んだ内容を噛み砕いて解説している記事です。
FlutterではなくDartのプロジェクトとしてさまざまな検証を行った結果が記載されています。
BitriseからのSlack通知にBuildにかかった時間を表示させる
FlutterアプリケーションのCI/CDを行っているBitrizeのSlack通知にて、
Buildにかかった時間を表示させる方法について解説されています。
環境変数に無い値をどうやって表示させるかについて、
試行錯誤した結果をわかりやすくまとめています。
【Flutter】Riverpodで部分再描画のConsumer()の使い方
Riverpodで部分的な再描画を指示するためのConsumer()の使い方について記載された記事です。
Providerパッケージでは良く使用されているConsumer()ですが、
これがRiverpodにも用意されていることを知らない方もいるのではないでしょうか。
こちらの使い方についてサンプルコードを元に詳しく解説されています。
【Flutter】カメラ機能を実装する
Flutterでカメラ機能を実装する方法について解説された記事です。
カメラの起動から、写真の撮影、撮影した画像の表示までの機能の実装方法が書かれています。
実際の動きの画像から、サンプルのプロジェクトまで紹介されています。
【2022年】おすすめのロガーパッケージ4選【Flutter】
Flutterプロジェクトのログ出力をサポートするロガーパッケージについて、
オススメのものを４つ紹介している記事です。
それぞれの特徴について紹介の上、機能の比較の表まで用意されています。
【Flutter】初めてのRiverpod+Hooks+Freezed+Firebase
表題の通り、Riverpod, Hooks, Freezed, Firebaseを組み合わせたアプリケーションの
作り方を紹介した記事です。
各機能について詳しく解説の上、作成した買い物リストアプリを紹介しています。
Flutter逆引き辞典の追加ページ
先週の追加ページは以下になります。
週刊Flutter大学の記事
先週週刊Flutter大学に追加された記事は以下になります。
まとめ
本記事ではFlutterニュースとして、
2022年4月第3週に話題になったFlutter関連の情報や、
アップされた記事、YouTube動画の紹介を行いました。
この記事が、みなさんのFlutterアプリ開発の一助となれば幸いです。
Flutterを一緒に学んでみませんか？
Flutter エンジニアに特化した学習コミュニティ、Flutter大学への入会は、
以下の画像リンクから。
編集後記（2022/4/18）
Flutterに関する動画でレスポンシブにする方法の動画を紹介しました。
アプリのレイアウトを考える時、
小さい端末でも大きい端末でもレイアウトの崩れなく
UIが表示できるよう、あなたは意識されていますでしょうか。
MediaQueryを使ったりLayoutBuilderを使ったり、
方法はさまざまありますが、複数の大きさの画面に対応しておくと
アプリのレビュー等でひっかからずに済むので、
なるべく早いうちから対応しておきたいものとなっています。
今回紹介した動画は簡単な例で実装方法を紹介されているので、
一度見ておくと実装に悩まずに済むかと思います。
ぜひ見てみてレスポンシブなアプリを作成してみてください。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。
