Skip to content

Flutter Code Sample

Estimated time to read: 4 minutes

Before integrating a Flutter Web3 app with the Arcana Auth SDK, address the prerequisites first. Then install the arcana_auth_flutter package and integrate the SDK.


Configure Social Login(Google, Twitch)
Configure Social Login(Google, Twitch)
  • By default, a Testnet configuration profile is created after the app is registered. A unique Client ID is assigned to the Flutter app. Note this value, it will be required later during app integration.
Get Arcana Client ID
Get Arcana Client ID

Install SDK

The Arcana arcana_auth_flutter package is offered as a 'Flutter Plugin'. Set up the latest version using the app's pubspec.yaml file:

  flutter:       # Required for every Flutter project
    sdk: flutter # Required for every Flutter project
  flutter_localizations: # Required to enable localization
    sdk: flutter         # Required to enable localization
  arcana_auth_flutter: ^0.0.6 # Required for integrating with Arcana Auth SDK


For a complete Flutter app integration example, see the Auth Examples GitHub Repository.

Integrate App

Refer to the Flutter sample code in the repository mentioned earlier. In the lib/main.dart file, the arcana_auth_flutter/arcana_sdk.dart file is imported. Create a new instance of AuthProvider by specifying the Client ID assigned to the Flutter app during app registration.

import 'dart:convert';
import 'dart:math';
import 'package:arcana_auth_flutter/common.dart';
import 'package:arcana_sdk_example/strings.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:arcana_auth_flutter/arcana_sdk.dart';

void main() {
  runApp(MaterialApp(home: const MyApp()));


class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final auth = AuthProvider(
      clientId: "xar_test_xxxxxxxxxxxxxxxx35e1811b0c2e33619f8");
  TextEditingController heightController = TextEditingController();
  TextEditingController widthController = TextEditingController();
  String logs = '';
  String action = '';
  void initState() {


  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    setState(() {
      logs = '';
    auth.init(context: context); // Important!!! initialize before calling other methods

Make sure to call the init method of the AuthProvider first before calling any other methods.

Onboard Users

Next, add code to onboard users. In this example, we use the custom login UI option and use loginWithSocial method of the AuthProvider to onboard users via 'Google' as the social login provider.

  children: [
      child: ElevatedButton(
          onPressed: () {
            auth.loginWithSocial("google").then((_) {
              action = "login_complete";
              setState(() {});
            logs = '';
            action = 'login_google';
            setState(() {});
          child: Text("Login with google")),

Once a user authenticates, the built-in Arcana wallet is displayed in the app's context and can be used for signing blockchain transactions. See Arcana wallet User Guide for more Web3 wallet operation details.

Login and access in-app Arcana Wallet
Login and access in-app Arcana Wallet

Use Web3 Wallet Operations

Developers can add code as required to programmatically call Web3 wallet operations for authenticated users. See Arcana wallet Developer's Guide and the Arcana Developer Dashboard User Guide for details on wallet configuration.

That's all!

The Flutter app is successfully integrated and ready to onboard Web3 users via social login, or email as configured via the dashboard. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.

See Also

Last update: May 16, 2024 by DocX, shaloo