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

ニュース

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

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

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

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

  1. Flutter公式情報
    1. Flutter 2.10.4 リリース
    2. 今週のWidget: StatefulBuilder
  2. Flutterに関する話題
    1. Mondroid : Flutter製のオープンソースのMongodb クライアント
    2. Android 12のオーバースクロールへの対処法
    3. extended_phone_number_input パッケージ
    4. open_api_freezed_dio_builder パッケージ
  3. Flutterに関する記事
    1. 九州大学の非公式アプリを一カ月で作ってみた。
    2. Flutter Goldenをシンプルにする、Alchemistを使おう
    3. GoRouterでのFlutter画面遷移: Go vs Push
    4. Flutter Navigator 2.0を理解しよう
    5. ネイティブのコードを呼び出す、Flutterの自作プラグインの作成方法
  4. Flutterに関する動画
    1. 無限スクロールビュー
    2. 35 Flutter Tips, それはあなたの心を揺さぶるでしょう!
  5. Flutter大学メンバーがリリースしたアプリ
    1. Hash ~大学生限定コミュニティ~
    2. MinimalCoord ~ミニマリスト向けファンションShareアプリ~
  6. Flutter大学メンバーによる記事
    1. 初心者 flutter×ブロックチェーンに挑戦する
    2. Widgetについて学んでみる
    3. FireStoreの値を取得する
    4. 【Flutter】GoogleMapの表示からgeolocatorで現在地を取得まで
    5. 【Flutter】コピペでできる!GoogleMap+カードの滑らかなUIの作り方
    6. 【Flutter】結局初心者って何からするん?
    7. 【Flutter】ButtonやダイアログをPushした際、まとめて閉じたり、戻る方法
    8. 【Flutter】OSやデバイスにあったアプリアイコンをコマンド一発で生成する【flutter_launcher_icons】
    9. 【Flutter】最後にちょっとだけ実装してみませんか?
  7. Flutter逆引き辞典の追加ページ
  8. 週刊Flutter大学の記事
  9. まとめ
  10. 編集後記(2022/4/4)

Flutter公式情報

Flutter 2.10.4 リリース

Flutterのstable版として、2.10.4がリリースされました。

主にバグ修正となります。
Flutter Web × Freezedパッケージでクラッシュする問題等が解消されたそうです。

今週のWidget: StatefulBuilder

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

StatefulBuilderを使うと、特定の場所のみリビルドすることが可能となり、
パフォーマンスの向上が見込めます。

Flutterに関する話題

Mondroid : Flutter製のオープンソースのMongodb クライアント

mongodb(モンゴDB、ドキュメント指向データベース)をモバイルから扱える、
オープンソースのクライアントとして、Mondroid が話題となっていました。

Flutterで作られており、アプリのGitHubリポジトリのリンクが紹介されています。

Android 12のオーバースクロールへの対処法

Android 12を搭載した端末では、
オーバースクロールの際の効果が特殊です。(参考

これをFlutterで有効化する方法が紹介されています。

extended_phone_number_input パッケージ

extended_phone_number_input | Flutter Package
Phone input Flutter widget that supports country code, validation and contact picker

電話番号の前に着く国際電話識別番号を簡単に設定できるようにするパッケージ、extended_phone_number_inputパッケージがRedditで話題になっていました。

国際化対応して、電話番号の認証する場合に有用です。

open_api_freezed_dio_builder パッケージ

openapi_freezed_dio_builder | Dart Package
Generate models and API classes based on an OpenAPI document using Freezed and Dio.

OpenApiのyamlファイルから、
Dart のクライアントライブラリファイルを自動生成するパッケージ、
open_api_freezed_dio_builderがRedditで話題となっていました。(Reddit

web上でyamlファイルとdartファイルの対比を見れるサンプルも紹介されています。

Flutterに関する記事

九州大学の非公式アプリを一カ月で作ってみた。

九州大学の非公式アプリを一カ月で作ってみた。 - Qiita
はじめに 皆さんは、少し前に話題になった九州大学アプリをご存知でしょうか? 本アプリはTwitterなどのSNSで拡散されるなどして、AppStoreにて94位を記録いたしました。1 また、現在のインストール数は、九大生人口の20%...

過去問やニュースを取得できる、九州大学の非公式アプリについての記事です。

Flutterで、1ヶ月で作られたそうです。
時短でき、情報が多い、ということに注目して、Flutterを選定したとのことです。

Flutter Goldenをシンプルにする、Alchemistを使おう

Use Alchemist to simplify your Flutter Goldens
I've covered how to create goldens several times in my 100% Coverage post series. You can check them here. 100% Coverage - Guillaume BernosDiscover how to achie...

Golden testをより使いやすくするパッケージ、
Alchemistについて書かれた記事です。

実行環境に応じたGoldenを生成することができ、
CIに特化したGoldenを生成できるそうです。

GoRouterでのFlutter画面遷移: Go vs Push

Flutter Navigation with GoRouter: Go vs Push
An in-depth explanation of the difference between Go and Push when using GoRouter for declarative routing.

Flutter、go_routerのgoとpushの違いについての記事です。

goはjump,pushはstackのイメージとのことです。
gif付きでわかりやすく解説されています。

Flutter Navigator 2.0を理解しよう

Understanding Flutter Navigator 2.0 | Codemagic Blog
Navigation is a core concept in mobile app development. Well-managed navigation keeps your app organized and enhances its capabilities. Follow this step-by-step...

Flutterの画面遷移手法である、Navigator2.0、こちらの解説記事です。

基本的な使い方から、RouterDelegateの設定など少し難しい部分の解説まで
しっかりと行われています。

ネイティブのコードを呼び出す、Flutterの自作プラグインの作成方法

How to create a custom plugin in Flutter to call native platform code
Introduction In this tutorial, we will create a Flutter plugin which targets the Android and iOS platforms, and show how to invoke different methods from Dart, ...

Flutterで、ネイティブの機能を使ったプラグインの作成方法について書かれた記事です。

ネイティブとのデータのやりとり等について、丁寧に解説されています。

Flutterに関する動画

無限スクロールビュー

Flutterで無限スクロールを実装する方法についての解説記事です。

5分弱でサクッと学ぶことができます。

この無限スクロールの実装方法について、週刊Flutter大学でも記事を作成しました。
こちらも合わせてご覧ください。

35 Flutter Tips, それはあなたの心を揺さぶるでしょう!

Flutter開発に役立つ情報を紹介している動画です。

Pubspecのファイルのネスト化など、
35個もの情報を約11分で紹介されています。

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

Hash ~大学生限定コミュニティ~

‎Hash
‎・大学生限定コミュニティアプリ「Hash」って何? どうもHashを作った人です!Hashは大学生限定のコミュニティアプリで、大学生であれば誰でも登録することができます。 学生生活で気になる話題や言ってみたいところなど、さまざまな興味に応じてコミュニティを作成、閲覧してあなたにピッタリの居場所を見つけられる機能を提供...

ひろたかさんにより、
大学生限定コミュニティアプリ、『Hash』がリリースされました!

学生生活で気になる話題や言ってみたいところなど、
さまざまな興味に応じてコミュニティを作成、閲覧ができるアプリだそうです。

Flutter大学の質問相談会、質問Zoomにたくさん参加し、
アプリの改善をしていたのがとても印象的でした。

MinimalCoord ~ミニマリスト向けファンションShareアプリ~

‎MinimalCoord
‎「少ない服でオシャレに」をコンセプトに、ミニマリストさんの厳選したお気に入りファッションコーディネートを投稿するアプリ
MinimalCoord - Apps on Google Play
Minimalist limited coordination share app

ひかるさんにより、
ミニマリスト向けファンションShareアプリ『MinimalCoord』がリリースされました!

ミニマリストユーザーがいかに少ない服でオシャレをできるかシェアし合うアプリだそうです。

投稿型アプリに必須のブロック機能の追加など、
学んだことをZennに記事投稿している姿が印象的でした。

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

初心者 flutter×ブロックチェーンに挑戦する

初心者 flutter×ブロックチェーンに挑戦する 1 - Qiita
電子投票アプリをつくる まずは完コピから  Flutter大学とUNCHAINに所属していながら、ぜんぜん別のことをやっているというのも、だんだん気持ち悪くなってきたので、そろそろ二つを統合しようと思う。で、たまたまネットで見つけ...
初心者 flutter×ブロックチェーンに挑戦する 2 - Qiita
クリック二回、の裏に隠されていたもの まずは土台づくり  きのうは記事の完コピで、しかもRimixというなんだかとても便利なものを使ったから、いわばただの作業だったわけだけれど、今日からはもうちょっと頭を使って悩んでいくことにする...

Flutterとブロックチェーンを利用して、
電子投票アプリを作る過程について書かれた記事です。

現在まさに作成途中だそうで、試行錯誤しながら作成しているとのこと。
作成にあたっての詰まるポイントや解決策など、参考になりそうです。

Widgetについて学んでみる

Widgetについて学んでみる① - Qiita
flutter_slidable使ってみる flutter_slidableとは、却下できる方向性のあるスライドアクションを備えたスライド可能なリストアイテムのFlutter実装だと解説されていた... 無理矢理日本語に翻訳しました...
Widgetについて学んでみる② - Qiita
Checkbox ListTileの使い方|チェックボックスをListTileとして表示 Flutterでアプリを作るときは、TodoListから始まったりする。 UIの作り方が、まだよく分かっていないので部品を作るところから勉強し...
Widgetについて学んでみる③ - Qiita
ShowSnackBarの表示の仕方 公式ドキュメント 日本語の記事

flutter_slidableパッケージや、CheckBoxListTile Widgetなど、
色々なWidgetの実装について書かれた記事です。

それぞれサンプルコードも用意されていて、実装例を見ることができます。

FireStoreの値を取得する

FireStoreの値を取得する - Qiita
FireStoreの学習をやってみた。 参考にしたサイト 日本語の記事(こちらを参考にした) 公式ドキュメント Strea...

FireStoreの値の取得について書かれた記事です。

とてもシンプルにFireStoreの値の取得方法についてDartのサンプルコードが記述されています。

【Flutter】GoogleMapの表示からgeolocatorで現在地を取得まで

【Flutter】GoogleMapの表示からgeolocatorで現在地を取得まで

FlutterでのGoogleMapの表示からgeolocatorで現在地の取得までについて書かれた記事です。

スクリーンショットを多く用いて、丁寧に解説されています。

【Flutter】コピペでできる!GoogleMap+カードの滑らかなUIの作り方

【Flutter】コピペでできる!GoogleMap+カードの滑らかなUIの作り方

GoogleMapとカードの滑らかなUIの作り方について解説された記事です。

サンプルコードも紹介されているため、
紹介されているようなUIを作成したい際にかなり有用な記事です。

【Flutter】結局初心者って何からするん?

【Flutter】結局初心者って何からするん?

Flutter初心者がやるべきことについて、
アプリをリリースしている筆者の目線で紹介している記事です。

Flutterを触り始めた初心者が最初にやるべきことから、
困った時の相談の方法まで、しっかりとまとめられています。

【Flutter】ButtonやダイアログをPushした際、まとめて閉じたり、戻る方法

【Flutter】ButtonやダイアログをPushした際、まとめて閉じたり、戻る方法

Flutterでダイアログ等から画面を戻る際、
ダイアログを表示した画面よりさらに前の画面に戻る方法について書かれた記事です。

戻る方法のコードが端的に紹介されています。

【Flutter】OSやデバイスにあったアプリアイコンをコマンド一発で生成する【flutter_launcher_icons】

【Flutter】OSやデバイスにあったアプリアイコンをコマンド一発で生成する【flutter_launcher_icons】

flutter_lancher_iconsを用いた、アプリのランチャーアイコンの作成方法について
書かれた記事です。

Android と iOSだったり、開発環境と本番環境だったり、
それぞれの環境に応じたアイコンの作成方法について、丁寧に紹介されています。

【Flutter】最後にちょっとだけ実装してみませんか?

【Flutter】最後にちょっとだけ実装してみませんか?

Flutterでアプリを作成した際のワンポイントとして追加すると良い機能について
紹介している記事です。

振動機能など、追加するとワンランクアップするようなものを紹介されています。

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

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

4月1日より、Flutter逆引き辞典の更新が開始されました。
寄せられた質問に一問一答形式で回答しています。

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

週刊Flutter大学の記事

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

まとめ

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

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

編集後記(2022/4/4)

今週のFlutterニュースでした。

この場を借りて、Flutter大学のニュースを一つ紹介させてください。

Flutter大学HPがリニューアルされました!

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

以前のHPに比べ、見やすく、わかりやすくなっています。

内部的な話を紹介すると、なんとこのHP、Flutter Webでの作成となっています。
Flutter大学の有料メンバーなら、こちらの実装コードを見ることも可能です。

ぜひ上のリンクから、Flutter大学の新しいHPを覗いてみてください。

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

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