20240229 Flutterのマルチプラットフォームを試す
1.4K Views
February 29, 24
スライド概要
関西モバイルアプリ研究会A #2
関連スライド
各ページのテキスト
Flutterの マルチプラットフォームを 試す 2024.2.29 関西モバイルアプリ研究会A #2 itok@そらかぜ
itok@そらかぜ • • いとうけい（itok） の中の人 • モバイルアプリエンジニア 兼 CEO • 副業でフリーランス的 • https://itok.jp/, https://sorakaze.co.jp/, @itokjp
所在地：京都市中京区 社員1人=自分 2015年創業9期目
実績 自社 受託 公私合わせて200件ほどのアプリ開発に携わる
iOS / Android / macOS / Windows / サーバ 一人でやってます（デザイン以外）
Flutterの マルチプラットフォームを 試す
3年前に入門してた https://www.docswell.com/user/itok
今回のターゲット • Android • Web • macOS • Windows 開発環境に手間取って断念🙇 Flutter 3.19.1 / Dart 3.3.0
Hello World的な Flutter Demo
macOS
Web (Chrome)
Webの実体はJS fl $ utter build web
サーバで動かすには <!DOCTYPE html> <html> <head> <base href="/"> <meta charset="UTF-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="description" content="A new Flutter project."> ...
位置情報取得 location: ^5.0.0
位置情報取得 web
位置情報 & 描画
位置情報 & 描画 Android macOS web
通信 http: ^1.2.1 'dart:io'はWeb版で実行時エラーになって動かなかった
通信 Android macOS web
アプリ内WebView webview_flutter: ^4.7.0 webview_flutter_web: ^0.2.2+4
アプリ内WebView Android macOS😱 web
プラットフォーム判別 if (kIsWeb) { platform = "Web"; } else { if (Platform.isAndroid) { platform = "Android"; } else if (Platform.isIOS) { platform = "iOS"; } else if (Platform.isMacOS) { platform = "macOS"; } else if (Platform.isWindows) { platform = "Windows"; } else { platform = "other"; } }
まとめ • 当然なんでもかんでもうまくいくわけじゃない😢 • プラットフォームごとの作法に振り回される度合い はさらに増える😱 • それでもちょっとしたサンプルやモックアップ作成 には便利かも😄