Flutter Web

はじめに ビルド環境を切り替えて開発する方法について --dart-define-from-file 環境変数定義(json) 実行方法 ソースコード側の対応例 在宅勤務報告システムで工夫したこと 最後に はじめに こんにちは、ローソンデジタルイノベーション(LDI)でiOSエンジニアを担当している山形です。 今回は社内向けにFlutterで開発した在宅勤務報告システムにおいて、複数のビルド環境を切り替えて開発する方法について紹介します。 在宅勤務報告システム関連の記事は以下でいくつか公開しています。 techblog.ldi.co.jp ビルド環境を切り替えて開発する方法について 今回は社内…

こんにちは。クライアントグループの上原です。 StudyplusのFlutterアプリでの開発には、go_routerが利用されています。 今回は、利用していて感じたどういう状況でどの方法を利用して画面遷移時にパラメーターを渡すのが良いのかを紹介します。 また、上記のやり方をgo_router_builderを利用して行った場合に、安全にデータをやり取りする方法も紹介します。 利用したFlutterのバージョンは、3.13.7です。 利用したライブラリのバージョンは、下記になります。 ライブラリ名 バージョン go_router 12.0.1 go_router_builder 2.3.4 画…

はじめに 採用したアーキテクチャ Clean Architecture MVVM(Model, View, ViewModel) どうやって組み合わせるの？ Clean Architecture MVVM 最終形(Clean Architecture+MVVM) 実装してみて感じたこと メリット デメリット 最後に はじめに こんにちは、ローソンデジタルイノベーション(LDI)でiOSエンジニアを担当している山形です。 今回は以下の記事でご紹介した在宅勤務報告システムの開発で採用したFlutterアプリのアーキテクチャについて記事にしたいと思います。 techblog.ldi.co.jp 採用…

ローソンデジタルイノベーション(LDI)でPMを担当している畑沢です。 本日は、社内向けに開発した在宅勤務報告システムとその構成についてご紹介いたします。 在宅勤務報告システムとは？ 在宅勤務報告システムとは、在宅勤務を行うための申請と日々の業務報告を行うための社内向けシステムです。 LDIでは以前から在宅勤務ができる制度と環境は整っていましたが、新型コロナウィルス感染拡大を機に在宅勤務の利用者が増えました。 申請と報告をメールで行うルールになっていましたが、下記の課題がありました。 申請、業務報告をメールで行うことが手間 誰がいつ在宅勤務をしているのかの把握が難しい 課題解決のためのシステム…

Flutterで爆速でポートフォリオを作ろう！ https://zenn.dev/welchi/books/flutter-portfolio-book Flutterとfirebaseを使ったシンプル開発を解説してます。 Flutter と Firebaseで作る！カウンターアプリ https://zenn.dev/snova301/books/6df29a230d681f Flutterとfirebaseを使ったシンプル開発を解説してます。 Flutter基礎入門 by Flutter大学 https://zenn.dev/kboy/books/ca6a9c93fd23f3 Flutter…

ウーオでアプリ(UUUO, UUUO Sellers)の開発を担当している榎本です。 ウーオでは、お魚を出品したい方向けの「UUUO Sellers」というアプリを提供しています。 以前、こちらの記事で、Web版のUUUO SellersをFlutter Webで作った話をしました。 今回の記事は、消費地市場に届いた荷物の配送情報の連携に用いる配送指示書と呼ばれる書類をPDFとして出力する機能をWeb版のUUUO Sellersに追加した話です。 産地市場と消費地市場 配送指示書 環境 Flutter 3.10.5 Dart SDK 3.0.5 実装 pdfライブラリ、printingライブラ…

はじめに データの保存/修正/削除などの処理の成功・失敗をユーザーに表示する。 SnackBarを使うのはその方法のひとつ。 SnackBarとは下記画像のような画面下でメッセージを表示するものです。 Scaffoldの中でSnackBarを表示することができます。 実装方法は Scaffoldを使ったWidgetを実装する Scaffoldを使ったWidget配下でボタンなどの処理の中でSnackBarを作成&送信する 実装 下記は「タップ」ボタンをタップすると「エラーが発生しました」というSnackBarが表示されます See the Pen SnackBar by fjsw (@fjsw…

概要 参考情報 概要 以下、自分用のメモです。忘れないうちにメモメモ。。。 Dart 3.4 で dart pub unpack というコマンドが追加されたみたいですね。 codewithandrea.com dart.dev 指定したパッケージをローカルにダウンロードしてくれるコマンドとのこと。 ソースを確認したいときなどに、サクッと出来て便利そう。 実行すると以下のようになります。 $ dart pub unpack image_picker Downloading image_picker 1.1.2 to `.\image_picker-1.1.2`... Resolving depe…

概要 参考情報 概要 以下、自分用のメモです。忘れないうちにメモメモ。。。 Flutter 3.22 / Dart 3.4 がリリースされましたね。 今回の目玉は、やっぱり Flutter Web での wasm ビルドが安定版となったことですね。 Dartの方にも Dart macros というのが追加されていて、これも注目ですね。 $ flutter --version Flutter 3.22.0 • channel stable • https://github.com/flutter/flutter.git Framework • revision 5dcb86f68f (7 day…

こんにちは、SREグループの 水口 です。 この記事では、スタディプラスが運営する「Studyplus Engineering Podcast」の公開までに行なっているPodcastのShow Notesを作成する過程について紹介します。 Show Notesと生成AI活用のモチベーションについて Show NotesとはPodcastのエピソード内で何が起こったかを詳細にまとめたもので、一般的には以下の内容が記載されます。 トピックの要約 言及された話題に関するリンク Podcastの聴取や購読などのCTA(Call To Action / 行動喚起) また、収録・編集ツールを提供するRiv…

DELISH KITCHEN 開発部で小売向き合いでFlutterのアプリ開発をしている野口です。 本記事では、弊社で開発しているFlutterのアプリをFlutter Webでリリースできるかどうかの調査を行った時の知見についてお話しします。 FlutterアプリをWebで動かすとは Flutterはマルチプラットフォーム開発できるので、Android / iOS / Web / Windows / macOS / Linuxで同じソースコードで開発できます。なので、iOS、Android用に作成したアプリでもリリースできます。 一般的なWebサイトを作るときは、HTMLやCSS、JavaS…

こんにちは、UPSIDERで日々モバイルアプリ開発をしているふっくです。 UPSIDERでは今後、よりアプリ開発に注力し決済プラットフォームの中核的な役割を果たすことを目指しています。 今回は、今後の開発・運用を目指して考えたFlutterアプリ向けのアーキテクチャを紹介します。 ネイティブアプリの世界で触れてきた色々なアーキテクチャ・フレームワークを参考に、開発の後半でも順調にスケールさせることができるように、工夫を凝らしました。 本アーキテクチャで作ったサンプルアプリもあるので、ぜひ以下のリンクから見てみてください。 https://github.com/upsidr/flutter_ar…

はい、Flutter Webのテキスト入力は、iPhoneではうまく動作しないことがあります。原因は、iPhoneのキーボードがFlutter Webのテキストフィールドのレイアウトと干渉するためです。 具体的には、iPhoneのキーボードは、テキストフィールドの下部に表示されます。しかし、Flutter Webのテキストフィールドは、デフォルトでは、キーボードの下に表示されない場合があります。そのため、キーボードが表示されると、テキストフィールドが上に押し上げられ、テキスト入力が困難になることがあります。 この問題を解決するには、Flutter Webのテキストフィールドのレイアウトを調整す…

第5回 FlutterGakkaiにオンライン参加しました。 fluttergakkai.connpass.com 最初1時間は参加できなかったのでちょっと残念でしたが…あとから追っかけて観れました！ 1.『Dart Version Manager (DVM) を開発したお話』 （おかやまんさん） (リアルタイムでは観れませんでした。) DVMはFVMのDart版 pub.devではdvmx。すでに使われてたのでとのこと…しかたないですね…。 Dartのバージョンを管理したかったけど、なかった→作ろう！ おお…すごい…。 Dartでもriverpod??へええ…。 2.『snkrdunk にお…

茅ヶ岳から南アルプス方面 明けましておめでとうございます、 id:numanuma08 です。先日、flutterを使って多言語に対応したWebページの実装とデプロイをしたのでノウハウを共有します。 flutter の多言語対応事情

そろそろ 2023 年も終わりという事で、 2023 年の活動を振り返ってみます。 TinyGo 関連 去年 (2022/11) に書籍 「基礎から学ぶ TinyGoの組込み開発」 をリリースしました。 詳しくは以下に記載していますが、 2023 年はこの書籍に基づく、というのか、 TinyGo の活動をさらに活発に行っていました。 sago35.hatenablog.com Go Conference 2023 でハンズオン開催 + LT 登壇 TinyGo で自作キーボードを作るハンズオン 2023/06/02 開催の Go Conference 2023 では、 TinyGo で自作キー…

Flutterでシェア機能を利用したい場合、share_plusパッケージがあるけど、 Flutter Webの場合は、Web Share APIを使っていて、 Web Share APIをサポートしていないブラウザの場合、メーラーが立ち上がってしまう。。 なんとかいい感じにできないかと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) できたもの Web Share APIが使えるとき(Android/Chromeなど)は、 そのまま使い、 使えないとき(Mac/Chromeなど)は、 ダイアログを開く感じ。 こちらのアドカレで作ったやつで使ってます(*´ω｀*) 音声でしか投稿できないS…

GDG DevFest Tokyo 2023に参加してきました https://gdg-tokyo.connpass.com/event/301690/ Google CloudのGenAIサービスで「AIにファッションを褒めてもらうアプリ」を作ってみよう 中井 悦司さん(Solutions Architect) GCPの生成AI機能 画像を認識して字幕を出したり Visual Q&A アップした画像に対してどんな情報がほしいかチャットでやり取りできたり PaLM2 多言語に強い 日本語のダジャレを英語で説明できたり 個人アプリ開発（メンテナンス）14年の歴史 Anzai Yukiさん(Goo…