Flutterでアプリを開発していると、API通信などの「非同期処理」を扱う場面が多くあります。
しかし、単にFutureやasync/awaitを使うだけでは、「ロード中」「成功」「失敗」といった状態を安全かつ明確に扱うのが難しくなります。
そこで、RiverpodのAsyncValueを使うことで、非同期処理の状態を一元的に管理し、UIとロジックをきれいに分離できるようになります。
本レポートでは、 AsyncValueの仕組みと活用方法を整理し、非同期状態管理の理解を深めます。
AsyncValueは、Riverpodが提供する「非同期状態を安全に表現するためのクラス」です。
3つの状態を明確に持つのが特徴です。
現在、Flutterでアプリ開発を行うにあたり、さまざまな状態管理の方法があることを学びました。
その中でも、Hooks と Riverpod は開発の効率化やコードの可読性向上に大きく貢献する技術です。
今回はこの2つの仕組みについて整理し、理解を深めることを目的とします。
Flutterにおける状態管理とは、アプリの「状態（State）」をどのように保持し、更新し、UIに反映させるかを管理することです。
たとえば、ボタンを押したときにカウントが増えるような画面では、カウント値（状態）を保持し、それをUIに反映させる必要があります。
Flutter Hooks は、React Hooksの考え方をFlutterに取り入れたパッケージです。
StatefulWidgetでよく使う「状態を保持する処理」や「ライフサイクル処理」を、よりシンプルに書けるようにする仕組みです。
flutterの標準カウンターアプリを、状態管理に Riverpod、データクラスに Freezed を使って実装します。
flutter開発に必須のライブラリなので使い方を習得していきましょう！
完成系はこんな感じです。
(さらに…)最近flutterの学習を始めました。web系の開発しかやってこなかったのでファイルの構成やコードの見方に苦戦しました。ここではフォルダの構成からコードの追い方について説明していきます。
os mac
flutter-version 3.27.1
何でもいいので以下のコマンドでプロジェクトを作成してください。
flutter create [プロジェクト名]
(さらに…)この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
使用技術はFlutterです。
今回は、SSO認証として、MicrosoftのSSO機能(MSAL)を実装したいと思います！
(本記事では、iOSのみご紹介します。)
FlutterアプリでMicrosoftのSSOを行うには、Azureにアプリを登録する
必要があります。この後のコーディングはそれほど難しくないですが、
ここがかなり厄介です。
この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
そこで今回は、ポータルアプリに欠かせない、スケジュール機能を実装
すべく、学習した内容をご紹介したいと思います。
使用技術はFlutterです。
①月選択機能(MonthPicker)
②カレンダーの月/週単位表示機能
③イベント日がある日を分かりやすく見せる機能
この取り組みは、最近当社でグループウェアの見直しを行なっており、
運用が変わる点もあるため、使いやすいスマホアプリがあればいいな。と
個人的にノウハウを形成していっているところです。
そこで今回は、FlutterのPDF Viewerを用いて、簡単な電子書籍の
モックを実装しましたので、その過程を共有したいと思います。
ポータルアプリにPDF？と思った方もいらっしゃるかもしれません。
実はよく使う機能なのです。例えば、企業の経営計画書や朝礼で唱和する
ような社訓を表示したり、掲示板機能でPDFをアップロードしたり、
使い方は様々で、それなりに需要があることが分かります。
PDFを表示するのは、簡単なようで実は少しコツが要ります。
今回は単純なPDFを表示するプログラムを少しずつ噛み砕いて
ご紹介しようと思います。
今回はFlutterのwidget管理において、個人的にこれが答えだ！
と思うものを見つけたので、この技術について学習した内容を、
ハンズオン形式でお伝えします。
もったいぶってすみません、その技術とは、「Widgetbook」のことです。
Widgetbook → Widgetbook (docs.page)
こちらのWidgetbookを使うことで、アプリ内で使用されているそれぞれの
widgetをカタログ形式で参照することができるライブラリです。
・実装したwidgetを視覚的に確認できる。
基本的にコードベースで作成したものは、実行してみるまでその実態を
確認できません。しかし、Widgetbookは、ツールを立ち上げるだけで
全てのwidgetを表示することが出来ます。
このメリットを活かして、お客様にデザインの確認を依頼することが
出来たり、メンバ間でwidgetの共有が容易になったりします。
・widgetを階層化して整理することができる。
Widgetbookのカタログでは、閲覧するためのメニューがありますが、
このメニュー内のwidgetをフォルダにまとめたり、整理することが
出来るので、カラーごとに分けたり、種類ごとに分けたりと、集計や
管理が容易になります。
・デバイス設定を反映させた見た目を確認できる。
基本的にはブラウザでそのカタログを開くこととなるWidgetbookで
あるが、カタログのBuilderでAddonのオプションを設定することで
簡単にライトモード/ダークモードの見た目を確認できます。
通常、モバイルアプリを開発するには、swiftでiOSを、javaやkotlinで
Androidを開発しますが、クロスプラットフォームで開発できるものも
存在します。
その一例がFlutterです。同じコードでiOS,Android,Windows,MacOSなど、
様々なプラットフォームで動かすことができます。
他にもReactNativeなど、クロスプラットフォーム開発が可能な技術も
ありますが、Flutterを触ってみて、採用するメリットをまとめました。
Flutterは、ご存知の方もいらっしゃるかもしれませんが、「Flutter大学」
という巨大なコミュニティが存在します。Flutter技術者がLTを実施したり
情報共有をする場として重宝されています。
また、その他でもGit Hubでプルリクエストが活発であったり、
全体的に言語のコミュニティが盛り上がっているので、開発の最中に
参考にできる材料が豊富で、開発しやすいです。
ReactNativeやKMMもクロスプラットフォーム開発の検討にあがりますが、
教育コストの面や、コミュニティの大きさ等で、Flutterを採用するのが
いいと感じました。
今回はFlutterを使って通知を送る方法をまとめました。通知が送れると、
アプリを開かなくても状態が確認出来るので、スマホアプリ開発の技術
として重宝されています。
今回はシンプルに画面に通知ボタンを配置し、ボタンを押すと通知が来る
アプリを作りました。
