flutter_account_kit 0.6.6 flutter_account_kit: ^0.6.6 copied to clipboard
A Flutter plugin for allowing users to authenticate with the native Android & iOS AccountKit SDKs
flutter_account_kit #
A Flutter plugin for allowing users to authenticate with the native Android & iOS AccountKit SDKs
How do I use it? #
For complete API documentation, just see the source code.
import 'package:flutter_account_kit/flutter_account_kit.dart';
AccountKit akt = new AccountKit();
LoginResult result = await akt.logInWithPhone();
switch (result.status) {
case LoginStatus.loggedIn:
_sendTokenToServer(result.accessToken.token);
_showLoggedInUI();
break;
case LoginStatus.cancelledByUser:
_showCancelledMessage();
break;
case LoginStatus.error:
_showErrorOnUI();
break;
}
Installation #
To get things up and running, you'll have to declare a pubspec dependency in your Flutter project. Also some minimal Android & iOS specific configuration must be done, otherwise your app will crash.
On your Flutter project #
See the installation instructions on pub.
Configuration
Find out your Facebook App ID and AccountKit Client Token from Facebook App's dashboard in the Facebook developer console.
Android
1. In **\
iOS
Add your Facebook credentials to your project's Info.plist
file
<plist version="1.0">
<dict>
...
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>AccountKitClientToken</key>
<string>{your-account-kit-client-token}</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>ak{your-app-id}</string>
</array>
</dict>
</array>
...
</dict>
</plist>
This is the minimal required configuration. Take a look to the Account Kit documentation for iOS for a more detailed guide.
Themes #
iOS
import 'package:flutter/material.dart';
import 'package:flutter_account_kit/flutter_account_kit.dart';
final theme = AccountKitTheme(
// Background
backgroundColor: Color.fromARGB(255, 0, 120, 0,),
backgroundImage: 'background.png',
// Button
buttonBackgroundColor: Color.fromARGB(255, 0, 153, 0),
buttonBorderColor: Color.fromARGB(255, 0, 255, 0),
buttonTextColor: Color.fromARGB(255, 0, 255, 0),
// Button disabled
buttonDisabledBackgroundColor: Color.fromARGB(255, 100, 153, 0),
buttonDisabledBorderColor: Color.fromARGB(255, 100, 153, 0),
buttonDisabledTextColor: Color.fromARGB(255, 100, 153, 0),
// Header
headerBackgroundColor: Color.fromARGB(255, 0, 153, 0),
headerButtonTextColor: Color.fromARGB(255, 0, 153, 0),
headerTextColor: Color.fromARGB(255, 0, 255, 0),
// Input
inputBackgroundColor: Color.fromARGB(255, 0, 255, 0),
inputBorderColor: Color.hex('#ccc'),
inputTextColor: Color(0xFFb74093),
// Others
iconColor: Color(0xFFFFFFFF),
textColor: Color(0xFFb74093),
titleColor: Color(0xFFb74093),
// Header
statusBarStyle: StatusBarStyle.lightStyle, // or StatusBarStyle.defaultStyle
);
AccountKit akt = new AccountKit();
Config cfg = Config()
..theme = theme;
akt.configure(cfg);
To see the statusBarStyle reflected you must set the UIViewControllerBasedStatusBarAppearance property to true on your app's Info.plist file. You can do it from XCode
Android
Check this commit to see how it's done in our sample app
- In your application styles.xml file (usually located in <your project root>/android/app/src/main/res/values folder) create a Theme with the following schema
<style name="LoginThemeYellow" parent="Theme.AccountKit">
<item name="com_accountkit_primary_color">#f4bf56</item>
<item name="com_accountkit_primary_text_color">@android:color/white</item>
<item name="com_accountkit_secondary_text_color">#44566b</item>
<item name="com_accountkit_status_bar_color">#ed9d00</item>
<item name="com_accountkit_input_accent_color">?attr/com_accountkit_primary_color</item>
<item name="com_accountkit_input_border_color">?attr/com_accountkit_primary_color</item>
</style>
See the full set of customizable fields here
- In your app AndroidManifest.xml file (usually under <your project root>/android/app/src/main folder) set that Theme to the AccountKitActivity
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" <-- Add this line
...>
<!-- Set the AccountKitActivity theme -->
<activity
tools:replace="android:theme"
android:name="com.facebook.accountkit.ui.AccountKitActivity"
android:theme="@style/LoginThemeYellow" />
</manifest>
Troubleshooting #
"A system issue occured, Please try again" when sending SMS
A. Check your FacebookAppID
and AccountKitClientToken
on iOS Info.plist
and Android strings.xml
are correct
B. If you have enabled the client access token flow in fb account kit dashboard, then responseType
should be set to code
when calling configure
// Configures the SDK with some options
import 'package:flutter_account_kit/flutter_account_kit.dart';
AccountKit akt = new AccountKit();
Config cfg = Config()
..responseType = ResponseType.code;
akt.configure(cfg);
Inspiration #
This project was inspired by flutter_facebook_login and react-native-facebook-account-kit