Flutter Setup

In this guide, you'll learn how to create a Flutter app and initialize it with the Okto SDK, including setting up authentication using Google OAuth and the Okto Provider.

This quickstart guide will help you set up a basic Flutter app using the Okto SDK. Follow these steps to get your app up and running quickly.

Prerequisites

Ensure you have Flutter installed and set up on your system. Run the following command to verify your setup:

bash

flutter doctor

All checks should return green. If not, address any issues before proceeding.

Create a new Flutter project

Create a new Flutter project by running:

bash

flutter create PATH_TO_MY_APP
cd PATH_TO_MY_APP

Set up Google Cloud Console

Go to the Google Cloud Console.
Follow our Google Authentication Setup Guide to create a new project and obtain the necessary credentials.

Required Client IDs

Depending on your target platforms, you'll need:

Android devices: Web Client ID and Android Client ID
iOS devices: iOS Client ID
Both platforms: Web Client ID, Android Client ID, and iOS Client ID

Configure dependencies

Update your pubspec.yaml file to include the following dependencies:

pubsec.yaml

dependencies:  
	flutter:    
  	sdk: flutter  
 
  google_sign_in: ^6.2.1  
  flutter_dotenv: ^5.1.0  
  okto_flutter_sdk: ^0.0.15  
  cupertino_icons: ^1.0.6

Then run:

bash

flutter pub get

Create a strings.xml file under android/app/src/main/res/values/ with the following content:

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="default_web_client_id">YOUR_WEB_CLIENT_ID</string>
</resources>

Replace YOUR_WEB_CLIENT_ID with your actual Web Client ID from Google Console.

Create necessary files

Create the following files in your project:

.env file in the root folder:

.env

  OKTO_CLIENT_API_KEY=YOUR_OKTO_CLIENT_API_KEY
 
  # Options: staging | prod | sandbox
  BUILD_TYPE=sandbox

If not already added, add your .env to your pubsec.yaml under the assets section:

pubsec.yaml

 assets:
	- .env

lib/utils/okto.dart:

lib/utils/okto.dart

  import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
  import 'package:my_app/utils/global.dart';
 
  Globals globals = Globals.instance;
  Okto? okto;

lib/utils/global.dart:

lib/utils/global.dart

  import 'package:flutter_dotenv/flutter_dotenv.dart';
  import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
 
  class Globals {
  	String buildType = dotenv.get('BUILD_TYPE');
  	String oktoClientApiKey = dotenv.get('OKTO_CLIENT_API_KEY');
 
  	static final Globals _singleton = Globals._internal();
 
  	factory Globals() {
  		return _singleton;
  	}
 
  	Globals._internal();
 
  	static Globals get instance => _singleton;
 
  	BuildType getBuildType() {
  		switch (buildType) {
  		case 'sandbox':
  			return BuildType.sandbox;
  		case 'production':
  			return BuildType.production;
  		case 'staging':
  			return BuildType.staging;
  		default:
  			return BuildType.sandbox;
  		}
  	}
 
  	String getOktoApiKey() {
  		return oktoClientApiKey;
  	}
  }

Update main.dart

Replace the contents of lib/main.dart with:

lib/main.dart

  import 'package:flutter/material.dart';
  import 'package:flutter_dotenv/flutter_dotenv.dart';
  import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
  import 'package:my_app/auth/google_login.dart';
  import 'package:my_app/screens/home_page.dart';
  import 'package:my_app/utils/okto.dart';
 
  void main() async {
  await dotenv.load(fileName: ".env");
  WidgetsFlutterBinding.ensureInitialized();
  okto = Okto(globals.getOktoApiKey(), globals.getBuildType());
  runApp(const MyApp());
  }
 
  class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  Future<bool> checkLoginStatus() async {
  	return await okto!.isLoggedIn();
  }
 
  @override
  Widget build(BuildContext context) {
  	return MaterialApp(
  	debugShowCheckedModeBanner: false,
  	title: 'Okto Flutter template app',
  	theme: ThemeData(
  		colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  		useMaterial3: true,
  	),
  	home: FutureBuilder<bool>(
  		future: checkLoginStatus(),
  		builder: (context, snapshot) {
  		if (snapshot.connectionState == ConnectionState.waiting) {
  			return const Scaffold(
  			body: Center(
  				child: CircularProgressIndicator(),
  			),
  			);
  		} else {
  			bool isLoggedIn = snapshot.data ?? false;
  			if (isLoggedIn) {
  			return const HomePage();
  			} else {
  			return const LoginWithGoogle();
  			}
  		}
  		},
  	),
  	);
  	}
  }

Create Home Page

Create lib/screens/home_page.dart:

lib/screens/home_page.dart

import 'package:flutter/material.dart';
import 'package:my_app/auth/google_login.dart';
import 'package:my_app/utils/okto.dart';
 
class HomePage extends StatelessWidget {
const HomePage({super.key});
 
@override
Widget build(BuildContext context) {
	return Scaffold(
	backgroundColor: const Color(0xff5166EE),
	body: SafeArea(
		child: Column(
		children: [
			Container(
			alignment: Alignment.center,
			margin: const EdgeInsets.all(40),
			child: const Text(
				'Home Page',
				style: TextStyle(
					color: Colors.white,
					fontWeight: FontWeight.w800,
					fontSize: 30),
			),
			),
			ElevatedButton(
				onPressed: () async {
				try {
					await okto!.logout();
					Navigator.pushReplacement(
						context,
						MaterialPageRoute(
							builder: (context) => const LoginWithGoogle()));
				} catch (e) {
					print(e);
				}
				},
				child: const Text(
				'Logout',
				style: TextStyle(color: Colors.red),
				)),
		],
		),
	),
	);
}

Run your app

You can now run your Okto-integrated Flutter app:

flutter run

Your app should now have basic Okto SDK integration with Google Sign-In functionality.

Congratulations!

🎉 Congratulations! You now have a Flutter app powered by Okto. You can focus on your business logic and UI/UX now. You can checkout how to use other features in our Flutter Template Repo.

Flutter Setup

On this page