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

「.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>

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

↑

手順２：業務ぃーな、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",
    },
);