FreeStyleVision

はじめに

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 Viewerの実装

PDFを表示するのは、簡単なようで実は少しコツが要ります。
今回は単純なPDFを表示するプログラムを少しずつ噛み砕いて
ご紹介しようと思います。

Flutterとは？

通常、モバイルアプリを開発するには、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でWebViewを使うの？

Flutterはアプリケーションを開発することが出来るので、
Web Viewの登場機会といえば、動画の埋め込みなど、
一部の用途でしか使われません。

しかし、こんな使い方もあります。
モバイルサイトやモバイル版Webアプリをネイティブアプリのように振る舞える。
こちらの使い方です。例えば、すでに運用しているモバイルサイトやモバイル版
Webアプリがあったとします。
しかし、Webアプリではスマホに通知を送ることはできません。
そこでFlutter WebViewの登場です。この機能でモバイルサイトやモバイル版
Webアプリを表示してあげて、通知機能だけ実装することで、わざわざ
ネイティブなアプリに作り替えなくても通知機能を実現することが出来ます。
また、いずれはネイティブアプリにしたいけど、コスト面の問題があり、
一旦最低限の機能を実現するためにFlutter WebViewを使う、という使い方です。
このようにBtoBのビジネスシーンでは、引き合いになりそうな技術のため
今回調査してみました。