LoginSignup
6

FlutterのWebViewでマップアプリケーションを表示してみた

Last updated at Posted at 2020-08-23

sample01.gif


flutter.png

mapboxgljs.png

FlutterのWebViewでマップアプリケーションを表示してみました :tada:


事前準備

  • Flutterの環境準備

  • 各バージョン

    • Flutter v1.20.2
    • Dart v2.9.1
    • Xcode v11.5
    • Android SDK v30.0.1
    • Android Studio v4.0
    • Visual Studio Code v1.48.1
    • Flutter extension v3.13.2

Flutterの環境確認

flutter doctor -v

try-043_03.png


はじめに、Flutterのプロジェクトを新規作成します。

flutter create map_app

try-043_02.png


Flutterでのメインコードは、基本的に「lib/main.dart」を利用します。

全体構成
try-043_04.png


プロジェクト作成後、WebViewの設定をしていきます。

  • ローカルファイルの準備
  • WebViewプラグインのインストール

ローカルファイルの準備

今回は、Mapbox GL JSを手軽に始めるビルド環境のmapboxgljs-starterをローカルファイルとして利用します。

スターターの「dist」ディレクトリ内のファイルを、「assets」ディレクトリを新規作成し格納します。

try-043_06.png


WebViewプラグインのインストール

FlutterのWebViewプラグインは複数存在するのですが、今回はGoogle公式のwebview_flutterをインストールします。合わせてローカルファイルの格納パスも一緒に設定します。

pubspec.yaml

name: map_app
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
    sdk: '>=2.7.0 <3.0.0'

dependencies:
    flutter:
        sdk: flutter

    cupertino_icons: ^0.1.3

    # webview_flutterプラグイン追加
    webview_flutter: ^0.3.22+1

dev_dependencies:
    flutter_test:
        sdk: flutter

flutter:
    uses-material-design: true

    # HTMLディレクトリ指定
    assets:
        - assets/
        - assets/index.html
        - assets/app.js

プラグインのインストールは、Visual Studio Codeで拡張機能をいれると自動インストールされますが、下記コマンドで手動インストールも可能です。

flutter pub get

try-043_05.png


iOSで動作確認したい場合は、下記の設定追記が必要です。

/ios/Runner

Info.plist

<key>io.flutter.embedded_views_preview</key>
<true/>

最後に、メインコードを書いていきます。

/lib

main.dart

import 'dart:async';
import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MapApp());
}

// WebViewコントローラー設定
WebViewController _controller;

class MapApp extends StatefulWidget {
  @override
  _MapAppState createState() => new _MapAppState();
}

class _MapAppState extends State<MapApp> {
  String _title = 'map_app';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'map_app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: WebView(
          // JavaScriptを適用
          javascriptMode: JavascriptMode.unrestricted,
          // WebView生成時の処理
          onWebViewCreated: (WebViewController webViewController) async {
            _controller = webViewController;
            // HTMLファイル読み込み
            await _loadHtmlFromAssets();
          },
        ),
      ),
    );
  }

  // HTMLファイル読み込み
  Future _loadHtmlFromAssets() async {
    // ローカルファイルを指定
    String fileText = await rootBundle.loadString('assets/index.html');
    String jsCode = await rootBundle.loadString('assets/app.js');
    // HTML指定
    _controller.loadUrl(Uri.dataFromString(fileText,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
    // JavaScript指定
    await _controller.evaluateJavascript(jsCode);
  }
}

webview_flutterプラグインを読み込みます。

import 'package:webview_flutter/webview_flutter.dart';

WebViewのコントローラーを設定します。

// WebViewコントローラー設定
WebViewController _controller;

画面にWebViewを読み込みます。

body: WebView(
  // JavaScriptを適用
  javascriptMode: JavascriptMode.unrestricted,
  // WebView生成時の処理
  onWebViewCreated: (WebViewController webViewController) async {
    _controller = webViewController;
    // HTMLファイル読み込み
    await _loadHtmlFromAssets();
  },
),

ローカルファイルを読み込みます。

Future _loadHtmlFromAssets() async {
  // ローカルファイルを指定
  String fileText = await rootBundle.loadString('assets/index.html');
  String jsCode = await rootBundle.loadString('assets/app.js');
  // HTML指定
  _controller.loadUrl(Uri.dataFromString(fileText,
          mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
      .toString());
  // JavaScript指定
  await _controller.evaluateJavascript(jsCode);
}

Visual Studio Codeで「実行とデバッグ」を実行し、動作確認をします。
try-043_07.png


実行するとマップアプリケーションが表示されます。今回はiOSの実機で表示してみました!
sample01.gif


FlutterのWebViewでマップアプリケーションの表示ができました :tada:


Flutterは、GoogleのUIツールキットで、iOSやAndroid向けのアプリケーションの開発に利用されています。

FlutterでWebViewを利用するとマップアプリケーションに限らず、他のWebアプリケーションもiOSとAndroidのネイティブアプリケーションに導入できるのでゼヒ試してみて頂ければと思います!

ただ、現状ではWebViewでのマップアプリケーションとしては、動作がいまいちあやしいので実用的ではないかもしれません。ネイティブでの導入方法も今後調べてみようと思います :grinning:



Mapbox GL JSについて、他にも記事を書いています。よろしければぜひ。
tags - Mapbox GL JS



book

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6