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を表示するプログラムを少しずつ噛み砕いて
ご紹介しようと思います。
通常、モバイルアプリを開発するには、swiftでiOSを、javaやkotlinで
Androidを開発しますが、クロスプラットフォームで開発できるものも
存在します。
その一例がFlutterです。同じコードでiOS,Android,Windows,MacOSなど、
様々なプラットフォームで動かすことができます。
他にもReactNativeなど、クロスプラットフォーム開発が可能な技術も
ありますが、Flutterを触ってみて、採用するメリットをまとめました。
Flutterは、ご存知の方もいらっしゃるかもしれませんが、「Flutter大学」
という巨大なコミュニティが存在します。Flutter技術者がLTを実施したり
情報共有をする場として重宝されています。
また、その他でもGit Hubでプルリクエストが活発であったり、
全体的に言語のコミュニティが盛り上がっているので、開発の最中に
参考にできる材料が豊富で、開発しやすいです。
ReactNativeやKMMもクロスプラットフォーム開発の検討にあがりますが、
教育コストの面や、コミュニティの大きさ等で、Flutterを採用するのが
いいと感じました。
今回はFlutterを使って通知を送る方法をまとめました。通知が送れると、
アプリを開かなくても状態が確認出来るので、スマホアプリ開発の技術
として重宝されています。
今回はシンプルに画面に通知ボタンを配置し、ボタンを押すと通知が来る
アプリを作りました。
表題の通り、FlutterのWebView機能を使ってみようと思います。
まず、FlutterとはDart言語で構成されるアプリケーションのUIキットの
ようなものです。豊富なデザインやアイコンなどがあり、簡単に、かつ
綺麗にアプリ開発をすることが出来ます。
そんなFlutterですが、1からボタンやテキストを作るだけでなく、
Webサイトをアプリ内で表示するWebViewも提供されています。
Flutterはアプリケーションを開発することが出来るので、
Web Viewの登場機会といえば、動画の埋め込みなど、
一部の用途でしか使われません。
しかし、こんな使い方もあります。
モバイルサイトやモバイル版Webアプリをネイティブアプリのように振る舞える。
こちらの使い方です。例えば、すでに運用しているモバイルサイトやモバイル版
Webアプリがあったとします。
しかし、Webアプリではスマホに通知を送ることはできません。
そこでFlutter WebViewの登場です。この機能でモバイルサイトやモバイル版
Webアプリを表示してあげて、通知機能だけ実装することで、わざわざ
ネイティブなアプリに作り替えなくても通知機能を実現することが出来ます。
また、いずれはネイティブアプリにしたいけど、コスト面の問題があり、
一旦最低限の機能を実現するためにFlutter WebViewを使う、という使い方です。
このようにBtoBのビジネスシーンでは、引き合いになりそうな技術のため
今回調査してみました。
