Flutter-writing-andriod-specific-code

提供:Dev Guides
移動先:案内検索

Flutter-Android固有のコードを書く

Flutterは、プラットフォーム固有の機能にアクセスするための一般的なフレームワークを提供します。 これにより、開発者はプラットフォーム固有のコードを使用して_Flutter_フレームワークの機能を拡張できます。 フレームワークを介して、カメラ、バッテリーレベル、ブラウザなどのプラットフォーム固有の機能に簡単にアクセスできます。

プラットフォーム固有のコードにアクセスする一般的な考え方は、単純なメッセージングプロトコルを使用することです。 フラッターコード、クライアント、プラットフォームコード、およびホストは、共通のメッセージチャネルにバインドします。 クライアントは、メッセージチャネルを介してホストにメッセージを送信します。 ホストはメッセージチャネルをリッスンし、メッセージを受信して​​必要な機能を実行し、最後にメッセージチャネルを介してクライアントに結果を返します。

プラットフォーム固有のコードアーキテクチャは、以下のブロック図に示されています-

特定のコードアーキテクチャ

メッセージングプロトコルは、数値、文字列、ブール値などのJSONのような値のバイナリシリアル化をサポートする標準メッセージコーデック(StandardMessageCodecクラス)を使用します。シリアル化と逆シリアル化は、クライアントとホストの間で透過的に機能します。

_Android SDK_を使用してブラウザを開く簡単なアプリケーションを作成し、その方法を理解しましょう

  • Androidスタジオで新しいFlutterアプリケーション_flutter_browser_app_を作成します
  • main.dartコードを以下のコードに置き換えます-
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Flutter Demo Home Page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child: RaisedButton(
               child: Text('Open Browser'),
               onPressed: null,
            ),
         ),
      );
   }
}
  • ここでは、ブラウザーを開いてそのonPressedメソッドをnullに設定する新しいボタンを作成しました。
  • 今、次のパッケージをインポートします-
import 'dart:async';
import 'package:flutter/services.dart';
  • ここで、services.dartには、プラットフォーム固有のコードを呼び出す機能が含まれています。
  • MyHomePageウィジェットで新しいメッセージチャネルを作成します。
static const platform = const
MethodChannel('flutterapp.finddevguides.com/browser');
  • プラットフォーム固有のメソッドである_openBrowserメソッド、メッセージチャネルを介したopenBrowserメソッドを呼び出すメソッドを記述します。
Future<void> _openBrowser() async {
   try {
      final int result = await platform.invokeMethod(
         'openBrowser', <String, String>{
            'url': "https://flutter.dev"
         }
      );
   }
   on PlatformException catch (e) {
     //Unable to open the browser
      print(e);
   }
}

ここでは、platform.invokeMethodを使用してopenBrowserを呼び出しています(次の手順で説明します)。 openBrowserには、特定のURLを開くための引数urlがあります。

  • RaisedButtonのonPressedプロパティの値をnullから_openBrowserに変更します。
onPressed: _openBrowser,
  • MainActivity.java(androidフォルダ内)を開き、必要なライブラリをインポートします-
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;

import io.flutter.app.FlutterActivity;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;
import io.flutter.plugins.GeneratedPluginRegistrant;
  • メソッドを作成し、ブラウザを開くopenBrowser
private void openBrowser(MethodCall call, Result result, String url) {
   Activity activity = this;
   if (activity == null) {
      result.error("ACTIVITY_NOT_AVAILABLE",
      "Browser cannot be opened without foreground
      activity", null);
      return;
   }
   Intent intent = new Intent(Intent.ACTION_VIEW);
   intent.setData(Uri.parse(url));

   activity.startActivity(intent);
   result.success((Object) true);
}
  • 今、MainActivityクラスでチャンネル名を設定します-
private static final String CHANNEL = "flutterapp.finddevguides.com/browser";
  • onCreateメソッドでメッセージ処理を設定するAndroid固有のコードを記述します-
new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
   new MethodCallHandler() {
   @Override
   public void onMethodCall(MethodCall call, Result result) {
      String url = call.argument("url");
      if (call.method.equals("openBrowser")) {
         openBrowser(call, result, url);
      } else {
         result.notImplemented();
      }
   }
});

ここでは、MethodChannelクラスを使用してメッセージチャネルを作成し、MethodCallHandlerクラスを使用してメッセージを処理しました。 onMethodCallは、メッセージを確認することで正しいプラットフォーム固有のコードを呼び出す実際のメソッドです。 onMethodCallメソッドは、メッセージからURLを抽出し、メソッド呼び出しがopenBrowserの場合にのみopenBrowserを呼び出します。 それ以外の場合、notImplementedメソッドを返します。

アプリケーションの完全なソースコードは次のとおりです-

*main.dart*
*MainActivity.java*
package com.finddevguides.flutterapp.flutter_browser_app;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import io.flutter.app.FlutterActivity;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel.Result;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
   private static final String CHANNEL = "flutterapp.finddevguides.com/browser";
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      GeneratedPluginRegistrant.registerWith(this);
      new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
         new MethodCallHandler() {
            @Override
            public void onMethodCall(MethodCall call, Result result) {
               String url = call.argument("url");
               if (call.method.equals("openBrowser")) {
                  openBrowser(call, result, url);
               } else {
                  result.notImplemented();
               }
            }
         }
      );
   }
   private void openBrowser(MethodCall call, Result result, String url) {
      Activity activity = this; if (activity == null) {
         result.error(
            "ACTIVITY_NOT_AVAILABLE", "Browser cannot be opened without foreground activity", null
         );
         return;
      }
      Intent intent = new Intent(Intent.ACTION_VIEW);
      intent.setData(Uri.parse(url));
      activity.startActivity(intent);
      result.success((Object) true);
   }
}
*main.dart*
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(
            title: 'Flutter Demo Home Page'
         ),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;
   static const platform = const MethodChannel('flutterapp.finddevguides.com/browser');
   Future<void> _openBrowser() async {
      try {
         final int result = await platform.invokeMethod('openBrowser', <String, String>{
            'url': "https://flutter.dev"
         });
      }
      on PlatformException catch (e) {
        //Unable to open the browser print(e);
      }
   }
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child: RaisedButton(
               child: Text('Open Browser'),
               onPressed: _openBrowser,
            ),
         ),
      );
   }
}

アプリケーションを実行し、「ブラウザーを開く」ボタンをクリックすると、ブラウザーが起動していることがわかります。 ブラウザアプリ-ホームページは、ここのスクリーンショットに示すとおりです-

Flutter Demo Home Page

プロダクティブビルドアプリ