Easily add Rownd to your Flutter app.
This SDK leverages Rownd's native iOS and Android SDKs to provide a simple interface for Flutter developers to add Rownd to their apps.
Begin by depending on rownd_flutter_plugin and provider in your pubspec.yaml:
name: my_app
...
dependencies:
rownd_flutter_plugin: ^3.1.0provider: ^6.1.2If you don't have one already, be sure to obtain an app key from the Rownd dashboard for use in the next step.
Next, instantiate the Rownd plugin and call rowndPlugin.configure(YOUR_APP_KEY) within your application wherever you do most of your app's initialization.
Here's an example:
import'package:flutter/material.dart';
import'dart:async';
import'package:flutter/services.dart';
import'package:provider/provider.dart';
import'package:rownd_flutter_plugin/rownd.dart';
import'package:rownd_flutter_plugin/rownd_platform_interface.dart';
import'package:rownd_flutter_plugin/state/global_state.dart';
voidmain() {
runApp(constMyApp());
}
classMyAppextendsStatefulWidget {
constMyApp({super.key});
@overrideState<MyApp> createState() =>_MyAppState();
}
class_MyAppStateextendsState<MyApp> {
String _platformVersion ='Unknown';
final rowndPlugin =RowndPlugin();
@overridevoidinitState() {
super.initState();
rowndPlugin.configure(RowndConfig(
appKey:'YOUR_APP_KEY'));
}
}Now you're ready to use Rownd in your app. The plugin provides a simple interface for checking the current user's authentication status, signing in and out, and getting the current user's profile.
A basic sign-in example might look like this:
import'package:flutter/material.dart';
import'dart:async';
import'package:flutter/services.dart';
import'package:provider/provider.dart';
import'package:rownd_flutter_plugin/rownd.dart';
import'package:rownd_flutter_plugin/rownd_platform_interface.dart';
import'package:rownd_flutter_plugin/state/global_state.dart';
voidmain() {
runApp(constMyApp());
}
classMyAppextendsStatefulWidget {
constMyApp({super.key});
@overrideState<MyApp> createState() =>_MyAppState();
}
class_MyAppStateextendsState<MyApp> {
final rowndPlugin =RowndPlugin();
@overridevoidinitState() {
super.initState();
rowndPlugin.configure(RowndConfig(
appKey:'YOUR_APP_KEY'));
}
@overrideWidgetbuild(BuildContext context) {
returnMultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => _rownd.state()),
Provider(create: (context) => rowndPlugin)
],
child:MaterialApp(
home:Scaffold(
appBar:AppBar(
title:constText('My example app'),
),
body:Column(children: [
Center(child:Text('Welcome to my example app!')),
Consumer<GlobalStateNotifier>(
builder: (_, rownd, __) =>ElevatedButton(
onPressed: () {
var rowndPlugin =Provider.of<RowndPlugin>(context, listen:false);
if (rownd.state.auth?.isAuthenticated ??false) {
rowndPlugin.signOut();
} else {
RowndSignInOptions signInOpts =RowndSignInOptions();
signInOpts.postSignInRedirect ="https://deeplink.myapp.com";
rowndPlugin.requestSignIn(signInOpts);
}
},
child:Text((rownd.state.auth?.isAuthenticated ??false)
?'Sign out':'Sign in')),
),
]),
),
));
}
}
Let's review what's happening here:
First, we configure Rownd with our app key as before. Then, when building our UI structure, we wrap the entire app in a ChangeNotifierProvider that provides the GlobalStateNotifier object to all of our widgets. This object is a ChangeNotifier that notifies its listeners whenever the Rownd state changes. We can use this object to listen for changes to the user's authentication status and update our UI accordingly.
When we need access to the Rownd state, we can use the Consumer widget to listen for changes to the GlobalStateNotifier object. The Consumer widget will rebuild its child whenever the GlobalStateNotifier object notifies its listeners. In this example, we use the Consumer widget to build a button that will sign the user in or out depending on their current authentication status.
There are a couple of configuration settings that must be applied to the platform-specific code for your app in order for Rownd to work properly.
Set your app's
targetSdkVersionto 32 or higher in your app'sbuild.gradlefile.Set your app's
minSdkVersionto 26 or higher in your app'sbuild.gradlefile. Rownd currently does not support an API version lower than 26.Ensure any Android activities (like
MainActivity) subclassFlutterFragmentActivityinstead ofFlutterActivity. If you're using the defaultMainActivitygenerated by Flutter, you can simply change the superclass toFlutterFragmentActivitylike this:
classMainActivity: FlutterFragmentActivity() {}- Check and update your ProGuard config using the rules from our Android SDK.
Configures the Rownd plugin with your app key. This must be called before any other methods.
Requests that the user sign in. The options parameter is optional and can be used to customize the sign-in process.
| Property | Type | Description |
|---|---|---|
postSignInRedirect | String | The URL to redirect to after the user has signed in. This can be used for deep-linking within the app or to ensure that the user is redirected back into the app after completing a sign-in from email or text message. |
Signs the user out.
Displays the current user's profile information, allowing them to update it.
Returns the current user's profile information as a User object.
Returns the value associated with the specified key for the current user.
Sets the current user's profile information to the specified User object.
Sets the value associated with the specified key for the current user.
Returns a GlobalStateNotifier object that can be used to listen for changes to the Rownd state.
The GlobalStateNotifier object is a ChangeNotifier that notifies its listeners whenever the Rownd state changes. It provides the following properties:
| Property | Type | Description |
|---|---|---|
auth | RowndAuthState | The current user's authentication state. |
user | RowndUser | The current user's profile. |
By integrating RowndCubit with BlocProvider, you can effectively manage the authentication state across your Flutter application. This setup ensures that the UI remains responsive to changes in authentication status, providing a seamless user experience.
Initialize the RowndPlugin in the initState method and configured with your app key. This setup is required for the Rownd authentication plugin to function correctly.
class_MyAppStateextendsState<MyApp> {
final rowndPlugin =RowndPlugin();
@overridevoidinitState() {
super.initState();
rowndPlugin.configure(RowndConfig(appKey:'YOUR_APP_KEY'));
}
}Use a BlocProvider that wraps around the MaterialApp, providing the RowndCubit to the entire widget tree. BlocBuilder listens for changes in the authentication state and determines whether to show the LoginPage or MyHomePage.
@overrideWidgetbuild(BuildContext context) {
returnBlocProvider(
create: (context) =>RowndCubit(rowndPlugin),
child:MaterialApp(
title:'Example App',
theme:ThemeData(
useMaterial3:true,
colorScheme:ColorScheme.fromSeed(seedColor:Colors.green),
),
home:BlocBuilder<RowndCubit, AuthState>(
builder: (context, state) {
if (state ==AuthState.authenticated) {
returnconstMyHomePage();
} else {
returnconstLoginPage();
}
},
),
routes: {
'/home': (context) =>constMyHomePage(),
},
),
);
}In the LoginPage, the RowndCubit is accessed using context.watch<RowndCubit>(). This allows the button to trigger the signIn method, initiating the authentication process.
classLoginPageextendsStatelessWidget {
constLoginPage({super.key});
@overrideWidgetbuild(BuildContext context) {
var authCubit = context.watch<RowndCubit>();
returnScaffold(
appBar:AppBar(
title:constText('My example app'),
),
body:Column(
children: [
constCenter(child:Text('Welcome to my example app!')),
ElevatedButton(
onPressed: () async {
authCubit.signIn();
},
child:constText('Sign in'),
),
],
),
);
}
}signIn([RowndSignInOptions? options])
Requests that the user sign in. The options parameter is optional and can be used to customize the sign-in process.
signOut()
Signs the use out.
isAuthenticated()
Returns a boolean if the user is signed in or out.
manageAccount()
Displays the current user's profile information, allowing them to update it.
user
Returns JSON object of the authenticated user's ID, first name, last name, and email.