Flutterのセカンド・ステップのバックアップ(No.11)

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る
- Flutterのファースト・ステップ
- Flutterのセカンド・ステップ
- Flutterのサード・ステップ

目次 †

↑

概要 †

Flutter の step by step（其の二）。

↑

手順１：認証処理を実装してみる。 †

↑

カスタムURLスキーム系 †

PKCE実装のため。

以下の2つの方式がある。
- Private-Use URI Scheme Redirection
- Claimed Https Scheme URI Redirection

↑

定義 †

Android
以下の定義をAndroidManifest?.xmlに追加する。

Deep Links

<!-- Deep Links -->
<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="app" android:host="app_a" />
</intent-filter>

App Links

<!-- App Links -->
<intent-filter android:autoVerify="true">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="http" android:host="example.com" />
</intent-filter>

参考
- android studio - Which AndroidManifest?.xml to edit in Flutter project? - Stack Overflow
  https://stackoverflow.com/questions/60095118/which-androidmanifest-xml-to-edit-in-flutter-project

iOS
- Custom URL schemes
- Universal Links

Web
なし。

↑

実装 †

ロケーション・バー直では、動かないとのこと。
以下のHTMLを作成し、ソコから飛んでみる。

送信

Deep Links

<!DOCTYPE html>
<html>
  <body>
    <a href="app://app_a/">App Aに飛ぶ</a>
  </body>
</html>

App Links

<!DOCTYPE html>
<html>
  <body>
    <a href="http://example.com/">App Aに飛ぶ</a>
  </body>
</html>

受信
素書すると辛労そう。
flutter_appauthを使うのが良さそう。

Android
- Deep Links
- App Links

iOS
- Custom URL schemes
- Universal Links

Web
onGenerateRoute?で実装する。

↑

参考 †

Flutterで作ったAndroidアプリにDeepLink?する方法 - Qiita
https://qiita.com/Frog_kt/items/5f9e4dd1d2128173f60c

Deep Links and Flutter applications. How to handle them properly.
by Aleksandr Denisov | Flutter Community | Medium
https://medium.com/flutter-community/deep-links-and-flutter-applications-how-to-handle-them-properly-8c9865af9283

Get Started with Flutter Authentication
https://auth0.com/blog/get-started-with-flutter-authentication/

Flutter Package
- flutter_appauth
  https://pub.dev/packages/flutter_appauth
- flutter_secure_storage
  https://pub.dev/packages/flutter_secure_storage

↑

プラットフォーム固有のカスタムコード †

↑

現在のバッテリーレベルを取得・表示 †

Android
BatteryManager? API

main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  static const platform = const MethodChannel('samples.flutter.dev/battery'); 

  // Get battery level.
  String _batteryLevel = 'Unknown battery level.';

  Future<void> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = 'Battery level at $result % .';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }
    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

Widget build(BuildContext context) {
  ...
    ElevatedButton(
      child: const Text('BatteryLevel　Button'),
      style: ElevatedButton.styleFrom(
        primary: Colors.orange,
        onPrimary: Colors.white,
      ),
      onPressed: _getBatteryLevel,
    )
  ...
}

MainActivity?.kt

package com.opentouryo.flutter_template

import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

import android.content.Context
import android.content.ContextWrapper
import android.content.Intent
import android.content.IntentFilter
import android.os.BatteryManager
import android.os.Build.VERSION
import android.os.Build.VERSION_CODES

class MainActivity: FlutterActivity() {
    private val CHANNEL = "samples.flutter.dev/battery"

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
            call, result ->
            // Note: this method is invoked on the main thread.
            // TODO
            if (call.method == "getBatteryLevel") {
                val batteryLevel = getBatteryLevel()

                if (batteryLevel != -1) {
                    result.success(batteryLevel)
                } else {
                    result.error("UNAVAILABLE", "Battery level not available.", null)
                }
            } else {
                result.notImplemented()
            }
        }
    }

    private fun getBatteryLevel(): Int {
        val batteryLevel: Int
        if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {
            val batteryManager = getSystemService(Context.BATTERY_SERVICE) as BatteryManager
            batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
        } else {
            val intent = ContextWrapper(applicationContext).registerReceiver(null, IntentFilter(Intent.ACTION_BATTERY_CHANGED))
            batteryLevel = intent!!.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100 / intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1)
        }

        return batteryLevel
    }
}

iOS
device.batteryLevel API

↑

手順２：業務ぃーな、CRUDを実装してみる。 †

↑

WebAPI †

↑

パッケージ追加 †

HTTPパッケージを追加する必要がある。

http | Dart Package
https://pub.dev/packages/http/install
```
import 'package:http/http.dart';
```

↑

GET †

Futureのメソッドチェーン

void sendRequest() {
  http
    .get(url)
    .then((response) {
      print(response);
    })
    .catchError((error) => print(error));
}

async/await

Future<void> sendRequest() async {
  try {
    final response = await http.get(url);
    print(response);
  } on Exception caach (error) {
    print(error);
  }
}

↑

POST †

作法
- Futureのメソッドチェーン
```
...
```

async/await

var response = await http.post(
    "https://www.example.com/path/to/api",
    body: {
        "nickname": "chooyan",
        "description": "A freelance mobile app developer",
    },
);