flutter_account_kit 0.7.0

flutter_account_kit #

pub package Build Status Coverage Status 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';

FlutterAccountKit akt = new FlutterAccountKit();
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.

Done!

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
   );
FlutterAccountKit akt = new FlutterAccountKit();
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 screen shot 2016-08-02 at 11 44 07 am

Android

<br/>

Check this commit to see how it's done in our sample app

  1. In your application styles.xml file (usually located in 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

  1. In your app AndroidManifest.xml file (usually under 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';

FlutterAccountKit akt = new FlutterAccountKit();
Config cfg = Config()
             ..responseType = ResponseType.code;
akt.configure(cfg);


Inspiration #

This project was inspired by flutter_facebook_login and react-native-facebook-account-kit

0.7.0 #

  • Update readme
  • Update dependencies to support whatsapp login

0.6.6 #

  • Refactor for androidx

0.6.5 #

  • Add static framework for swift based projects

0.6.4 #

  • Fix issue with country whitelisting
  • Fix authorization code truncation issue

0.6.3 #

  • Fix null issue with getCurrentAccount on ios

0.6.2 #

  • Fix issue with initial phone number for android and ios

0.6.1 #

  • Added input text color to accountkit theme constructor

0.6.0 #

  • Added button text color to accountkit theme
  • Fix issue with color mapping

0.5.4 #

  • Test fixes

0.5.3 #

  • Fixed issue with initial phone number config

0.5.2 #

  • Rename method channel

0.5.1 #

  • Fix formatting

0.5.0 #

  • Initial release.

example/README.md

flutter_account_kit_example #

Demonstrates how to use the flutter_account_kit plugin.

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_account_kit: ^0.7.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_account_kit/flutter_account_kit.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
95
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
97
Learn more about scoring.

We analyzed this package on Sep 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/generated/i18n.dart.

Run flutter format to format lib/generated/i18n.dart.

Format lib/src/config.dart.

Run flutter format to format lib/src/config.dart.

Format lib/src/utils.dart.

Run flutter format to format lib/src/utils.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.58.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test