20240229 Flutterのマルチプラットフォームを試す

1.2K Views

February 29, 24

スライド概要

関西モバイルアプリ研究会A #2

profile-image

いとーけー@そらかぜ

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Flutterの マルチプラットフォームを 試す 2024.2.29 関西モバイルアプリ研究会A #2 itok@そらかぜ

2.

itok@そらかぜ • • いとうけい(itok) の中の人 • モバイルアプリエンジニア 兼 CEO • 副業でフリーランス的 • https://itok.jp/, https://sorakaze.co.jp/, @itokjp

3.

所在地:京都市中京区 社員1人=自分 2015年創業9期目

4.

実績 自社 受託 公私合わせて200件ほどのアプリ開発に携わる

5.

iOS / Android / macOS / Windows / サーバ 一人でやってます(デザイン以外)

6.

Flutterの マルチプラットフォームを 試す

7.

3年前に入門してた https://www.docswell.com/user/itok

11.

今回のターゲット • Android • Web • macOS • Windows 開発環境に手間取って断念🙇 Flutter 3.19.1 / Dart 3.3.0

12.

Hello World的な Flutter Demo

13.

macOS

14.

Web (Chrome)

15.

Webの実体はJS fl $ utter build web

16.

サーバで動かすには <!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."> ...

17.

位置情報取得 location: ^5.0.0

18.

位置情報取得 web

19.

位置情報 & 描画

20.

位置情報 & 描画 Android macOS web

21.

通信 http: ^1.2.1 'dart:io'はWeb版で実行時エラーになって動かなかった

22.

通信 Android macOS web

23.

アプリ内WebView webview_flutter: ^4.7.0 webview_flutter_web: ^0.2.2+4

24.

アプリ内WebView Android macOS😱 web

25.

プラットフォーム判別 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"; } }

26.

まとめ • 当然なんでもかんでもうまくいくわけじゃない😢 • プラットフォームごとの作法に振り回される度合い はさらに増える😱 • それでもちょっとしたサンプルやモックアップ作成 には便利かも😄