390 Views
January 28, 25
スライド概要
ネイティブ実装から Flutterにアクセスする 2025.1.28 関西モバイルアプリ研究会A #7 itok@そらかぜ
itok@そらかぜ • いとうけい(itok) • の中の人 • モバイルアプリエンジニア 兼 CEO • 副業でフリーランス的 • https://itok.jp/, https://sorakaze.co.jp/, @itokjp
所在地:京都市中京区 社員1人=自分
実績 自社 受託 公私合わせて200件以上のアプリ開発に携わる
iOS / Android / macOS / Windows / サーバ 一人でやってます(デザイン以外)
AI + 天気予報 「そらコーデ」公開!!
関西圏のJR車内で広告でてます
ネイティブ実装から Flutterにアクセスする
関モバ A #3 Flutterからネイティブコードにアクセスする 2024.4.25
今回は逆です 🔃
導入シーン • すでにiOS / Androidのネイティブな実装がある • • 全部をFlutterに置き換えるのはコストが大きい 新規機能(画面)はFlutterで共通化したい
開発方法 • • ソースコード経由 • Android module / CocoaPods使用 • Flutter側のコードを編集しながら開発 • 各自のFlutter開発環境必要 ライブラリ経由 • 開発済みのFlutterモジュールをaar / frameworkとして配布 • 各自のFlutter開発環境不要
導入 https://docs. utter.dev/add-to-app fl $ cd /path/to/MyApp $ flutter create --template module flutter_module
フォルダ構成 /path/to/MyApp ├── flutter_module/ │ ├── .android/ │ ├── .ios/ │ ├── lib/ │ └── pubspec.yaml │ ├── MyApp_Android/ │ └── build.gradle └── MyApp_iOS/ └── MyApp.xcodeproj
settings.gradle setBinding(new Binding([gradle: this])) evaluate(new File( settingsDir.parentFile, 'flutter_module/.android/include_flutter.groovy' )) /path/to/MyApp ├── flutter_module/ ├── .android/ ├── include_flutter.groovy
Pod le flutter_application_path = '../flutter_module' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') /path/to/MyApp ├── flutter_module/ ├── .ios/ ├── Flutter/podhelper.rb target 'MyApp' do use_frameworks! install_all_flutter_pods(flutter_application_path) end fi post_install do |installer| flutter_post_install(installer) if defined?(flutter_post_install) end
初期化
class AppDelegate: FlutterAppDelegate {
lazy var flutterEngine = FlutterEngine(name: "FlutterEngine")
override func application(_ application: UIApplication,
didFinishLaunchingWithOptions ~~) -> Bool {
flutterEngine.run();
GeneratedPluginRegistrant.register(with: self.flutterEngine);
return super.application(
application,
didFinishLaunchingWithOptions: launchOptions);
}
}
呼び出し
class ViewController: UIViewController {
func showFlutter() {
let flutterEngine =
(UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterViewController =
FlutterViewController(engine: flutterEngine,
nibName: nil,
bundle: nil)
present(flutterViewController, animated: true, completion: nil)
}
}
Flutter側のmainが呼ばれる
void main() => runApp(const MyApp());
任意のwidgetを表示
Entry Point宣言
@pragma('vm:entry-point')
void otherMainA() => runApp(const MyAppA());
@pragma('vm:entry-point')
void otherMainB() => runApp(const MyAppB());
Entry Pointを指定して呼び出し
flutterEngine.run(withEntrypoint: "otherMainA",
libraryURI: "path/to/mainA.dart")
データのやり取りは?
MessageChannel MethodChannel 関モバ A #3 Flutterからネイティブコードに アクセスする
Sample App fl https://github.com/ utter/samples/tree/main/add̲to̲app
fl multiple̲ utters
まとめ • 既存のネイティブアプリに新機能(画面)を追加す る時に使えるかも • データ連携がどうしても一手間かかるのはネック fl https://docs. utter.dev/add-to-app