Get started
Prerequisites
- Flutter SDK
- For Android:
- A device or emulator with Google Play services installed and up-to-date.
- Android Studio.
- For iOS:
- XCode
- An iOS device such as an iPhone or an iPad
1. Install package
Create your Flutter application if you haven't already, see the Flutter guide and setup it by following the given instructions.
Open
pubspec.yaml
and add the following dependencies::yamldependencies: flutter_1flow_sdk: ^2024.9.2
Open a Terminal window in your flutter project directory and type:
shellflutter pub get
2. Setup
For iOS
Navigate to the ios directory and run
pod install
shellcd ios pod install
Make sure you have configured the deployment target to iOS
11.0
or higher, since Flutter creates new iOS apps with 9.0 deployment target. Open *.xcworkspace
from ios
folder, change the deployment target to 11.0
and re-run pod install
.For Android
Include the below repository to your project's
build.gradle
file:javaallprojects{ repositories{ google() jcenter() maven{url 'https://jitpack.io'} } }
Add dependency to your app's
build.gradle
file:javadefaultConfig { .... minSdkVersion 21 } dependencies { .... implementation "com.github.1Flow-Inc:1flow-android-sdk:2024.08.23" }
3. Configure
Open your Flutter Application’s
lib/main.dart
and write the following code in main()
dart// Add this line to import 1Flow at the top of the file import 'package:flutter_1flow_sdk/flutter_1flow_sdk.dart'; void main() { runApp(MyApp()); // Add this line to configure 1Flow OneFlow.configure('your-project-api-key'); }
Note: you need to replace
your-project-api-key
with your actual project API key. Click here and navigate to Settings → Project → API keys section. Copy your API key and paste it into the code snippet.Optional: If you want to configure 1Flow UI with non-system font then use below code to configure custom font for survey UI
dart// Add this line to import 1Flow at the top of the file import 'package:flutter_1flow_sdk/flutter_1flow_sdk.dart'; void main() { runApp(MyApp()); // Add this line to configure 1Flow OneFlow.configure('your-project-api-key'); //For iOS Only OneFlow.useFont(fontFamily: "Courier New"); // For Android Only (This font file should exist at "/android/app/src/main/assets/fonts/pacifico.ttf" OneFlow.useFont(path: "fonts/pacifico.ttf"); // For iOS & Android Both (This font file should exist at "/android/app/src/main/assets/fonts/pacifico.ttf" OneFlow.useFont(fontFamily: "Courier New", path: "fonts/pacifico.ttf"); }
fontFamily
and path
are optional. you can pass null
if you want to restore it to default system font.4. Identify users
In every new session, call
OneFlow.logUser()
to pass the user identifier, along with any other parameters you'd like to store with us (such as email, full name, etc.), to 1Flow.To identify a user:
dart// import 1Flow SDK import 'package:flutter_1flow_sdk/flutter_1flow_sdk.dart'; try { OneFlow.logUser('12345', { 'firstName': 'steve', 'lastName': 'jobs', 'number': 123456 }); } on PlatformException { print('logUser: error occured'); }
Here, parameters is optional. pass
nil
if you don't want any parameters to send with the user.5. Track events
Events are central to 1Flow. An Event is a marker in the code to track a key moment in the user flow - like when the user just created an account, completed some action, made a purchase or rejected an offer. We recommend you track at least 4-5 events to better understand the user journey.
To track an event:
dartimport 'package:flutter_1flow_sdk/flutter_1flow_sdk.dart'; try { OneFlow.recordEventName('custom', { 'product': 'test', 'price': 123.9 }); // OR OneFlow.recordEventName('custom'); } on PlatformException { print('recordEventName: error occured'); }
Here, parameters is optional. pass
nil
if you don't want any parameters to send with the event.
Parameters in Identify and Track calls support the following types:
String
, Int
, Double
, Float
, URL
, and Date
.
Unsupported data types will be ignored.Icon Missing: If you are using
flutter_1flow_sdk
along with flutter_launcher_icons
package, it might be possible that app icons start disappearing. To fix problem you simply need to delete ic_launcher.xml
file from your app → src → main → res → mipmap-anydpi-v26
folder. 6. Announcement Inbox
To display the announcements inbox to the user, invoke the function
OneFlow.showInbox();
. This action will render the announcements inbox at the top of the screen.Note: Until the Announcement inbox screen is presented, the system will bypass any surveys or in-app announcements associated with events triggered within that timeframe.
Launch your first survey
Now that you've successfully installed 1Flow into your app, it's time to create your first survey.
If you've already created a survey and published it, run the app and trigger the event. You should see the survey show up when the event is fired.