Hey, you might have opened this article because you want to use Okra in your Flutter application, but you're unsure how to get started. Or maybe you are just curious. Whatever the case may be, you're in luck! In this piece, I'll be walking you through step-by-step instructions on how to get it done; spoilers - it's super easy 🎉
Okra provides open finance infrastructure that enables developers and businesses to build personalized digital products and services for consumers in Africa.
Flutter is an open-source framework developed by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
This article is not an intro to Flutter, and it doesn't cover the basics. You'll need to be familiar with Dart and have a basic Flutter setup on your machine to get started.
To get started, you'll need to do the following things:
- Sign up with Okra (if you don't already have an account with Okra)
- Retrieve your Okra credentials - Client Token, API key
- Add the latest widget version to your
pubspec.yamlfile, as seen below
dependencies: flutter: sdk: flutter ....other dependencies okra_widget_official: ^3.0.1
- To install the newly added dependency, run this in your terminal at the root folder of your project
flutter run pub get
Let’s Get Started 🎉
Now that we have installed the dependency, time to integrate the Okra widget into our app. Note that we're using a demo app for this instruction; you can choose to have this implementation anywhere in your app, depending on your business logic. There are two ways you can build your widget, using the
This method takes away the burden of customizing your widget in your text editor; instead, it allows you to leverage the Okra dashboard to customize the appearance and features of your widget. After customization, it presents a short URL, which is a vital link for the widget.
This method saves time, and it's a no-code option.
Depending on your logic, you can setup the function
callOkraWidget in your controller or view model class with the necessary options and call it when needed, which would be most likely when your user triggers a call to action of your choice, in this case, the Raised Button.
This method gives you the freedom to code by hand the necessary parameters required to kickstart the SDK.
BuildWithOptions lets you customize the appearance, features, and be creative. Hence, it's the best choice for a developer who wants to change their widget's look and feel frequently.
Depending on your logic, you can set up the function
callOkraWidget in your controller or view model class with the necessary options and call it when needed, which would most likely be when your user triggers a call to action of your choice, in this case, the Raised Button.
productsmust be a list of Strings
- All booleans default to
chargeCurrencywill all be ignored.
colordefaults to the Okra color code
- To build a more personalized experience for returning users, all you have to do, is to provide any of these parameters
customerNin. Kindly note that only one of these parameters is needed and if you happen to provide more than one, only one valid param would be used in the order they’ve been listed above. To read more on Okra’s returning user experience please click here
I hope this guide helped you implement Okra in a Flutter project. We'd love to know how your integration with our SDKs is going, so feel free to buzz us on Slack.
Check out this repo for the entire project, and don't forget to star it.