擼一個Flutter Apple Id 登入外掛

jerryfans發表於2020-05-11
FlutterAPP

前言

Flutter Apple Sign In相關外掛pub搜了一下還是蠻多的，但是還是忍不住要再擼一個，順便可以再熟悉下flutter plugin和 platform view 的用法(呼叫系統的蘋果登入按鈕需要用到)，這個自定義button widget,呼叫方法拿回撥則不用，區別只是在於UI。另外Plugin層是基於Swift呼叫Apple Sign In Api實現的，也可以順便加強下Swift,畢竟一直OC用得較多。

下載方式

pub方式:

dependencies:
  sign_in_apple: ^0.0.1
複製程式碼

github:

github.com/JerryFans/s…

效果如圖：

擼一個Flutter Apple Id 登入外掛
擼一個Flutter Apple Id 登入外掛

Usage

The System Button Style Use Platform View to Show in Flutter.

因為系統按鈕使用platform view 實現

Please set io.flutter.embedded_views_preview = true in Info.plist in your project.

請在Info.plist 加入 io.flutter.embedded_views_preview = true， 同時確保專案開啟了AppleSignIn 的配置。詳情可以下載github上example檢視

CallBack回撥:

SignInApple.handleAppleSignInCallBack(onCompleteWithSignIn: (String name,
        String mail,
        String userIdentifier,
        String authorizationCode,
        String identifyToken) async {
      print("flutter receiveCode: \n");
      print(authorizationCode);
      print("flutter receiveToken \n");
      print(identifyToken);
      setState(() {
        _name = name;
        _mail = mail;
        _userIdentify = userIdentifier;
        _authorizationCode = authorizationCode;
      });
    }, onCompleteWithError: (AppleSignInErrorCode code) async {
      var errorMsg = "unknown";
      switch (code) {
        case AppleSignInErrorCode.canceled:
          errorMsg = "user canceled request";
          break;
        case AppleSignInErrorCode.failed:
          errorMsg = "request fail";
          break;
        case AppleSignInErrorCode.invalidResponse:
          errorMsg = "request invalid response";
          break;
        case AppleSignInErrorCode.notHandled:
          errorMsg = "request not handled";
          break;
        case AppleSignInErrorCode.unknown:
          errorMsg = "request fail unknown";
          break;
      }
      print(errorMsg);
    });
複製程式碼

UI相關:

自定義Widget按鈕直接觸發plugin按鈕事件即可:

GestureDetector(
              onTap: () {
                SignInApple.clickAppleSignIn();
              },
              child: Container(
                width: 56,
                height: 56,
                child: Image.asset(
                  "images/apple_logo.png",
                  width: 56,
                  height: 56,
                ),
              ),
            ),
複製程式碼

系統ButtonWidget直接顯示，元件內部已經實現了事件，點選了會觸發上面的回撥:

AppleSignInSystemButton(
              width: 250,
              height: 50,
              buttonStyle: AppleSignInSystemButtonStyle.black,
)
複製程式碼

相關文章