Unlock the power of RevenueCat Firebase integration for your Flutter app with the expertise from TBR Group

Introduction

RevenueCat provides a variety to get your backend integrated with subscription services. One of the possible solutions is the RevenueCat Firebase integration. This integration allows you to receive customer information and subscription events right on your Firebase backend.

Benefits

Which benefits can you get from integrating RevenueCat to Firestore? The RevenueCat Firebase integration makes it possible to track subscriptions status and execute your custom logic on your backend side.

With RevenueCat Firebase extension you can:
1. Receive the latest customer information
2. Handle subscription events, such as trials, renewals, expirations, etc.
3. Integrate and manage user access with Custom Claims
4. Execute your custom logic for each subscription event

How it works

RevenueCat can be integrated with Firebase by using the RevenueCat extension. During plugin installation you can setup 4 features:
1. Collection where to store subscription events
2. Collection where to store customers info
3. Enable or disable Custom Claims and entitlements integration
4. Enable subscription event triggers

Installation

To install this extension you need to have both a Firebase and a RevenueCat project. You can install the extension using the Firebase Console or with CLI. The provided screenshots are from the Firebase Console installation.

Events

To enable subscriptions events storage, enter the collection name where they will be stored.

When the subscription status is changed, RevenueCat sends an event corresponding to this change. There are 12 possible events:
1. Initial purchase
2. Non renewing purchase
3. Renewal
4. Product change
5. Cancellation
6. Uncancellation
7. Billing issue
8. Subscription paused
9. Transfer
10. Expiration
11. Test
12. Subscription alias (deprecated)

Each subscription event will be stored in a separate document in the specified collection. You can implement your custom logic by listening to document changes in this collection or make it more straightforward with event handlers. 

Below are JSON samples for some of the listed events.

{
 "aliases": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "app_id": "appf742acb32c",
 "app_user_id": "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
 "commission_percentage": 0.125,
 "country_code": "UA",
 "currency": "UAH",
 "entitlement_id": null,
 "entitlement_ids": [
   "standard"
 ],
 "environment": "SANDBOX",
 "event_timestamp_ms": 1665576707874,
 "expiration_at_ms": 1665577119081,
 "id": "6E988AC0-47AF-579D-D581-18EC79B70391",
 "is_family_share": false,
 "offer_code": null,
 "original_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "original_transaction_id": "GPA.7988-3317-7927-18610",
 "period_type": "NORMAL",
 "presented_offering_id": null,
 "price": 14.603,
 "price_in_purchased_currency": 539.99,
 "product_id": "tbrgroup.standard.monthly",
 "purchased_at_ms": 1665576703083,
 "store": "PLAY_STORE",
 "subscriber_attributes": {
   "$androidId": {
     "updated_at_ms": 1665566380081,
     "value": "e3985a6f8ffcb769"
   },
   "$email": {
     "updated_at_ms": 1665566426724,
     "value": "tbremail@gmail.com"
   }
 },
 "takehome_percentage": 0.85,
 "tax_percentage": 0.1667,
 "transaction_id": "GPA.7988-3317-7927-18610",
 "type": "INITIAL_PURCHASE"
}
{
 "aliases": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "app_id": "appf742acb32c",
 "app_user_id": "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
 "commission_percentage": 0.125,
 "country_code": "UA",
 "currency": "UAH",
 "entitlement_id": null,
 "entitlement_ids": [
   "standard"
 ],
 "environment": "SANDBOX",
 "event_timestamp_ms": 1665582112844,
 "expiration_at_ms": 1665582465551,
 "id": "2A24218E-4BDF-DAE8-A862-D55290246734",
 "is_family_share": false,
 "is_trial_conversion": false,
 "offer_code": null,
 "original_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "original_transaction_id": "GPA.7988-3317-7927-18610",
 "period_type": "NORMAL",
 "presented_offering_id": null,
 "price": 14.603,
 "price_in_purchased_currency": 539.99,
 "product_id": "tbrgroup.standard.monthly",
 "purchased_at_ms": 1665580665551,
 "store": "PLAY_STORE",
 "subscriber_attributes": {
   "$androidId": {
     "updated_at_ms": 1665566380081,
     "value": "e3985a6f8ffcb769"
   },
   "$email": {
     "updated_at_ms": 1665566426724,
     "value": "tbremail@gmail.com"
   }
 },
 "takehome_percentage": 0.85,
 "tax_percentage": 0.1667,
 "transaction_id": "GPA.7988-3317-7927-18610..5",
 "type": "RENEWAL"
}
{
 "aliases": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "app_id": "appf742acb32c",
 "app_user_id": "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
 "commission_percentage": 0.125,
 "country_code": "UA",
 "currency": "UAH",
 "entitlement_id": null,
 "entitlement_ids": [
   "standard"
 ],
 "environment": "SANDBOX",
 "event_timestamp_ms": 1665580130780,
 "expiration_at_ms": 1665580128528,
 "id": "13FEF71E-4B31-B0CB-B926-41837C86EB6E",
 "is_family_share": false,
 "new_product_id": "tbrgroup.standard.yearly",
 "offer_code": null,
 "original_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "original_transaction_id": "GPA.7988-3317-7927-18610",
 "period_type": "NORMAL",
 "presented_offering_id": null,
 "price": 0,
 "price_in_purchased_currency": 0,
 "product_id": "tbrgroup.standard.monthly",
 "purchased_at_ms": 1665578844936,
 "store": "PLAY_STORE",
 "subscriber_attributes": {
   "$androidId": {
     "updated_at_ms": 1665566380081,
     "value": "e3985a6f8ffcb769"
   },
   "$email": {
     "updated_at_ms": 1665566426724,
     "value": "tbremail@gmail.com"
   }
 },
 "takehome_percentage": 0.85,
 "tax_percentage": 0.1667,
 "transaction_id": "GPA.7988-3317-7927-18610",
 "type": "PRODUCT_CHANGE"
}
{
 "aliases": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "app_id": "appf742acb32c",
 "app_user_id": "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
 "cancel_reason": "UNSUBSCRIBE",
 "commission_percentage": 0.125,
 "country_code": null,
 "currency": "UAH",
 "entitlement_id": null,
 "entitlement_ids": [
   "standard"
 ],
 "environment": "SANDBOX",
 "event_timestamp_ms": 1665577372363,
 "expiration_at_ms": 1665576999458,
 "id": "80E855E8-4411-1D44-BBCD-BA4CEDB1C5A4",
 "is_family_share": false,
 "offer_code": null,
 "original_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "original_transaction_id": "GPA.7988-3317-7927-18610",
 "period_type": "NORMAL",
 "presented_offering_id": null,
 "price": 0,
 "price_in_purchased_currency": 0,
 "product_id": "tbrgroup.standard.monthly",
 "purchased_at_ms": 1665576703083,
 "store": "PLAY_STORE",
 "subscriber_attributes": {
   "$androidId": {
     "updated_at_ms": 1665566380081,
     "value": "e3985a6f8ffcb769"
   },
   "$email": {
     "updated_at_ms": 1665566426724,
     "value": "tbremail@gmail.com"
   }
 },
 "takehome_percentage": 0.85,
 "tax_percentage": 0.1667,
 "transaction_id": "GPA.7988-3317-7927-18610",
 "type": "CANCELLATION"
}
{
 "aliases": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "app_id": "appf742acb32c",
 "app_user_id": "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
 "commission_percentage": 0.15,
 "country_code": "US",
 "currency": "USD",
 "entitlement_id": null,
 "entitlement_ids": [
   "standard"
 ],
 "environment": "PRODUCTION",
 "event_timestamp_ms": 1686318917336,
 "expiration_at_ms": 1686405315296,
 "grace_period_expiration_at_ms": 1687528258057,
 "id": "OB1FFF21-42AF-1A20-BC2F-6B72C0FC68FD",
 "is_family_share": false,
 "offer_code": null,
 "original_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "original_transaction_id": "GPA.7988-3317-7927-18610",
 "period_type": "TRIAL",
 "presented_offering_id": null,
 "price": 0,
 "price_in_purchased_currency": 0,
 "product_id": "tbrgroup.standard.yearly",
 "purchased_at_ms": 1686318658057,
 "store": "PLAY_STORE",
 "subscriber_attributes": {
   "$androidId": {
     "updated_at_ms": 1665566380081,
     "value": "e3985a6f8ffcb769"
   },
   "$email": {
     "updated_at_ms": 1665566426724,
     "value": "tbremail@gmail.com"
   }
 },
 "takehome_percentage": 0.85,
 "tax_percentage": 0,
 "transaction_id": "GPA.7988-3317-7927-18610..0",
 "type": "BILLING_ISSUE"
}
{
 "aliases": [
   "$RCAnonymousID:48d54d20ad4bfa29e256b4680d3b737f",
   "jxIE6mAjcSD3PBu6ZefO7WOHq98T"
 ],
 "app_id": "appf742acb32c",
 "app_user_id": "$RCAnonymousID:48d54d20ad4bfa29e256b4680d3b737f",
 "event_timestamp_ms": 1665660047298,
 "id": "C196E7BC-4AFA-C4C2-ACB5-00B3D6951BED",
 "origin_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "store": "PLAY_STORE",
 "transferred_from": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "transferred_to": [
   "$RCAnonymousID:48d54d20ad4bfa29e256b4680d3b737f",
   "jxIE6mAjcSD3PBu6ZefO7WOHq98T"
 ],
 "type": "TRANSFER"
}
{
 "aliases": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "app_id": "appf742acb32c",
 "app_user_id": "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
 "commission_percentage": 0.125,
 "country_code": "UA",
 "currency": "UAH",
 "entitlement_id": null,
 "entitlement_ids": [
   "standard"
 ],
 "environment": "SANDBOX",
 "event_timestamp_ms": 1665577372364,
 "expiration_at_ms": 1665576999458,
 "expiration_reason": "UNSUBSCRIBE",
 "id": "568A38AA-4036-A6DB-4FA2-5ECBCD8C9958",
 "is_family_share": false,
 "offer_code": null,
 "original_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "original_transaction_id": "GPA.7988-3317-7927-18610",
 "period_type": "NORMAL",
 "presented_offering_id": null,
 "price": 0,
 "price_in_purchased_currency": 0,
 "product_id": "tbrgroup.standard.monthly",
 "purchased_at_ms": 1665576703083,
 "store": "PLAY_STORE",
 "subscriber_attributes": {
   "$androidId": {
     "updated_at_ms": 1665566380081,
     "value": "e3985a6f8ffcb769"
   },
   "$email": {
     "updated_at_ms": 1665566426724,
     "value": "tbremail@gmail.com"
   }
 },
 "takehome_percentage": 0.85,
 "tax_percentage": 0.1667,
 "transaction_id": "GPA.7988-3317-7927-18610",
 "type": "EXPIRATION"
}

Note that RevenueCat doesn’t send some special events for trial cancellation, trial conversion or for some other events which you can expect to see. But it sends all needed information in the base events, so you can detect special events and implement your custom logic according to them.

For example event RENEWAL contains key is_trial_conversion with boolean value, which you can use to define whether this renewal event was a trial conversion or just a regular renewal.

Customers

To enable customers info storage enter the collection name where you want to store them.

When the customer information is changed, the RevenueCat extension updates this information in the customer document. Each customer is stored in a separate document. The customer identifier represents the document identifier.

Unlike subscription events the customer info is always stored in the single document. Each time customer info is updated the customer info document will be completely overwritten. So the customer info document represents the current state of the customer.

The customer document contains information about purchased user entitlements, subscriptions and products. Below you can see the JSON sample of the customer info.

{
 "aliases": [
   "FK0CyI0zSJmBG53YjHt8gYGhTMP0",
   "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9"
 ],
 "entitlements": {
   "standard": {
     "expires_date": "2022-10-12T13:19:20Z",
     "grace_period_expires_date": null,
     "product_identifier": "tbrgroup.standard.yearly",
     "purchase_date": "2022-10-12T12:47:24Z"
   }
 },
 "first_seen": "2022-10-12T09:19:39Z",
 "last_seen": "2022-10-12T09:20:26Z",
 "management_url": "https://play.google.com/store/account/subscriptions",
 "non_subscriptions": {},
 "original_app_user_id": "$RCAnonymousID:382e60cb78ce1a2bd91c86af3b6294b9",
 "original_application_version": null,
 "original_purchase_date": null,
 "other_purchases": {},
 "subscriptions": {
   "tbrgroup.standard.monthly": {
     "billing_issues_detected_at": null,
     "expires_date": "2022-10-12T12:16:39Z",
     "grace_period_expires_date": null,
     "is_sandbox": true,
     "original_purchase_date": "2022-10-12T12:11:43Z",
     "period_type": "normal",
     "purchase_date": "2022-10-12T12:11:43Z",
     "store": "play_store",
     "unsubscribe_detected_at": "2022-10-12T12:22:52Z"
   },
   "tbrgroup.standard.yearly": {
     "billing_issues_detected_at": null,
     "expires_date": "2022-10-12T13:19:20Z",
     "grace_period_expires_date": null,
     "is_sandbox": true,
     "original_purchase_date": "2022-10-12T12:47:24Z",
     "period_type": "normal",
     "purchase_date": "2022-10-12T12:47:24Z",
     "store": "play_store",
     "unsubscribe_detected_at": null

   }
 }
}

Event Handlers

With the RevenueCat extension you can configure your subscription event custom handlers. You can define a separate cloud function for each event. The difference from events collection is that event handlers do not store any data in your Firestore by default. And you can define what information from the event you need to store and which logic is needed to be executed.

Select the channel location to enable event handlers. The channel location will be used as a location to publish your event handler cloud functions.

Then select the events which you want to enable from the dropdown menu. Only selected events will be enabled to receive callbacks from the RevenueCat extension.

These events are the same as listed events in the Events chapter of this article.

After the events are enabled you can deploy the cloud functions for these events. In the extension documentation you can see this code sample which shows how to create event handlers.

Note: The entire code presented is written in TypeScript.

import { onCustomEventPublished } from "firebase-functions/v2/eventarc";

export const eventhandler = onCustomEventPublished(
 {
   eventType: "com.revenuecat.v1.initial_purchase",
   channel: "projects/${projectId}/locations/europe-west4/channels/firebase",
   region: "europe-west4",
 },
 (e) => {
   // Handle extension event here.
 }
);

You can see that the event callback consists of 5 parts:
1. The name of the cloud function eventhandler.
2. The event type com.revenuecat.v1.initial_purchase. The com.revenuecat.v1 part is always the same. You need to change only the last part of the event for different event handlers. The last part represents the name of the event like initial_purchase.
3. The channel projects/${projectId}/locations/europe-west4/channels/firebase. It depends on your project id and the channel location which you selected during extension setup. It is the same for all event handlers.
4. The region europe-west4 which you selected during an extension setup.
5. The handler function.

Let’s improve the code above so that it can be used for many event handlers with less effort.

Create a revCatEventarcOpts function which accepts the event name and returns EventarcTriggerOptions value.

import { EventarcTriggerOptions } from "firebase-functions/v2/eventarc";

export const revCatEventarcOpts = (
 eventName: string

): EventarcTriggerOptions => {
 return {
   eventType: `com.revenuecat.v1.${eventName}`,
   channel: `projects/${projectId}/locations/europe-west4/channels/firebase`,
   region: "europe-west4",
 };
};

Where projectId is the variable taken from the environment.

export const projectId = process.env.GCP_PROJECT || process.env.GCLOUD_PROJECT

Use revCatEventarcOpts function to declare your event handlers and put them together into one object.

export const purchases = {
 initial: onCustomEventPublished(
   revCatEventarcOpts("initial_purchase"),
   (e) => {
     // Handle initial_purchase event here.
   }
 ),
 renewal: onCustomEventPublished(
   revCatEventarcOpts("renewal"),
   (e) => {
     // Handle renewal event here.
   }
 ),
 expiration: onCustomEventPublished(
   revCatEventarcOpts("expiration"),
   (e) => {
     // Handle expiration event here.
   }
 ),
};

Now you can deploy all the event handlers functions using a single command.

$ firebase deploy –only functions:purchases

Or deploy a specific cloud function using the purchases-${event_name} naming. For example, deploy a renewal function.

$ firebase deploy –only functions:purchases-renewal

Next let’s see how to get data from the events. Call e.data to get the event payload. Then it will be helpful to use the JSON samples of delivered events. To access the event data you need to use the same naming and the object structure as in the event documents. The RevenueCat extension uses snake_case in their payloads. Below you can see the example of getting fields from renewal event payload.

export const purchases = {
 renewal: onCustomEventPublished(
   revCatEventarcOpts("renewal"),
   (e) => {
     const payload = e.data;

     const appUserId = payload.app_user_id;
     const entitlementIds = payload.entitlement_ids;
     const expirationAtMs = payload.expiration_at_ms;
     const periodType = payload.period_type;
     const isTrialConversion = payload.is_trial_conversion;
   }
 ),
};

Possible issues

During using this integration you may face some common issues. These issues may affect your testing rather than the production work, but it is necessary that you know about them.

The first issue is that RevenueCat doesn’t send the subscription updates immediately to the Firestore. Sometimes you can see a few minutes delay. This is the reason why the subscription can look like it has expired even if it was renewed, but this information hasn’t been updated in the Firestore yet.

The second issue is connected with the fact that sometimes RevenueCat sends subscription events in the wrong order. During subscription testing the trial and subscription periods are much shorter than in the production. So during testing you can receive many events within a few minutes which may cause them to be received in the wrong order.

Conclusion

Once everything has been set up, Firebase starts receiving subscriptions information from RevenueCat. This information is stored in the specified collection and it triggers the selected events.

Unlocking the power of AI for Flutter mobile applications

IHave you ever wondered how much artificial intelligence (AI) has already entered our lives? Nowadays, many popular applications that we use every day rely on AI.  Here are some notable examples:  

As you can see, many large corporations use AI and ML in their applications. 
AI may seem like something straight out of science fiction. Can startups and developers without specialized expertise harness their potential?
Of course, they can (and even should!). To make good use of AI, it is necessary to understand its essence.

Artificial Intelligence (AI) allows computers to simulate human thinking and perform tasks that humans often perform. 
Machine learning (ML) is how computers learn and improve on tasks.
Both of these technologies can be very useful for your business. They can help automate tasks, analyze data, and make informed decisions.
Choosing the right platform for developing AI-based applications is crucial. This is where Flutter emerges as the optimal choice, boasting several advantages that maximize neural network capabilities: 

Cross-platform: This framework allows you to create AI applications that run on different platforms using the same code.

Rapid development: The platform from Google offers a hot reload, allowing you to immediately see code changes and test new features.

Support for third-party libraries: developers can use popular machine learning libraries such as TensorFlow or PyTorch and integrate them into the Flutter application to install various AI features. 

High performance: Flutter uses its own Skia rendering engine, which provides high performance and responsiveness to applications.

This AI will help you open up new possibilities for your projects, whether it’s chatbots and virtual assistants or data analysis and language translation.

In this article, we focus on the popular OpenAI ChatGPT tool. This neural network can be used for both programming and integration, so it’s great for your first AI experience.

We’ll look at the key features and benefits that these technologies offer in mobile app development, using our project as an example.

How to integrate ChatGPT capabilities into Flutter app development

Let’s explore the benefits of integrating the ChatGPT API into your Flutter project:

Expanded functionality. When you integrate ChatGPT into a mobile app, it expands the capabilities of your project. You can create interactive chatbots, personal assistants, and other AI scenarios.

Improved interaction with users. AI can have natural conversations with users. It opens up opportunities for deeper and more personalized interaction

Automation of tasks. ChatGPT can handle user requests, provide recommendations, perform specific actions, and other tasks.

User behavior analysis. Developers can use the AI model to analyze and understand how users behave. It helps in providing recommendations and creating personalized content.

Faster development. By integrating ChatGPT into the Flutter application, you can save time and effort because you don’t have to create complex artificial intelligence features from scratch.

Using these ChatGPT features, you can improve the development of your application. Now let’s look at how you can integrate a neural network from OpenAI into the application itself.

You can integrate the ChatGPT API into your Flutter project using various methods to add AI capabilities to your applications.

The simplest one is to use ChatGPT as an assistant during coding. Open the  OpenAI website and get a response from the chat. This approach allows you to create template code faster and focus on more complex tasks.

One common way to integrate the ChatGPT API into a Flutter application is to use the REST API. You can send HTTP requests to the ChatGPT API to interact with artificial intelligence. In Flutter, you can use packages like http or dio to send HTTP requests and handle responses from the ChatGPT API.
Another method is to use WebSocket. It is a protocol that enables real-time, two-way communication between the client and the server. In Flutter, you can use packages like web_socket_channel to establish a connection and transmit data.
There are special Flutter packages that ease the integration and usage of the ChatGPT API. For example, the gpt_3_5_api_client package provides ready-made classes and methods to send requests to the ChatGPT API and receive responses.
Developers can create classes and methods to integrate the ChatGPT API into their Flutter app.
The choice of a specific integration method depends on the project requirements, available tools, and developer preferences.
OpenAI’s ChatGPT is easy to integrate and perfect for starting work with AI. Here are some examples of apps you can create using this neural network:

  • Chatbots. With ChatGPT and Flutter, make apps for natural conversations, useful in customer service, shopping help, and providing information.
  • Education Assistants. These apps offer personalized learning materials, assignments, explanations, and support for online and distance education.
  • Collaboration Apps. Combine Flutter and ChatGPT for apps that promote teamwork, collaborative document editing, idea sharing, and project planning.
  • Personal Shopping Assistants. Provide personalized recommendations for users based on preferences and buying history.
  • Health Apps. Use AI to create personalized health recommendations, fitness apps, medical advice, and chronic disease management.
  • Language Translation Apps. Develop translation apps with accurate and natural translations, supporting questions and answers in different languages.

TBR Group has extensive experience in cross-platform mobile app development. We are currently working on an innovative AI-integrated app and are excited to share its details to inspire your app creations.

TBR Group — a Flutter mobile app development company

TBR Group is a company that develops cross-platform mobile apps using Flutter. We specialize in creating customized, well-designed, and multifunctional mobile applications.

We have a lot of experience in different areas and have utilized Flutter’s capabilities to create creative and practical mobile apps. Here are a few examples:

Each project showcases our commitment to excellence and our ability to meet the needs of different industries.
As the field of AI continues to evolve, we have taken advantage of its potential and integrated it into our latest project. 
This app helps students learn better and faster by using AI to analyze user performance and provide personalized feedback and suggestions.
While the app is primarily designed for students, it can be useful for anyone who wants to learn. Our library offers a wide range of study materials and resources for different subjects, catering to everyone’s needs.
Here are some key features of the app:

  • Ask questions and get instant help.
  • Engage with other users to make learning interactive and effective.
  • Upload snapshots or screenshots of homework to receive personalized AI recommendations.
  • Track progress with activity indicators and goal setting.

With its built-in artificial intelligence capabilities, our app acts as a personal tutor, offering tips and advice to help students progress in their educational journey.
Why will people find this app valuable?

Personalized learning.  We combine AI and language science to adapt our lessons and help students learn at their preferred level and pace.

Find your path.  Interact with your personal AI language assistant and learn on the go. It supports four languages and is always ready to learn more.

Efficiency and effectiveness. Our courses enable students to learn faster and retain knowledge better by focusing on result-oriented tasks.

Maintain motivation. We transform language learning into a habit through gamification, engaging tasks, and reminders from the AI language bot.

Using our knowledge and technical skills, we aim to develop creative mobile apps with Flutter. By incorporating AI, we have personalized and improved the educational experience.

Outcome

Using AI and ML can take your project to reach the next level. We recommend choosing the versatile Flatter tool for these purposes. For AI integration, the best choice is OpenAI’s ChatGPT. No matter what industry you’re in, this tool will help you stand out from your competitors.
TBR Group already uses AI in our projects and is keeping up with the times.
Our team is always ready to provide technical expertise and advice on how to use the ChatGPT API for mobile app development. 
Our goal is to help startups and established businesses succeed by creating innovative and functional mobile apps powered by Flutter. We unlock the full potential of artificial intelligence and offer high-quality technical solutions

RevenueCat Flutter integration

Introduction

If your app revenue happens to be a subscription based one, then you must look at RevenueCat. RevenueCat is a service which makes implementing a subscription easy and fast. It puts the Google Play and App Store subscriptions together in one place and handles them, so it is much easier to work with them from a cross platform framework, like Flutter.

RevenueCat basics

There are 4 models in RevenueCat which you need to understand to setup your subscriptions:
1. Products
2. Entitlements
3. Offerings
4. Packages

Products

First of all you need to import your Google Play and Apple Store subscriptions into the RevenueCat dashboard. That’s what the products are for. Simply create products using subscription identifiers from the store.

Entitlements

Usually apps have different access layers depending on user subscription. For example, there may be standard, a premium subscription, etc. To divide your subscriptions into layers you need to create different entitlements intended for each subscription layer. After that you can import products to these entitlements. The entitlement consists of many products, but one product is assigned only to one entitlement.

As you can see from the scheme, you can assign many different subscriptions to one entitlement. Let’s say there are annual and monthly subscriptions assigned to gold entitlement. Knowing this, the app can provide the same level of access to users with these two different subscriptions.

Offerings

Sometimes it is required to show not just your standard list of subscriptions, but also some special list instead. This is where offerings are needed. You can create many paywalls using offerings and show them in the app depending on your business logic. The offering consists of many packages.

Packages

Finally, packages are needed to represent products in the offering. The package wraps subscriptions up from different stores into one package, so they can be represented as a single product in the offering.

Flutter integration

To add the RevenueCat library to your Flutter project you need to follow these 2 simple steps:
1. Add the latest version of purchases_flutter package dependency into the pubspec.yaml file.
2. Add In-App Purchase capability for your iOS project.

Note: setup requirements can change with the time and depend on your Flutter version. Check the latest changes in the official documentation.

Call the Purchases.configure function and pass a RevenueCat public API key to it depending on the current platform. You can find Public API keys on the apps page in the RevenueCat dashboard.

Future<void> initialize() async  {
 PurchasesConfiguration configuration;
 if (Platform.isAndroid) {
   configuration = PurchasesConfiguration(<public_google_sdk_key>);
 } else if (Platform.isIOS) {
   configuration = PurchasesConfiguration(<public_ios_sdk_key>);
 } else {
   // Configure other platforms if you have any 
 }
 await Purchases.configure(configuration);
}

Core features

When your RevenueCat dashboard is set up and the RevenueCat package is added to your project you can start receiving and buying subscriptions in the app. There are four main features which you need to implement:
1. Get available subscriptions
2. Purchase subscription
3. Get purchased subscriptions
4. Restore purchases

Get available subscriptions

First of all, users need to see subscriptions to buy them. Call Purchases.getOfferings method to receive offerings with packages from RevenueCat dashboard. It will return the current offering and all other offers from your dashboard. Call offerings.current to get a current offer or offerings.all[offeringId] to get a specific offer by its identifier.

/// Gets current offering by default or by [offeringId]
Future<List<Package>?> getOffering({String? offeringId}) async {
 try {
   // Get offerings information
   final offerings = await Purchases.getOfferings();

   // If offering with offeringId exists, return it, otherwise return 
   // default offering
   final offering = switch (offeringId) {
     null => offerings.current,
     _ => offerings.all[offeringId] ?? offerings.current,
   };

   // Return offering packages
   return offering?.availablePackages;
 } catch (e) {
   // handle RevenueCat getOfferings error
 }
}

Note: you can make the offer current in the RevenueCat dashboard. Press the “Make current” button and you will be able to get this offer with offerings.current method.

Purchase subscription

To make a purchase select one of the packages returned from the Purchases.getOfferings method and pass it to Purchases.purchaseStoreProduct method. It will show a native window with a subscription offer. If a user buys a subscription it returns updated CustomerInfo where you can find active subscriptions, active entitlements and other useful information.

If a user closes a subscription window without buying a subscription it will throw the PlatformException with PurchasesErrorCode.purchaseCancelledError error code. You can check it using the PurchasesErrorHelper.getErrorCode method. This exception appears frequently and can be the reason for many bug reports in your crashlytic, so it is better to handle this case separately.

/// Calls native purchase pop up
Future<Map<String, EntitlementInfo>> makePurchase(Package package) async {
 try {
   // Get store product from package
   final storeProduct = package.storeProduct;

   // Purchase store product
   final customerInfo = await Purchases.purchaseStoreProduct(storeProduct);

   // Get purchased environment from returned customerInfo
   final activeEntitlements = customerInfo.entitlements.active;

   return activeEntitlements;
 } catch (e) {
   if (e is PlatformException) {
     var errorCode = PurchasesErrorHelper.getErrorCode(e);
     if (errorCode == PurchasesErrorCode.purchaseCancelledError) {
       // user cancelled to buy a subscription. Can be ignored.
     }
   }

   // handle RevenueCat purchase error
   rethrow;
 }
}

Get purchased subscriptions

Now, when a user has a subscription we need to check its state from time to time. To get user purchased subscriptions call Purchases.getCustomerInfo method. It returns CustomerInfo, like in the subscription purchase, which you can use to get an active subscription. Note that RevenueCat SDK has its own cache and if you want to get the latest CustomerInfo, then call Purchases.invalidateCustomerInfoCache method before.

/// Gets customer info. If [invalidateCache] is true, then cache is 
/// invalidated and latest customer info is returned.
Future<Map<String, EntitlementInfo>> getCustomerInfo(
   {bool invalidateCache = false}) async {
 try {
   // Invalidate cache if requested
   if (invalidateCache) {
     await Purchases.invalidateCustomerInfoCache();
   }

   // Get customer info
   final customerInfo = await Purchases.getCustomerInfo();

   // Get purchased environment from returned customerInfo
   final activeEntitlements = customerInfo.entitlements.active;

   return activeEntitlements;
 } catch (e) {
   // handle RevenueCat getCustomerInfo error
   rethrow;
 }
}

Restore purchase

Don’t forget to implement the restore purchase feature. It allows users to restore subscriptions after app uninstall or on another device. Call Purchases.restorePurchases  to restore user purchases. It also returns CustomerInfo where you can get user active subscriptions.

Future<Map<String, EntitlementInfo>> restorePurchases() async {
 try {
   // Restores user purchases
   final customerInfo = await Purchases.restorePurchases();

   // Get purchased environment from returned customerInfo
   final activeEntitlements = customerInfo.entitlements.active;

   return activeEntitlements;
 } catch (e) {
   // handle RevenueCat restorePurchases error
   rethrow;
 }
}

Conclusion

RevenueCat is a good way to implement in-app purchases in Flutter app. It provides wide and complete functionality to support purchases in your cross-platform app.

Elevate your app business with TBR Group — top Flutter development company

What makes a mobile app successful? It must have a distinctive design, be user-friendly and reliable.

At TBR Group, we understand your objectives. We know that every company wants to turn its ideas into unique and popular mobile apps.
That’s why we want to introduce you to Flutter — the best framework for cross-platform mobile app development, which can be the key to your business success. It was made by Google and offers many possibilities for creating high-performance and attractive apps.

If you want to learn more about Flutter, you can read our article “The fundamentals of Flutter & Dart“. And don’t forget to check out our review of the latest Flutter version 3.7.

Now, let’s examine a few examples of apps created with Flutter. We’ll see how it can unlock the full potential of your app.

Which businesses can benefit from Flutter apps? 

According to Statista reports, 46% of software development companies choose Flutter.

Statista. Cross-platform mobile frameworks used by software developers worldwide from 2019 to 2022

With Flutter, you can create apps that look great and work well on different devices. It has many ready-made parts that you can use. Also, you can customize the look of your app with widgets.
Many top development companies use the Flutter app for their projects. Here are some examples of successful apps made with Flutter:

  • Google Ads (Google) — an app for managing ads and tracking how well they perform.
  • Tencent Now (Tencent) — a news app with fresh news, articles, and videos.
  • SpaceX Go (SpaceX) — an app that gives users access to information and interactive features about SpaceX.
  • Xianyu (Alibaba) — an online trading platform like eBay, where you can buy and sell goods.
  • Reflectly (Reflectly) — a popular app for keeping a diary and personal development.

The possibilities for cross-platform app development using Flutter are unlimited.  It’s a platform that can help you create innovative solutions in many areas.

This platform has become the preferred choice for many apps for several reasons.

First, Flutter makes apps fast and smooth. It has a special engine that creates nice animations and responsive designs, giving users a great experience.

Second, Flutter allows developers to write code once and use it for different platforms like iOS and Android. This simplifies and speeds up the process of developing and updating apps.

There’s a huge supportive community of Flutter developers who share their knowledge and help each other.

Different businesses can use Flutter. For example, in e-commerce, you can create interactive platforms with secure payment systems. In healthcare, it ensures accuracy and quick access to medical information.
Other sectors like education, entertainment, and tourism can enjoy Flutter’s features too. It enables engaging educational programs, immersive gaming apps, and innovative travel solutions.

TBR Group has a lot of experience in creating apps for various industries, and we’re excited to show you some of them.  Let’s look at the features of these applications and what sets them apart from competitors.

Vetsie

The Vetsie application allows veterinarians to communicate with clients and provide pet care services.

Key Features:

  • Video and audio calls
  • Chat with the ability to send files and voice messages
  • Ordering consultations
  • Google Maps integration
  • Charts and PDF reports
  • Notifications
  • Stripe payment integration
  • Events on Facebook

In 2021, Vetsie was selected and mentioned in Calgary’s list of 101 Best Healthcare Startups and Companies.

Neural Reader

Neural Reader is an app for converting text to speech and vice versa. Users can use it to read books and documents, as an audio player, and to transcribe dictation.

Key Features:

  • User authentication
  • File import
  • Audio reader/player
  • Audio/text conversion
  • Text transcription
  • Data storage
  • Dictation
  • Voice selection
  • Text size
  • Audio playback speed

The number of installations on Google Play exceeds 10,000+, with an average rating of 4.6; the App Store has a rating of 4.1.

SwishBOOM

SwishBOOM is an online marketplace for families to schedule appointments with nannies and caregivers. The app allows users to directly connect and negotiate with each other.

Key features:

  • User authentication.
  • App appointment
  • Chat
  • Verified network
  • Contact integration
  • Google Maps integration
  • Ratings and reviews
  • Referral reward system 
  • Reviews

The number of installations on Google Play exceeds 500+, and there is a growing trend of user registrations.  App Store ratings and reviews show a 4.7 out of 5. Some positive reviews describe the app as “the best babysitting app” that has ever made “life easier.”

Mind Switch

Mind Switch breaks down complex or challenging subjects into smaller parts. For each part, users watch a video that has an impact on their brain’s neural network. Users have the option to choose specific topics from the Mind Switch library that are bothering them.

Key features:

  • A list of meditations, challenges, and aspects; meditations divided into customized aspects
  • flexible app content management
  • cloud functions
  • app theme customization
  • integration adjustments
  • personal data encryption
  • Apple and Google email authentication
  • Firebase Crashlytics
  • Google Analytics
  • push notifications
  • a video player
  • promo codes
  • ratings and reviews
  • subscriptions
  • statistics

The app is now accessible on both Google Play and Apple stores, allowing users to effectively lower their stress levels and unwind. It has already amassed over 900 installations, and users have given it an impressive rating of 4.4 stars based on 56 reviews on Google Play.
TBR Group is working on adding new functionality to the app.

pingNpay

PingNpay is creating a worldwide payment network specifically for small transactions, particularly those under £10/$10/€10. This network will enable retailers and e-commerce providers to offer new services that would otherwise be unaffordable using conventional payment systems like card networks.

Key features:

  • Amplify Cognito authentication;
  • Amplify AppSync GraphQL communication;
  • rounded branded QR codes;
  • a QR scanner;
  • app deep-linking;
  • push notification integration and handling;
  • encryption and decryption;
  • Native Share for QR codes and links;
  • a QR code on-device saving option.

Thanks to our fruitful collab with the client, we have achieved remarkable success in developing an application that is not only fast and efficient but also visually appealing. Our app is fully functional and can be accessed on both mobile and web platforms.

TBR Group — your trusted partner for Flutter solutions

TBR Group is a custom software development company. Our company offers a wide range of services:

  • Mobile application development
  • Web-development
  • Product design
  • Full support and project management

We have more than five years of experience on the market and completed more than 30 projects. We are proud of our achievements and customer satisfaction worldwide.

At TBR Group, we understand that choosing the right development partner is critical to the success of your business. 

That’s why we strive not only to achieve exceptional results, but also to provide a seamless collaborative experience. We will take a close look at your unique goals, target audience, and business requirements. 

Quality is our top priority when it comes to creating applications. We are willing to sacrifice development speed to ensure a high-quality development process. We are passionate about what we do, and we explore new technology all the time and features to make your app stand out.

A dedicated TBR Group team can work as an extension of your IT department, providing full control over the processes. Our time & material solution is highly suitable for research and development (R&D) as well as long-term projects with dynamic requirements. It is particularly beneficial when the project scope is not yet fully known and allows for flexibility and adaptability to changes in the market. 

For projects with a known scope, we provide the necessary tools and resources to ensure success. With our well-planned milestones, you can effectively track the progress of your project and ensure timely completion. Additionally, we offer a fixed pricing model for projects with a defined scope, providing transparency and predictability in terms of costs. In any case, we guarantee a quick response to market changes and full accountability for project delivery.

Don’t miss the opportunity to partner with TBR Group, the leading development company on Flutter. 

We guarantee you high quality, reliability, and expertise in every project we undertake.

Outcome

TBR Group is a Ukrainian company that develops software in Flutter. We create user-friendly and innovative web and mobile applications. With us, you can unlock the potential of your business through cross-platform development. 

Good Flutter layered architecture: TBR Group expertise

In this post, you’ll learn more about Layering the Flutter Application Architecture.

Structuring code is crucial for building large-scale applications that are maintainable and extendable. Poorly structured code can make it difficult to add new features or make changes to existing functionality, leading to bugs and technical debt that can accumulate over time.

What is app architecture?

The architecture of an application determines how its components interact with each other, how data is stored and retrieved, and how the application responds to user input. A well-structured architecture should be modular, with clear separation of concerns between different parts of the codebase. This allows developers to work on different parts of the codebase independently, without fear of breaking other parts of the application. 

There are several popular architectural patterns that can be used to structure code, such as Model-View-Controller (MVC), Model-View-ViewModel (MVVM), and Clean Architecture. Each pattern has its own strengths and weaknesses, and the choice of pattern will depend on the specific needs of the application.

 Some common components of an application architecture include:

  • User interface (UI). The interface that users interact with to use the application.
  • Data storage. The technology used to store data, such as a database or file system.
  • Backend. The server-side components that handle business logic and data processing.
  • Networking. The protocols and technologies used to communicate between the frontend and backend of the application.
  • Security. The mechanisms used to protect the application from unauthorized access and attacks.

A few words about layers

Layers refer to different levels of abstraction or responsibility in a system. Each layer has a specific function and interacts with the layers above and below it to provide a cohesive and functional system.

The layers typically include:

  • Presentation Layer: This layer is responsible for presenting the data to the user in a way that is easy to understand and interact with. It includes user interface components such as screens, forms, and dialogs.
  • Business Layer: This layer contains the application logic and business rules that process and manipulate data. It handles data validation, workflows, and business logic rules that govern how data is processed.
  • Data Access Layer: This layer is responsible for accessing data from a database or other data storage mechanism. It includes data access components such as data mappers, repositories, and data contexts.
  • Infrastructure Layer: This layer contains the technical infrastructure components that support the application. It includes components such as logging, configuration, and security.

By separating an application into layers, each layer can be developed and tested independently, making the application more maintainable and scalable. It also allows for more flexibility in the development process, as changes can be made to one layer without affecting the others.

The layered architecture pattern is just one example of how layers can be used in software development. Other examples include the OSI model for networking and the protocol stack used in communications.

The Single Responsibility Principle

The Single Responsibility Principle (SRP) is a software development principle when each class or module should have only one responsibility or job to perform.

The SRP is one of the SOLID principles;it helps to ensure that code is easy to understand, modify, and test.

When a class or module has only one responsibility, it is easier to understand its purpose and to modify it without affecting other parts of the codebase. This also helps to reduce the likelihood of introducing bugs or errors when making changes.

For example, a class that handles user authentication should not also be responsible for managing user profiles. Instead, these responsibilities should be separated into two separate classes, each with its own responsibility. 
Here are some examples of responsibilities that software components may have:

  • User interface (UI) components are responsible for displaying information to the user and capturing user input.
  • Business logic components are responsible for implementing the business rules and processes that govern the behavior of an application.
  • Data access components are responsible for accessing and manipulating data in a database or other data storage mechanism.
  • Networking components are responsible for managing communication between different parts of an application or between different applications.
  • Security components are responsible for ensuring that an application is secure and protected from unauthorized access or attacks.

Architectural patterns

Some common architectural choices include:

  • Monolithic architecture involves building a single, self-contained application that handles all aspects of the system’s functionality. This can be easier to develop and deploy, but may become unwieldy as the system grows larger and more complex.
  • Microservices architecture implies breaking the system down into small, independent services that communicate with each other over a network. This can make the system more scalable and easier to maintain, but may introduce additional complexity in terms of service discovery, communication protocols, and deployment.
  • Event-driven architecture is about building the system around a set of events or triggers, such as user input or external messages. This can make the system more responsive and adaptable to changing conditions, but may require additional overhead in terms of event management and processing.
  • Service-oriented architecture (SOA) is for building the system around a set of loosely-coupled, reusable services that can be easily combined and composed to create more complex functionality. This can make the system more flexible and adaptable, but may require additional effort in terms of service design and coordination.

When making architectural choices, consider a variety of factors, including the requirements of the system, the available technology stack, the skills and experience of the development team, and the expected future growth and evolution of the system. 

Define your layers

You can create different layers in your application to perform the three main duties. Layers need to be defined carefully so that they guarantee convenient operation and without compromising work.

Good architecture: what is it?

At TBR Group, we follow an architecture pattern that has four layers.

  1. Data Layer. This layer is responsible for interacting with the API.
  2. Domain Layer. This is the one responsible for transforming the data coming from the data layer.
  3. Business logic layer manages the state (usually using flutter_bloc).
  4. Finally, the presentation layer. It renders UI components based on the state.

Each layer contains multiple neurons, or nodes, which perform mathematical operations on the input data and pass the output to the next layer. The first layer, the input layer, receives the raw input data and passes it to the first hidden layer. The output layer produces the final output of the network, which could be a prediction or classification based on the input.

The layer responsible for domain-specific data modeling is known as the domain layer, which transforms unprocessed data into models specific to the domain that are then used by the business logic layer. The business logic layer maintains an unalterable state of the domain models supplied by the repository. Furthermore, this layer responds to user inputs from the UI and interacts with the repository when modifications are required based on the current state.

Say NO to mixed responsibilities

Very often, mixed responsibilities cause chaos in various projects. Without a clear division of duties and priorities, it is very easy to get confused and make a lot of mistakes that are then difficult to find and correct. 

import 'package:firebase_auth/firebase_auth.dart';

class StartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.userChanges(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return const ProfilePage();
        }

        return const SignInPage();
      },
    );
  }
}

Be consistent (always)

When working according to a specific template for projects, we advise you not to use labels with layers. Each layer should have a chain of relationships that will prevent interaction between layers that are not directly related. For example, the presentation layer should not call or interact in any way directly with the data-tier APIs.
Establish a consistent naming convention and adhere to it throughout the development process.  In the case of a project with a data layer that is a dependency of the domain layer, it would be beneficial to name the data layer accordingly, such as “data” or “repository”.  

├── lib
| ├── posts
│ │ ├── bloc
│ │ │ └── post_bloc.dart
| | | └── post_event.dart
| | | └── post_state.dart
| | └── models
| | | └── models.dart
| | | └── post.dart
│ │ └── view
│ │ | ├── posts_page.dart
│ │ | └── posts_list.dart
| | | └── view.dart
| | └── widgets
| | | └── bottom_loader.dart
| | | └── post_list_item.dart
| | | └── widgets.dart
│ │ ├── posts.dart
│ ├── app.dart
│ ├── simple_bloc_observer.dart
│ └── main.dart
├── pubspec.lock
├── pubspec.yaml

Reusability in mind

The abstract declaration and concrete implementation approach used in the flutter_todos example from the bloc library is a good way to implement this type of solution. The abstract declaration provides a blueprint for the functionality needed, while the concrete implementation provides the specific details for how it is implemented. This allows for flexibility in adapting the functionality to different use cases while maintaining a consistent API interface.

Balance abstraction

Choosing between creating a repository with a direct dependency or creating an API wrapper for an external package will depend on various factors, including the complexity of the external package’s API, the number of dependencies it requires, and how well it meets the specific needs of the project.

If the external package has a clean and simple API that meets the needs of the project without requiring too many dependencies or configuration, then creating a repository with the package as a direct dependency may be the best approach. This can simplify the codebase and make it easier to maintain, as well as potentially provide better performance.

The chat_location  application provides a good example of how to use this package with a repository, demonstrating how the package can be integrated into the app’s architecture while keeping the repository code clean and maintainable.

In cases where an external package’s API is more complex, creating an API package with a class that wraps that dependency can be a better approach. This can provide a more streamlined interface for the specific needs of the project and abstract away some of the implementation details.

The spacex_demo application is a good example of how to create a custom API package, providing a wrapper for the SpaceX API. This approach allows for a more tailored interface for the project’s specific needs, while also providing flexibility and isolation from any potential issues with the external API.

Don’t over-engineer

Over-abstracting can increase complexity and development time without providing any real benefit.

If the project primarily uses JSON as its data format, then abstracting the base properties of the model to accommodate other formats may not be necessary. In this case, it may be more efficient to simply create the serialization/deserialization functionality for JSON and avoid over-abstracting the model.

However, if there is a possibility of the data format changing in the future, or if there are other reasons for needing a more abstracted model, then it may be worthwhile to invest the time and effort into creating a more flexible model architecture.

Packages: yes or no?

The decision to use packages should be based on the specific needs and constraints of the project. For a small project with a small team, the added complexity of using packages may not be worth the benefits. In this case, it may be more efficient to handle migrations and updates manually.

However, as the project grows and the team expands, the benefits of using packages become more apparent. Component isolation becomes more important as the project becomes more complex, and having different team members working on different parts of the project simultaneously becomes more common.

You can have one teammate migrating the accounting repository to Very Good Analysis 2.4.0 and another migrating the retail API to dio 4.0.0 at the same time, so you can tackle fixing lints and null safety refactors without stepping on each other’s toes.

Choose right tools

When choosing packages or tools, it’s important to have a set of criteria to evaluate them against:

  • Activity on the GitHub repository: a package that is actively being developed and maintained is more likely to be reliable and up-to-date.
  • pub.dev  metrics: pub.dev provides useful information such as the number of downloads, the number of dependent packages, and the percentage of code coverage. This information can help you evaluate a package’s popularity and usefulness.
  • Test coverage: packages with high test coverage are more likely to be reliable and less prone to bugs.
  • Who’s maintaining it: knowing who is responsible for maintaining a package can give you an idea of its reliability and longevity.
  • Other factors that are important to you and your team: this could include factors such as documentation, community support, or compatibility with other tools or packages you’re already using.

Follow best practices

Studying other developers’ repositories is an excellent way to learn and improve. Many open-source projects have an active community of contributors who can help you with any questions or issues you may encounter. 

Refactor

Refactoring is a natural part of the development process, and it’s important to recognize when something needs to be improved and not be afraid to make changes. Additionally, it’s important to maintain a positive attitude towards mistakes and failures, as they provide valuable learning experiences that can lead to growth and improvement. As the saying goes, “fail fast, fail often, fail forward.”

Welcome to our team!

If you are reading this article, then you are interested in the topic of structuring code. If you are ambitious, not afraid of difficulties, you have a lot of ideas, but a little lack of confidence and experience in your business – come to our team! 

Top meditation app features on the example of Mind Switch

The outbreak of the COVID-19 pandemic has added significant pressure to people’s lives for various reasons.

The pandemic has triggered feelings of fear, grief, and loneliness, as people have faced illness, loss of loved ones, and reduced social connections. As a result, startups and established companies got interested in developing meditation apps using the Flutter framework.

The growing demand, Flutter’s cross-platform capabilities, user-friendly interfaces, customization options, market potential, and technological advancements make it an attractive choice for companies aiming to enter or expand their presence in the meditation app market.

Best Meditation Apps of 2023

A meditation app is a mobile application designed to assist individuals in practicing meditation. These apps typically provide a variety of guided meditations, timers, and other features to support meditation practice. They are convenient tools that can be used anywhere and at any time, allowing users to integrate meditation into their daily routines.

Meditation apps often offer a range of meditation styles, such as mindfulness, breathing exercises, visualization, and body scans. They may also provide additional features like sleep aids, relaxation music, and programs tailored to specific needs, such as stress reduction or improving focus. Many meditation apps include progress tracking, reminders, and community features to help users stay motivated and engaged in their practice.

Brief stats of the meditation app market can help to understand more about clients and to develop a meditation app.

Source: FinancesOnline. 50 Essential Meditation Statistics for 2023: Benefits, Technology & Practice Data

Overall, meditation apps serve as accessible resources, some of them are free meditation apps, for individuals seeking guidance and support in establishing and maintaining a regular meditation practice, including apps for anxiety too. 

Source: FinancesOnline. 50 Essential Meditation Statistics for 2023: Benefits, Technology & Practice Data

Source: FinancesOnline. 50 Essential Meditation Statistics for 2023: Benefits, Technology & Practice Data

Top meditation app iOS and Android 

Headspace offers guided meditations for beginners and experienced practitioners. Includes various themed sessions for stress reduction, sleep improvement, and focus enhancement.

Calm provides guided meditations, sleep stories, breathing exercises, and relaxing music. Offers programs tailored to specific goals, such as managing anxiety or improving self-esteem.

Insight Timer offers a vast library of guided meditations from various teachers and traditions. Includes a timer for silent meditation practice and a community feature for connecting with fellow meditators.

Ten Percent Happier guided meditations designed for skeptics and busy individuals. Offers courses on mindfulness and personal growth, along with interviews and talks by experts in the field.

Simple Habit offers short, five-minute guided meditations for busy people. Provides sessions for specific situations like commuting, work breaks, or before sleep.

Smiling Mind designed for both adults and children, this app offers guided meditations and mindfulness exercises. Includes programs tailored to different age groups and life stages.

Buddhify provides guided meditations for different activities and moods, such as traveling, working, or difficulty sleeping. Offers a unique wheel interface for easy navigation.

Meditation apps are convenient and accessible tools that can assist individuals in developing and maintaining a regular meditation practice. They provide a wide range of guided meditations, timers, and other features to support various meditation techniques. With features of meditation app such as progress tracking, reminders, and community support, these apps can help individuals stay motivated and engaged in their meditation journey. Moreover, there are free anxiety apps for ios and free anxiety apps for Android.

Source: FinancesOnline. 50 Essential Meditation Statistics for 2023: Benefits, Technology & Practice Data

Top features of meditation apps for users

The tech aspect plays a crucial role in both the popularity and monetization of meditation apps like Headspace and Calm. Here’s how:

Accessibility and Convenience. The tech aspect allows meditation apps to be easily accessible and convenient for users. Mobile apps enable users to access guided meditations, mindfulness exercises, and other features anytime, anywhere, directly from their smartphones. 

Variety and customization. Meditation apps often have a wide range of meditation styles, durations, and themes, allowing users to customize their practice based on their preferences and needs. 

Motivation and accountability. Many apps offer progress tracking, reminders, and rewards, which help users stay motivated and committed to their meditation practice. 

Free meditation apps. Many meditation apps offer free access to basic features and a limited selection of guided meditations. This allows users to explore and experience meditation without financial commitment. 

Payments. Some apps offer subscription models or premium features that require a paid subscription. These subscriptions provide access to a broader range of guided meditations, specialized programs, and additional features. 

User Experience. The tech aspect ensures a seamless user experience through intuitive designs, simple navigation, and responsive performance. Apps that prioritize user experience are more likely to attract and retain users.

Guided Meditations and Features. Tech enables the delivery of guided meditations, sleep aids, breathing exercises, and other mindfulness features in an interactive and engaging manner. The use of audio, visuals, animations, and progress tracking enhances user engagement and increases the appeal of these apps.

Personalization and Customization. Users can customize meditation durations, themes, and background sounds to create a personalized experience. This level of customization enhances user satisfaction and promotes app popularity.

Subscription Models. Many meditation apps, including Headspace and Calm, offer subscription-based models for monetization. The tech aspect facilitates seamless subscription sign-ups, payment processing, and management of subscription plans.

Data Analytics. The tech aspect allows meditation apps to collect and analyze user data, including user behavior, usage patterns, and preferences. This data helps app developers understand user needs better, improve app features, and optimize monetization strategies.

Social Features and Community Building. Features like sharing progress, joining challenges, or connecting with like-minded individuals enhance user engagement, app popularity, and potentially open avenues for community-based monetization strategies.

So, the tech aspect plays a pivotal role in the popularity and monetization of meditation apps. It enables accessibility, enhances user experience, facilitates personalization, supports subscription models, enables additional revenue streams, provides data analytics, and fosters community building. These factors collectively contribute to the success and profitability of meditation apps like Headspace and Calm.

TBR Group — a Flutter mobile app development company

A completely new application has appeared on the market. It is called Mind Switch. Mind Switch is an app that helps reduce daily stress and treat phobias.

It divides stressful topics into aspects. For each aspect, users watch a special video that affects their brain neural network. 

Mind Switch divides stressful topics into aspects. For each aspect, users watch a special video that affects their brain neural network. Users can select specific bothersome topics from the Mind Switch library.

Mind Switch mobile app: “Topics”, “Thoughts about food” and “Library” pages. 

The challenge and solution

When developing Mind Switch, we faced several challenges. The main goal of the project was to create a system for flexible content management. 

So that app users can visualize all the entire content in the app,   we’ve used a special element called “block” in the backend. 

On the backend side, the client can set up elements to be shown on the specific screen, along with the order they should follow to emerge.

The main challenge of the project was to empower a user to customize the content of the application through the backend.  We applied Firestore to implement such a possibility. 

Hence, the client is not only able to add, remove and change almost all the content on the backend but also to make these changes in real time.

Practically, all the data received from the backend is stored offline. 

We opted for SQLite to develop embedded software. Therefore, any time a user logs in or registers in the application, we obtain all the necessary information from Firestore and load it into the local database. 

The mechanism applied in the app allows updating the data so that the user could operate with relevant data anytime.

Besides, we have developed several versions of the app to run it from the single code base. We use flavors to control the versions. 

Each app version has a particular flavor. As an example, using these flavors, the TBR Group engineers can control which backend should be used.

Key features 

The app users can benefit from several key features available in the app. Such as:

  • Apple and Google email authentication
  • deep links
  • offer codes
  • promo codes
  • Firebase Crashlytics
  • Google Analytics
  • push notifications
  • ratings and reviews
  • subscriptions
  • a video player
  • integration adjustments
  • personal data encryption
  • app theme customization
  • flexible app content management
  • a list of meditations, challenges, and aspects; meditations divided into customized aspects
  • a user profile
  • statistics
  • flavors
  • cloud functions.

Read more about MindSwitch case on our website.

Technologies

We opted for Flutter and Dart in the project realization.  

The single code base of Mind Switch is platform-independent and therefore can be deployed on mobile devices running both Android and iOS operating systems. 

Plus, we have implemented Firebase as a back-end storage and Firebase cloud functions to run our back-end logic. 

The following technologies have just been executed in the project:

  • Firestore
  • Firebase Storage
  • Firebase Crashlytics
  • Firebase Analytics
  • Firebase Cloud Functions
  • Firebase Dynamic Links
  • Google & Apple Sign In
  • Adjust
  • Adjust Deep Links
  • Subscriptions with Revenue Cat
  • Riverpod
  • SQLite
  • Cryptography

The app is available from the Google Play and Apple stores for users seeking to reduce their stress levels and relax. 

Over 900+ installs have been currently recorded in the Google Play and Apple stores, with a 4.4-star rating out of 56 reviews currently on the Google Play platform.  

TBR Group is working on adding new functionality to the app. 

Outcome

Meditation apps like Mind Switch have achieved profitability and success by incorporating key functionalities that enhance user experience and engagement. 

A user-friendly interface, diverse content, customization options, offline access, mindfulness tools, and community features all contribute to the app’s popularity. 

By understanding and implementing these functionalities effectively, meditation apps can thrive in the competitive market while promoting mindfulness and well-being among their users.

Unlock the secrets of building a Flutter responsive layout with TBR Group’s expertise

When developing a mobile application, ensuring the layout looks good on all screen sizes is important. In Flutter, there are several ways to implement a responsive layout. In this article, we will go through five different methods, starting with the simplest but with the lowest responsiveness and ending with the most complex one but with the highest responsiveness. By the end of this article, you will better understand how to create a responsive layout in Flutter.

Method 1: Strict layout with fixed sizes of widgets and SizedBoxes as paddings

This is the simplest method to implement a responsive layout in Flutter. This method uses fixed sizes for widgets and SizedBoxes as paddings. The layout looks good only for screens with the same dimensions as the design screen. However, if the actual screen size differs from the design screen size, the layout may not look better.

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Responsive Screen'),
     ),
     body: Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: const [
           SizedBox(height: 20),
           HeaderText(),
           SizedBox(height: 24),
           ProfileAvatar(),
           SizedBox(height: 16),
           NameText(),
           RoleText(),
           SizedBox(height: 16),
           AddressText(),
           SizedBox(height: 72),
           DescriptionText(),
           SizedBox(height: 24),
           ContactButton(),
           SizedBox(height: 24),
         ],
       ),
     ),
   );
 }

400×715 looks good

375×667 – bottom overflow

428×962 – bottom empty space

Method 2: Using MediaQuery to scale paddings and font sizes based on screen size

This method is more responsive than the first one. In this method, we use MediaQuery to scale paddings and font sizes based on the screen size. The layout looks good if the actual screen size is close to the design screen size. However, on small screens, the text may be hard to read on small screens due to the small font size, and on big screens, we still have empty bottom space because of different aspect ratios.

@override
 Widget build(BuildContext context) {
   const designHeight = 715.0;
   const designWidth = 400.0;
   final screenHeight = MediaQuery.of(context).size.height - MediaQuery.of(context).padding.vertical;
   final screenWidth = MediaQuery.of(context).size.width - MediaQuery.of(context).padding.horizontal;

   final scaleHeightFactor = screenHeight / designHeight;
   final scaleWidthFactor = screenWidth / designWidth;
   final scaleFontFactor = scaleWidthFactor;

   return MediaQuery(
     data: MediaQuery.of(context).copyWith(
       textScaleFactor: scaleFontFactor,
     ),
     child: Scaffold(
       appBar: PreferredSize(
         preferredSize: Size.fromHeight(kToolbarHeight * scaleHeightFactor),
         child: AppBar(
           title: const Text('Responsive Screen'),
         ),
       ),
       body: Padding(
         padding: EdgeInsets.symmetric(horizontal: 16 * scaleWidthFactor),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             SizedBox(height: 20 * scaleHeightFactor),
             const HeaderText(),
             SizedBox(height: 24 * scaleHeightFactor),
             ProfileAvatar(radius: 32 * scaleWidthFactor),
             SizedBox(height: 16 * scaleHeightFactor),
             const NameText(),
             const RoleText(),
             SizedBox(height: 16 * scaleHeightFactor),
             const AddressText(),
             SizedBox(height: 72 * scaleHeightFactor),
             DescriptionText(
               padding: EdgeInsets.symmetric(
                 horizontal: 12 * scaleWidthFactor,
                 vertical: 12 * scaleHeightFactor,
               ),
             ),
             SizedBox(height: 24 * scaleHeightFactor),
             ContactButton(height: 50 * scaleHeightFactor),
             SizedBox(height: 24 * scaleHeightFactor),
           ],
         ),
       ),
     ),
   );
 }

400×715 looks good

375×667 – text is hard to read since the screen size is small

428×962 – bottom empty space

Method 3: Using Spacer widget to make flexible paddings

In this method, we use the Spacer widget to make flexible paddings. Layout looks good on almost all screens, but on tiny screens, the height of all widgets may be bigger than the screen height, and the bottom widgets may not be visible.

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Responsive Screen'),
     ),
     body: Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: const [
           SizedBox(height: 20),
           HeaderText(),
           SizedBox(height: 24),
           ProfileAvatar(),
           SizedBox(height: 16),
           NameText(),
           RoleText(),
           SizedBox(height: 16),
           AddressText(),
           SizedBox(height: 72),
           DescriptionText(),
           SizedBox(height: 24),
           ContactButton(),
           SizedBox(height: 24),
         ],
       ),
     ),
   );
 }

428×926 looks good

357×667 looks good

It appears to work well on both small and large screens; however, when implementing a responsive layout, it’s important to consider that users may increase the text scale in accessibility settings, which can cause each text widget to enlarge. Let’s do this to see what it looks like:

375×667 with text scale 1.5 – bottom overflow

Method 4: Using ListView to make a scrollable layout

In this method, we use a ListView to make the layout scrollable. We also replace Spacer with SizedBox to return fixed paddings since Spacer doesn’t work inside ListView. This method looks good on small screens, but on big screens, there is a lot of empty space at the bottom of the screen.

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Responsive Screen'),
     ),
     body: Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,        
         children: const [
           SizedBox(height: 20),
           HeaderText(),
           SizedBox(height: 24),
           ProfileAvatar(),
           SizedBox(height: 16),
           NameText(),
           RoleText(),
           SizedBox(height: 16),
           AddressText(),
           SizedBox(height: 72),
           DescriptionText(),
           SizedBox(height: 24),
           ContactButton(),
           SizedBox(height: 24),
         ],
       ),
     ),
   );
 }

357×667 with text scale 1.5 looks good

428×962 – bottom empty space

Method 5: Using CustomScrollView and Slivers

In this method, we use a CustomScrollView and Slivers to create a layout that is scrollable on small screens but has flexible space at the bottom on big screens. This method can be more complex but looks good on any screen size. The key to this approach is determining which parts of the layout should have a flexible or fixed size.

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Responsive Screen'),
     ),
     body: CustomScrollView(
       slivers: [
       SliverPadding(
         padding: const EdgeInsets.symmetric(horizontal: 16),
         sliver: SliverList(
             delegate: SliverChildListDelegate(
               const [
                 SizedBox(height: 20),
                 HeaderText(),
                 SizedBox(height: 24),
                 ProfileAvatar(),
                 SizedBox(height: 16),
                 NameText(),
                 RoleText(),
                 SizedBox(height: 16),
                 AddressText(),
               ],
             ),
           ),
         ),
         SliverFillRemaining(
           hasScrollBody: false,
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 16),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               mainAxisAlignment: MainAxisAlignment.end,
               children: const [
                 SizedBox(height: 72),
                 DescriptionText(),
                 SizedBox(height: 24),
                 ContactButton(),
                 SizedBox(height: 24),
               ],
             ),
           ),
         ),
       ],
     ),
   );
 }

357×667 with text scale 1.5 gets scrollable and looks good

428×926 looks good with flexible space in the middle

In this article, we have gone through five different methods of implementing responsive layout in Flutter. We started with the simplest method, which uses fixed sizes of widgets and SizedBoxes as paddings, and ended with the most complex method, which uses CustomScrollView and Slivers.

In conclusion, creating a responsive layout in Flutter is essential for providing a seamless user experience across various devices with different screen sizes. We have explored five different methods to achieve responsive layouts, each with its pros and cons. Choosing the right method depends on your specific application requirements and desired level of responsiveness.

To ensure a successful implementation, keep in mind the following tips:

  • Prioritize accessibility and test with different settings.
  • Test on multiple screen sizes. Some packages like device_preview can help to quickly change the screen size.
  • Use MediaQuery and textScaleFactor for scaling dimensions.
  • Implement flexible widgets like Spacer, Expanded, and Flexible.
  • Create scrollable layouts with ListView or CustomScrollView when necessary.
  • Avoid fixed-size containers for text content.

By following these guidelines and carefully evaluating the methods discussed in this article, you can create a responsive layout in Flutter that caters to a diverse range of users and devices. 
To check the source code for each method and test on various screens, please follow this repository.

Why Google invests in Flutter, and what it means for app owners?

With Flutter, feasible and intuitive cross-platform solutions is no longer a miracle. 

After the launch of Flutter’s second version in 2021, over 400,000 Flutter apps were delivered to consumers and installed on hundreds of millions of devices, ensuring a seamless user experience. Currently, there are more than 700,000 published apps in the Apple Store and Google Play platforms.

So, what makes Flutter stand out, and why does Google bet on it?

Why Google invests in Flutter

The Flutter toolkit

Flutter is an open-source tool kit designed for crafting fast, beautiful, and natively felt cross-platform portable applications targeting mobile, web, and desktop solutions and sharing a single code base. 

There have been a few releases of Flutter:

Announcing Flutter 2 – portable devices

Flutter advantages

Flutter is fast with hardware-accelerated graphics and pixel-level control over the UI, with intuitive and live coding. 

Flutter benefits:

Flutter is used by Google for a wide array of software program merchandise, and these Flutter advantages just as well make Flutter the best fit for startup businesses.

What is more, FlutterFlow makes it possible to generate clean code and deploy it to online stores or the web in one click

Plus, due to the aforementioned benefits of Flutter apps, it is extremely easy to build the MVP version of the product and have it shipped to the online audience.

Check the blog article What’s New in Flutter 2 to get acquainted with the technical peculiarities of this release.

It may be helpful to visit the What’s new official resource — a part of the Stay up to date section — for the Flutter and Dart update release updates.

Flutter roadmap

Flutter’s Flutter developer roadmap is to transform the world of software engineering. It will focus on:

  • performance
  • quality
  • security
  • features
  • research
  • updates
  • records and patterns enhancements
  • breakthrough graphics performance
  • smooth integration for web and mobile
  • being early to new and emerging architectures
  • ongoing focus on developer experience

What’s next for Flutter — Roadmap diagram 

The vision for Flutter described in more detail in Flutter Forward video review is going to shed greater light on the Flutter roadmap.

Releasing updates and improvements on a more or less trimestrial basis, the Flutter community and developers want to make certain each and every asked-for feature is being approached.

Google’s plans associated with Flutter

All these Flutter advantages make Flutter come out as a unique, outstanding solution. 

“Here at Google, we’re depending on Flutter, and over a thousand engineers at Google are building apps with Dart and Flutter.”— stated in “Announcing Flutter 2” published on Google Developers blog resource.

Likewise, the major key role of Flutter is proved in What’s next for Flutter: “At Google, too, we’re finding Flutter a valuable tool, enabling teams like Google Classroom to deliver high-quality solutions to mobile and web users…With Flutter, we reduced the code size by 66% for the same functionality… this means less bugs for each platform and less tech debt in the future.” – Kenechi Ufondu, Software Engineer, Google Classroom.

What’s next for Flutter — New directions for Flutter and Dart diagram

One more quotation should be mentioned from What’s next for Flutter official blog post article: “Our fourth and final area of investment for the future is a continued focus on developer experience, across both Flutter and Dart.”

The goal set in front of Flutter is to be a game changer and to fundamentally alter the way the developers build apps. Now not only the platform itself should be in focus, but rather the experience a software engineer wants to create.

Popular apps like WeChat, Grab, Yandex Go, Nubank, Sonos, Fastic, Betterment, and realtor.com are using Flutter. 

Dart

Dart — the programming language Flutter is based on – is a multi-paradigm language, with C-style syntax, which makes it similar to C++, C#, Java, JavaScript, and Ruby. 

Dart is:

  • free
  • open source
  • multi-platform 
  • optimized for UI
  • easy to learn and use, with a familiar syntax

Dart enables software architects to:

  • code efficiently
  • get the advantage of the Hot Reload feature grounded on the just-in-time — JIT — compilation
  • make certain the smooth and seamless app performance is obtained due to AOT — that is ahead-of-time compilation — the compilation of the Dart code into the binary native code directly on the user’s device
  • compile to ARM and x64 machine code for mobile, desktop, and backend/server, or compile to JavaScript for the web
  • craft high-fidelity platform-independent software apps 

Released on October 10, 2011, Dart has passed a few version updates.

Announcing Dart 2.12 – the unique combination of capabilities for building apps

More peculiarities of Flutter and Dart in our Blog articles: 

With this being said, the dilemma of either having to develop multiple apps for multiple operating systems or opting to trade velocity for portability exists any longer.

With Flutter and Dart, your ideas and your creativity come to the forefront.

Fuchsia

What do we know about Fuchsia?

Fuchsia was first found in August 2016 on GitHub by media outlets and got reported as a mysterious source code. 

Developed by Google, Fuchsia is open-source software. It is capability-based with a kernel named Zircon. 

Why is Fuchsia so Important to Google? 

  • Fuchsia is expected to ensure Google’s greater control level over its hardware and software platforms
  • The code comprises its ability to be operated on various devices, such as traffic lights, digital watches, smart mobile phones, and tablets, as well as on desktop personal computers
  • One of the aims is to encourage both the Android and Chrome OS communities to contribute to the platform.

Synopsis

So, here we go, summarizing the facts. 

First is Dart — the programming language designed for crafting platform-independent, fast, and beautiful software applications.

Then, goes the Flutter SDK — the environment where the developer is empowered to deploy Dart and other programming tools for shipping these apps, which are unique and magnificent in design, intuitive, and lovely in use.

And, finally, is Fuchsia — a new platform-independent operating system with the possibility of being run on desktops, tablets, cars, traffic lights, as well as on a variety of other electronic devices of similar kind.

All of these statements are the reasons why Google invests in Flutter. The flexibility of code produced and the programming options themselves expand the sphere of use and therefore the degree of overall influence and significant weight in the technical field.

TBR Group — Flutter mobile app development company

TBR Group is a software engineering company located in Ukraine. Our main priority is to deliver multi-platform mobile apps built with Flutter and Dart.

Use cases

Our Cases page displays the benefits of Flutter apps and the selected case studies of the shipped applications in a variety of domains. For instance: 

  • baby care
  • babysitting
  • Text-To-Speech / Speech-To-Text and productivity
  • online medicine
  • veterinary
  • music
  • digital payment

Swishboom

The Swishboom application is an online platform for families to demand babysitting services from caregivers.

Swishboom mobile app: “Address Search”, “Find a Sister” and “Calendar” pages.

Swishboom makes sure that families striving for babysitting services can find eligible care providers.

Babymates

Babymates mobile app: “Start” and “Chat” pages.

Babymates app has been developed for dads and oriented on how to be fathers in the most fascinating way. 

A dad joke generator feature ensures a new joke to keep the mood high and bright!

Neural Reader

Neural Reader Most Natural TTS — is the Text-To-Speech audio reader, and the Speech-To-Text transcribe tool.

Neural Reader: “My Library”, “Dictation” and “Converting text” pages.

VinciLabs

VinciLabs is an online medicine mobile app built with Flutter.

VinciLabs mobile app: “Blood Pressure”, “Measure” and “Take a picture” pages.

VinciLabs was designed to transfer information obtained from the patient’s devices to healthcare practitioners.

Vetsie for Vets

Vetsie for Vets is a pet care multi-platform mobile app providing online veterinary services to pet owners and vet specialists.

Vetsie mobile app: “Text / Audio message”, “Audio call” and “Book a Consultation” pages.

Being fundamental to ensure a smooth workflow for each and every user, the user feels comfortable running the interface alongside the variety of functionalities.

Wywroty Śpiewnik

Wywroty Śpiewnik is a musical app that contains around 25,000 guitar and ukulele arrangements of Polish and songs popular all over the world.

Wywroty Śpiewnik mobile app:  “Start”, “Lyrics and notes of the song” and “Popular” pages.

pingNpay

The mobile app pingNpay — the digital way to pay — is a financial processing program focused on micropayment transactions. The sum of payment should not exceed £20.

pingNpay mobile app: “Pay”, “Receive” and “Create a Dynamic QR Code pages.

Summary

This being said, TBR Group has already gained experience in crafting cross-platform mobile apps. 

You are invited to study our expertise and feedback received on our About page. 

You are most welcome to reach out to TBR Group by filling out the Contact Us form. 
We are always happy to help!

Is Flutter going to be right for your next app?

Want to know why you should try Flutter in your next project? What will your business benefit from? Whether you are a director, a technical manager, or any other position that requires making effective decisions in your company and growing your business, this article will be useful for you.
In particular, we’ll help you understand what Flutter is and why it’s the most effective cross-platform framework. You’ll learn about Flutter’s benefits over other cross-platform solutions available and how these benefits play in both development and business processes.

Flutter benefits for mobile app owners

Overall, you’ll get an idea of why Flutter can be a good solution to some of the common problems in business. It can improve your existing mobile app idea. Flutter is a bit different from its competitors in some key aspects. 
Analyzing the Statista report, it’s surprising that the Flutter framework for startups, businesses, and IT projects is the second most popular cross-platform mobile framework among developers. Moreover, around 39% of developers use Flutter, which is a great rise from last year by 9%.

Figure 1. Satistaction with Flutter over time

The report from StackOverflow shows that around 68.8% of developers like using Flutter for new projects and businesses. This number shows Flutter’s benefits, that it is the real winner and most popular technology in the developer’s and business community.

Can the Flutter app be a good fit for your small business? 

Flutter is used for cross-platform application development for iOS and Android using a single codebase.  It comes up with numerous benefits and can definitely help your business grow. 

Given the many benefits of Flutter app development, in particular rapid development, compatibility across platforms, cost-effectiveness, consistent user experience, active and growing community, and so on, Flutter is a fairly new tool that also needs to be improved. But at the moment, the disadvantages of this tool are not so critical that they can hardly be called disadvantages.  

You can find many Flutter advantages for your business:

  • Faster time to market, great for MVP. It’s really so. Flutter is ideal for pushing MVPs and then scaling up. 
  • Cross-platform value-price solution. With Flutter, you can build apps for any platform that belongs to a common codebase. Thanks to this, you can save time and money when compared with the development of individual applications for each platform.
  • Intuitive and feature-rich apps. Optimal user experience is key for your target audience. Apps built with Flutter have lower bounce rates and higher conversions, which leads to more clients and sales.
  • Responsive apps and optimal user experience. If you need high-performance or intuitive user interfaces, go for Flutter. Flutter apps run smoothly thanks to high-quality visuals that users will be delighted with. What’s more, Flutter’s UI support can create a unique user experience.
  • Competitive advantage over competitors. Flutter is the right choice for developing mobile applications for startups and existing businesses, you can create applications for both Android and iOS and gain a competitive edge.
  • A very wide range of niches. Flutter is suitable for healthcare, e-commerce, socials nets, music apps — almost every niche overb there.
  • A variety of tech capabilities for implementing project requirements.

These reasons explain the popularity of Flutter among various global companies such as Google Ads, AppTree, Reflectly and My Leaf, eBay, Groupon, Alibaba Group, and others.
Business owners save money without sacrificing quality and impress customers with an attractive interface. The same team can run powerful apps on mobile, desktop, and web platforms. Despite its young track record, Flutter will be a great choice for mobile apps in 2023.
Some things make a huge difference to the business. These are the stability of the platform, its performance, a wide human resources potential (it is relatively easy to hire a Flutter developer), and a guarantee of successful further development and improvement of technologies/products. The reason is that the problems and shortcomings of the platform or technology in any of these aspects cause the emergence of risks, as well as direct and indirect financial losses for your company.
From this perspective, Flutter can reduce the risks to your business.
Besides, Flutter won’t cause problems in finding engineers because there are already a lot of fans among Android developers in the community (reviews can be found everywhere).
Compared to the available alternative cross-platform approaches, Flutter poses minimal risks to companies and is therefore worth it to be the number one choice for your business.

TBR Group — a Flutter mobile app development company

We are TBR Group — a group of Ukrainian software engineers specializing in platform-independent software and Flutter and Dart programming tools.

There is a set of cross-platform mobile applications built with Flutter and Dart in the TBR Group’s portfolio, in particular:

We’re proud to be associated with apps that revolutionize industries and change the lives of millions. A combination of expertise, an agile approach, and commitment makes us a reliable tech partner Flutter.

By default, every case is bespoke and demands a tailored approach. We dive deep into the peculiarities and business needs rather than create development patterns. Being experts in telemedicine, veterinary, baby care, music, and TTS solutions, we’re open to new markets and domains.

Let’s have a brief call, and we’ll persuade you why you need TBR Group as a tech partner.

More information about Flatter you can find in our article

Summary

So, Flutter’s advantages are brilliant, this is probably the best mobile app development framework to build apps for iOS, Android, and Windows, which implies faster development and cost savings. Its benefits can help not only existing businesses but startups with a small budget to enter the market fast. By hiring Flutter developers, companies can create MVPs, scale them up, grow the clientele, boost sales, etc. If you are interested in such advantages for business — you can safely use a Flutter. 

Dive into TBR Group’s expertise in Flutter app development, unlocking the potential of Flutter 3.7.0 for your next project.

Flutter 3.7 is live! This release contains many updates and improvements. Although Flutter 3.7 was released in January 2023, there are already many blog posts and articles with an overview of the changes it brings. 

Is it really so that with a new release of Flutter 3.7 an open-source programming SDK has brought a more effective outcome compared to other tools for cross-platform development? We can confidently say “yes”.

Overviewing Flutter 3.7: TBR Group expertise

Flutter is a set of user interface tools that allow developers to build mobile, web, and desktop applications from a single codebase. 
The first releases of Flutter provided a set of user interface tools for creating mobile applications on Android and iOS on Windows, macOS, Linux, and the web. With Flutter 3.7, production support for these systems was expanded. 

This release adds new features to create your own menu bars, cascading menus, tools to better support internationalization, new debugging tools, and much more. Elements such as global selection, faster rendering with Impeller, DevTools, and, as always, performance, continue to evolve.
All this is surely going to help developers build more intuitive apps.


 
Let’s take a short trip together to explore the new features of Flutter 3.7 new release.

Support for Material 3 was greatly expanded in version 3.7 by porting the following widgets: Badge, BottomAppBar, Filled & Filled Tonal, SegmentedButton, Checkbox, Divider, Menus, DropdownMenu, Drawer & NavigationDrawer, ProgressIndicator, Radio, Slider, SnackBar, TabBar, TextFields & InputDecorator, Banner.

Anyone can use these new features by enabling the useMaterial3 flag in an application’s ThemeData widget. To fully use the M3, you will need the entire vibrant M3 color scheme. You can provide your own with the new theme creation tool, or Flutter can generate one for you from a single source color using the colorSchemeSeed parameter in the ThemeData constructor. 

Another important point is that now we can expand the menu, namely by adding menu bars and cascading menus.

It should also be emphasized that Impeller performance is likely to match or exceed that of the Skia renderer for most applications, and in terms of accuracy, the Impeller implements all but a few rarely used corner housings. 

Another advantage is iOS release validation. The Flutter new build ipa command now checks some of these parameters and informs you if there are changes that need to be made to your application before release.

You should pay attention to DevTools updates, as this release has several new tools features, and general improvements that you can gladly try out.

With the introduction of the Custom context menus, it is now possible to create custom context menus anywhere in the Flutter application.

Thanks to the scrolling Improvements, all macOS apps will now run with higher fidelity with the addition of new scrolling physics to match the desktop platform.

Looking at internationalization tools and documents, It should be noted that Flutter has completely rewritten the gen-l10n tool for all platforms to support descriptive syntax errors and complex messages involving nested/plural plurals, samples, and placeholders.

Swift migration for plugins offers new links for migration or creation of new plugins using Swift.

Another important point is Bitcode deprecation — Flutter applications do not have bitcode enabled, and this isn’t expected to affect many developers.

With regard to memory management, it is important to note that the collective effect is reducing the noise caused by garbage collection pauses, reducing CPU usage due to allocation speed and background GC threads, and reducing memory capacity.

With custom shader support improvements item, Flutter new has extended support for custom snippet shaders. It’s time to add rave effects to your apps and enhance the user experience to the fullest.

Thanks to reducing animation jank on iOS devices, users should notice more consistently smooth animations on 120Hz iOS devices.

The developers of Flutter 3.7 release do not stop there, already boldly offering a preview of the next wave of innovations that they are already developing and implementing in Flutter new, which include: revolutionary graphics performance, seamless integration for the web and mobile devices, early support for new and emerging architectures and a constant focus on the developer experience. 

And we at TBR Group are ready to implement these innovations to our customers.

Flutter 3.7 developers are gradually showing off their work, which will already be available in the coming months. They impeccably hope that consumers will be even more satisfied with Google Flutter as a powerful toolkit for any developer who wants to create high-quality, beautiful user interfaces that can be applied in any area.

The Flutter ecosystem continues to expand very actively, such as FlutterFlow, a low-code builder for developing native mobile apps, and Widgetbook, which provides designers and developers with flexible tools for collaborative UI development.

TBR Group — a provider of mobile app development services

We’re TBR Group, and we help startups and established businesses evolve through design and development and overcome emerging challenges. We’ll give your product idea an efficient shape and functionality.

Our business approach follows the best industry practices. We build bespoke, well-designed, and feature-rich Flutter mobile applications for both iOS and Android. 

Our expertise covers, but is not limited to telemedicine, healthcare, music, and social network apps. We are always open to new horizons. 
Our target audience includes startups and established businesses of any size and type.

Our solutions address real problems and improve your vital business metrics through beautiful interfaces. When we say “beautiful”, we mean functional, accessible, and intuitive. The product may be completed, but the cooperation is never finished. 

We offer post-launch support and maintenance to help clients continually improve the quality and enlarge the scope of their products. We’re for long-term collaboration.

Our team has already tested Flutter 3.7 too and, based on our experience, we can safely say that this new version will be beneficial both for developers and their clients.

Just like all previous versions, this one brings fresh design elements and tools, which may be helpful in certain dev situations. We’ll be able to share more insights with you soon. Stay tuned!

Summary

So, Flutter 3.7 update contains a weighty range of the latest features and improvements that can help developers create more efficient, vibrant, colorful, and actionable applications.

New features are closely related to issues such as accessibility, localization, and performance. They can ensure that applications built with Flutter can be absolutely easily helpful and used by a significant number of users, regardless of their ability or location, wherever they are.

Besides, the inclusion of Dart 3 will make it easier for developers to test and iterate their code.

Hiring Ukrainian developers in 2023: opportunities and risks

If you are interested in startups and quality software development, if you are a project manager or a deal maker, this article is for you.
Today,  we’ll speak about the actual situation in the Ukrainian IT market in 2023. We will show how the market of IT outsourcing services has changed in Ukraine after the Russian invasion; which factors make Ukraine one of the most attractive options for starting outsourcing software development.

The key benefits of IT outsourcing in Ukraine

Outsourcing is one of the most sought-after services in some areas of business. At the same time, for some countries, it is one of the main sources of foreign trade revenue. 
Over the years, the Ukrainian IT industry has been able to gain attention and interest from employers far beyond Ukraine. The formula for success here is quite simple — good training of specialists, their conscientiousness and diligence, and relatively lower salary expectations compared to programmers from the USA, Great Britain, and Western Europe.
However, the war and economic crisis made adjustments to this beautiful picture. The top management community of IT companies is increasingly talking about the need to allow programmers to travel abroad, and at the same time warning that this may threaten the economy and lead to an irreversible flow of IT emigration.

Reasons for outsourcing: Why hire software developers in Ukraine? 

Let’s start with a few facts:

  • The majority of Ukrainian clients are from the USA, Western Europe, and Great Britain
  • There are more than 200,000 highly skilled IT specialists in Ukraine
  • There are around 100 R&D centers that represent or partner with such companies as Siemens, Samsung, Oracle, eBay, Google, etc
  • 50% of Ukrainian developers have 2–5 years of experience on average
  • More than 100 Fortune 500 companies used Ukrainian IT services
  • Ukraine has around 40 universities providing computer science education
  • IT services exported from Ukraine in 2020 equal more than $5 billion

A year ago, the number of vacancies in the Ukrainian IT industry significantly exceeded the supply of specialists. According to the IT Ukraine Association, every year Ukrainian educational institutions graduate up to 20 thousand technical specialists, but the market needs at least 55 thousand.

In 2013, the Ukrainian IT industry ranked fourth in the world, after the United States and India, in terms of the number of certified programmers. In 2016, Ukraine was ranked 11th among the top 50 countries with the best programmers (HackerRank resource rating). At the same time, according to the DOU.ua, there were 90,000 IT specialists in Ukraine. Every year, their number increases by about 20%. 

Annually, the demand for IT specialists in Ukraine grows by 30%, primarily due to the colossal growth in requests for IT services.
Ukraine is an excellent destination for startup development because of the large pool of talent, good level of English proficiency, strong education, reasonable pricing, high flexibility, high level of stress tolerance, convenient time zone, high quality, flexible environment, culture fit, skill diversity, development center. 

Despite Russia’s full-scale war against Ukraine, the Ukrainian IT industry continues to function and develop. Foreign companies can hire Ukrainian developers with acceptable risks, build an awesome product together, and support the entire Ukrainian economy.

These facts are confirmed by TBR Group, which worked throughout the war period and based in Ukraine.

Ukrainian developers continue not only to perform their work at a high level and constantly improve their skills and develop. According to DOU.ua, Ukrainian developers are proficient in the following programming languages: JavaScript, Java, C#, Python, PHP, TypeScript, Swift, Ruby, Kotlin.

Multiple world-recognized startups have been born in Ukraine, including Grammarly, Reface, and AirSlate.
Now many startup founders and potential clients of Ukrainian IT companies have concerns about hiring software developers from Ukraine for their startups due to the risks associated with wartime. 

Risks of hiring developers in Ukraine in 2023?

Before the war, many companies worldwide wanted to work with Ukrainian developers because they found many strengths in this collaboration.

The current situation has changed due to new risks. So do attitudes — some of the potential clients prefer hiring developers beyond Ukraine. 
According to the IT Ukraine Association report, most of the IT companies retained customers and contracts during the war, despite all the risks stated by customers. 

About 52% of companies kept 100% of their contracts, 32% of companies — 90–99% of contracts, and only 16% of companies lost 10% or more of their contracts. Yet, the main factors of maintaining customers are:

  • high level of customer loyalty
  • long-term partnership
  • delivery stability
  • constant communication with clients
  • rapid stabilization of business processes
  • quick relocation of the employees
  • high quality of services, even in wartime

Currently, about 2% of the IT market has been drafted into the military service, which is approximately equal to the percentage of failure to pass the probationary period in the niche. This leads to the conclusion that the risk of mobilization of critical specialists is not that high.

At the beginning of the war, IT companies evacuated employees to safer regions.  There are still some work disruptions like blackouts, electricity cuts and Internet outage. 

All this can lead to work disruption, violation of deadlines and team composition alterations. 

Despite the existing risks, the Ukrainian IT industry showed record growth in export earnings in the first quarter of 2022. 

The volume of computer services in Ukraine for 10 months increased by 13%, and exports — by 23%. This was reported by the press services of the Ministry of Economy.

According to the Association “IT Ukraine”, the IT sector showed an increase of 13%.

“Enterprises of the sphere paid UAH 48 billion in taxes for this period. More than half a billion dollars are aimed at supporting the Armed Forces of Ukraine and the humanitarian sphere,” the report said.

Exports of computer services grew by 23% compared to the previous year. Ukrainian IT companies attracted $350 million of investments, even in military conditions, more than 80% of companies retained about 100% of their contracts.

TBR Group — an experienced Ukraine-based development company

Despite the wartime, our company continues to work productively. TBR Group is about flexibility, trust and meaningful choices.

Working at TBR Group means being a part of a community that values growth, mutual trust and respect. We care about creating sustainable software, the effect our activity has on the world, and each employee’s experience. 

TBR Group helps startups and established business evolve through design and development and overcome emerging challenges. We’ll give your product idea an efficient shape and functionality.

We work with world-class clients and get outstanding experience as a part of TBR Group from the various niches: social network platforms, TTS readers, healthcare, vet business, micropayments, etc. 
The products we build may be completed, but the cooperation is never finished. We offer post-launch support and maintenance to help clients continually improve the quality and enlarge the scope of their products. We’re open for long-term collaboration.

Summary

Despite the difficult times, Ukrainian IT specialists continue to work fruitfully.  Our business approach follows the best industry practices. TBR Group — an experienced Ukraine-based development company. Our company continues to provide services of various kinds: mobile development, web development, product design, support and management. We understand that there may be risks of a different nature, but our company, and team is ready for them.

Flutter: Build and Deploy iOS apps using GitHub Actions

Introduction

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline.

Our focus will be on building and deploying an iOS App.
We will use a machine and environment which GitHub provides us by default.

By the end, you will know how to:

  • Enable GitHub Actions and add the first Workflow
  • Build an iOS Application Archive.
  • Deploy your App to TestFlight

Let’s begin with a basic workflow.

A new Workflow

GitHub Actions can be added to your existing Repository. Still, we will work with a new Flutter project, which has its first commit pushed to a fresh repository.

GitHub Actions are enabled by default, you can start right away by adding a workflow file.
1. Create a .github/workflows directory at the root of your project
2. In the .github/workflows directory, create a file named build.yml
3. Copy the following instructions into the build.yml
4. Change to branch name from “main” if you have a different one
5. Change the Flutter version to the one you use in your project

# Name of the workflow
name: Build

# Controls what will trigger the workflow.
# Change it to your needs.
on:
 # A new push to the "main" branch.
 push:
   branches: [ "main" ]
 # A new pull request to the "main" branch.
   pull_request:
     branches: [ "main" ]
 # Allows to trigger the workflow from GitHub interfaces.
 workflow_dispatch:

# A single workflow can have multiple jobs.
jobs:
 # 'A new job is defined with the name: "build_ios"
 build_ios:
   # Defines what operating system will be used for the actions.
   # For iOS, we have to use macOS GitHub-Hosted Runner.
   runs-on: macos-12
   # Defines what step should be passed for successful run
   steps:
     # Checkout to the selected branch
     - name: Checkout
       uses: actions/checkout@v3
     # Download and install flutter packages
     - name: Install Flutter
       uses: subosito/flutter-action@v2
       with:
         # Define which stable flutter version should be used
        flutter-version: "3.7.3" 
        channel: 'stable'
         # Enables cache for flutter packages              
         # Speed up the process
         cache: true
     # Get Flutter project dependencies
       - name: Get dependencies  
         run: flutter pub get

GitHub workflows include jobs, which work via steps one by one.
We use GitHub-Hosted macOS runner because it is the only way to build iOS apps. You can read more about GitHub Pricing here.
If you have you want to build on your device or some other dedicated one, you can use Self-Hosted Runners.

So, you can push a new commit to the branch and look for results in your repository’s Actions tab.

Press on your first workflow. In my case it’s called Build #1Next, press on “build_ios”

Here you can watch for your workflow in progress, and see its results. When the first workflow is finished, you should see something like this.

Congratulations, it works. Let’s build an iOS Application Archive.

Creating iOS Application Archive

To build iOS Archives we have to take multiple steps:
1. To have to be enrolled in paid Apple Developer Program
2. Create an Apple Distribution Certificate
3. Create a Provision Profile 
4. Create and fill exportOptions.plist
5. Add a workflow step for storing values to a keychain 
6. Build IPA
When you have created a Distribution Certificate and a Provision Profile, you need to add new exportOptions.plist file at ./ios/ folder. 
Add the following to the created file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
   <dict>
       <key>method</key>
       <string>app-store</string>   
       <key>teamID</key> 
       <string><your_team_id></string>        
       <key>provisioningProfiles</key>      
       <dict>     
          <key>com.<your_company>.<app></key>
          <string><provision_profile_name></string> 
       </dict>
   </dict>
</plist>

Now we will add the certificates that will be used during the workflow. Let’s add the step before getting flutter packages:

- name: Import certificates (iOS)
  env:
       BUILD_CERTIFICATE_BASE64: ${{ secrets.iOS_P12_DISTRIBUTION_CERT_BASE64 }} 
       P12_PASSWORD: ${{ secrets.iOS_P12_DISTRIBUTION_CERT_PASSWORD }}     
       BUILD_PROVISION_PROFILE_BASE64: ${{ secrets.iOS_PROVISION_PROFILE_BASE64 }}       
       KEYCHAIN_PASSWORD: ${{ secrets.iOS_KEYCHAIN_PASSWORD }}
     run: |
         # create variables         
         CERTIFICATE_PATH=$RUNNER_TEMP/build_certificate.p12                PP_PATH=$RUNNER_TEMP/build_pp.mobileprovision
         KEYCHAIN_PATH=$RUNNER_TEMP/app-signing.keychain-db
 
         # import certificate and provisioning profile from secrets
         echo -n "$BUILD_CERTIFICATE_BASE64" | base64 --decode -o $CERTIFICATE_PATH
         echo -n "$BUILD_PROVISION_PROFILE_BASE64" | base64 --decode -o
$PP_PATH
         # create temporary keychain         security create-keychain -p $KEYCHAIN_PASSWORD $KEYCHAIN_PATH
         security set-keychain-settings -lut 21600 $KEYCHAIN_PATH
         security unlock-keychain -p $KEYCHAIN_PASSWORD $KEYCHAIN_PATH
         # import certificate to keychain           
security import $CERTIFICATE_PATH -P $P12_PASSWORD -A -t cert -f pkcs12 -k $KEYCHAIN_PATH            
         security list-keychains -d user -s $KEYCHAIN_PATH
         # apply provisioning profile
         mkdir -p ~/Library/MobileDevice/Provisioning\ Profiles
         cp $PP_PATH ~/Library/MobileDevice/Provisioning\ Profiles
    - name: Install Flutter
      uses: subosito/flutter-action@v2
      with:
        # Define which stable flutter version should be used
        flutter-version: "3.7.3"
        channel: 'stable'
        # Enables cache for flutter packages
        # Speed up the process
        cache: true
    # Get Flutter project dependencies
    - name: Get dependencies
      run: flutter pub get
    - name: Build iOS application archive
      run: flutter build ipa --export-options-plist=ios/exportOptions.plist

Also, we should add a step that will always be called and clean up the keychain.

 - name: Clean up keychain and provisioning profile
     if: ${{ always() }}
     run: |
        security delete-keychain $RUNNER_TEMP/app-signing.keychain-db
        rm ~/Library/MobileDevice/Provisioning\
 Profiles/build_pp.mobileprovision

We need the distribution certificate and provision profile files encoded as base64. To create a new file with base64 encoded string, use the macOS command:

base64 -i ./<file_name> -o ./file-base64.txt

To add new secrets to your repository, go to its webpage > Settings > Secrets and variables > Actions and add the 4 secrets by pressing the New repository secret button. 

As a result, we have IPA built every time a new commit has been pushed.

iOS Application Archive Deployment

At the current stage, we have signed the iOS build and the last step is to deploy it to App Store Connect and the TestFlight.
Let’s look at the steps for the workflow:
First, we need to decode App Store Connect private key file and save it:

 - name: Decode App Store Connect private key file and save it
   env:
       API_KEY_BASE64: ${{ secrets.iOS_APPSTORE_CONNECT_PRIVATE_KEY_BASE64 }}
       API_KEY: ${{ secrets.iOS_APPSTORE_CONNECT_API_KEY_ID }}     
   run: |
     mkdir -p ~/private_keys
     ls ~/private_keys
     echo -n "$API_KEY_BASE64" | base64 --decode -o ~/private_keys/AuthKey_$API_KEY.p8
     echo "After saving: "
     ls ~/private_keys

Then, after the IPA building, we add the following: 

 - name: Upload to App Store Connect
     env:
       ISSUER_ID: ${{ secrets.IOS_APPSTORE_CONNECT_ISSUER_ID }}          
       API_KEY: ${{ secrets.IOS_APPSTORE_CONNECT_API_KEY_ID }}     
   run: |
       echo "Before uploading: "
       ls ~/private_keys
       xcrun altool --upload-app -f build/ios/ipa/flutter_app.ipa -t ios --apiKey $API_KEY --apiIssuer "$ISSUER_ID"
       ls ~/private_keys

As we see, to deploy the app archives we need 3 values: 

  • App Store Connect API key ID
  • App Store Connect Private key file as base64
  • App Store Connect Issuer ID

Let’s begin with the private key file. You should open the App Store Connect > Users and Access > Keys and press the Generate API key button. You should name the key and choose the developer role. Next, you should see all the 3 values

  • You can download the Private key by pressing the Download API Key button
  • You can see the API key ID
  • You can see the Issuer ID on top

You should add them to your GitHub Secrets. Congratulations, you are ready to distribute your application.

Conclusion

Using GitHub actions as a continuous delivery tool has provided a comfortable, reliable service for building and deployment of any app. Benefits worth mentioning:

  • When you use a GitHub Repository, you already have a familiar environment for your CI/CD. You can have everything for your code in one place.
  • With a big community of GitHub, you can have nearly any use case already covered with an Action from the marketplace.
  • At any moment, you can scale to your needs with Microsoft-provided servers or run all your actions on another server or your device with self-hosted runners without paying GitHub anything.

Overall, GitHub Actions helped us deliver apps in different configurations much faster on multiple platforms at a time.

Flutter: Build and Deploy Android apps using GitHub Actions

Introduction

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline.

Our focus will be on building and deploying an Android App.
We will use a machine and environment that GitHub provides us by default.

By the end, you will know how to:

Let’s begin with a basic workflow.

New Workflow

GitHub Actions can be added to your existing Repository. Still, we will work with a new Flutter project, which has its first commit pushed to a fresh Repository.

GitHub Actions are enabled by default, you can start right away by adding a workflow file.
1. Create a .github/workflows directory at the root of your project
2. In the .github/workflows directory, create a file named build.yml
3. Copy the following instructions into the build.yml
4. Change to branch name from “main” if you have a different one
5. Change the Flutter version to the one you use in your project

 # Name of the workflow
name: Build

 # Controls what will trigger the workflow.
 # Change it to your needs.
 on:
 # A new push to the "main" branch. 
  push:
   branches: [ "main" ]
 # A new pull request to the "main" branch.
  pull_request:
   branches: [ "main" ]
 
 # Allows to trigger the workflow from GitHub interfaces.
   workflow_dispatch:
 
# A single workflow can have multiple jobs.
jobs: 
 # 'A new job is defined with the name: "build_android" 
 build_android:
   # Defines what operating system will be used for the actions.
   # For android, we will use Linux GitHub-Hosted Runner.
   runs-on: ubuntu-22.04
   # Defines what step should be passed for successful run
   steps:
     # Checkout to the selected branch
     - name: Checkout
       uses: actions/checkout@v3
     # Download and install flutter packages
     - name: Install Flutter
       uses: subosito/flutter-action@v2
       with:
         # Define which stable flutter version should be used
         flutter-version: "3.7.0"
         channel: 'stable'
         # Enables cache for flutter packages              
         # Speed up the process
         cache: true
     # Get Flutter project dependencies
     - name: Get dependencies
       run: flutter pub get

GitHub workflows include jobs that work via steps one by one.
We use GitHub-Hosted Ubuntu runner because it is the most cost-efficient way to build Android apps. You can read more about GitHub Pricing here.
If you want to build on your device or some other dedicated one, you can use Self-Hosted Runners.

So, you can push a new commit to the branch and look for the results in your repository’s Actions tab.

Press on your first workflow, in my case it’s called Build #1Next, press on “build_android”

Here you can watch for your workflow in progress and see its results. When the first workflow is finished, you should see something like this.

Congratulations, it works. Let’s build an unsigned App Bundle.

Creating Android Bundle

Build unsigned Bundle

The first step for our action is to build an Android App Bundle without signing. 
Before doing so, we should find and remove the release build type ‘signingConfig signingConfigs.debug’ at ./android/app/build.gradle. It should look like this:

   buildTypes {
       release {

       }
   }

Let’s add the following

R
- name: Build release app bundle
  run: flutter build appbundle

As a result, we have an unsigned app bundle at output every time a new commit has been pushed. Let’s test it out!

Another successful action.

Sign the Bundle

The next step is to sign the app bundle for further deployment.
Let’s look at the .yml syntax for this case.

- name: Sign App Bundle
  uses: r0adkll/sign-android-release@v1   
  id: sign_app
  with:
   releaseDirectory: build/app/outputs/bundle/release/
   signingKeyBase64: ${{ secrets.ANDROID_KEYSTORE_FILE_BASE64 }}
   alias: ${{ secrets.ANDROID_SIGNING_KEY_ALIAS }}         
   keyStorePassword: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}             
   
   keyPassword: ${{ secrets.ANDROID_SIGNING_KEY_PASSWORD }}

To sign an app bundle we require 4 values. To generate them, use the following command:
Note: keytool is a part of the Java package.

sudo keytool -genkey -v -keystore <your_name>.keystore -alias <your_name> -keyalg RSA -keysize 2048 -validity 10000

As a result, we have a new file, fluttergithubactionsexample.keystore generated and we already know 3 values: 

  • Alias: fluttergithubactionsexample
  • keyStorePassword: password1
  • keyPassword: password1

We need the keystore file encoded as base64. To create a new file with base64 encoded string use the macOS command:

base64 -i ./<your_name>.keystore -o ./keystore-base64.txt

To add new secrets to your repository, go to its webpage > Settings > Secrets and variables > Actions and add the 4 secrets by pressing New repository secret button.

Make sure you have removed all the spaces when you add them!

Once you have added the secrets, let’s try to run actions and test the signing process.

Deployment

At this current stage, we have signed app bundle and the last step is to deploy it to Play Store. 
Let’s look at the step.

- name: Upload to Play Store (Internal Testing)
  uses: r0adkll/upload-google-play@v1.0.18
  with:
         serviceAccountJsonPlainText: ${{ secrets.ANDROID_SERVICE_ACCOUNT_JSON }} 
    packageName: com.testgroup.flutter_github_actions_android                           releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}                         mappingFile: ./build/app/outputs/mapping/release/mapping.txt
    track: internal

We should specify the correct package name of the app. To do so you can change the applicationId value at ./android/app/build.gradle.

To deploy the Android app, you need a service account JSON. Let’s create a new service account. We should use Google Cloud Console. Choose a project if you already have one (for example, if you have set up Firebase for it previously) or create a new one. Next, press Create Service Account button, choose a name, I will call it GitHub Actions, give it Service Account User role, press Create.

You have to add a new key to the service account, the JSON will be downloaded, add its data to GitHub Secrets as ANDROID_SERVICE_ACCOUNT_JSON

You also need to enable Google Play Android Developer API.

The next step is Google Play Console. You should have a Google Developer Account.
Navigate to > Users and permissions on the sidebar. There, at the Users tab press the Invite new users button. From there, you should enter the Service Account email. You should grab it from the Service account list for your project at Google Cloud Console. It will look like this:

Select Account Permissions and press Invite user button.

Before testing the GitHub action, you must manually add the first release to the Play Store internal testing.

Go to the app in the Play Store, choose the internal testing ring, and press the Create new release button. Here you need to drop your signed app bundle.
You can use the following workflow steps to download a signed app bundle from GitHub manually.

- name: Upload Signed App Bundle
  uses: actions/upload-artifact@v3
  with:
    name: signed-app-bundle
    path: ${{steps.sign_app.outputs.signedReleaseFile}}

Once the workflow is finished, you can download the bundle from the artifacts.

When you upload your bundle to the Play Store Console and confirm the first rollout, you are ready to automatically deploy with the action.Add the step to yours .yml file:

- name: Upload to Play Store (Internal Testing)
  uses: r0adkll/upload-google-play@v1.0.18  
  with:
    serviceAccountJsonPlainText: ${{ secrets.ANDROID_SERVICE_ACCOUNT_JSON }}
    packageName:com.testgroup.flutter_github_actions_android        
    releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}        
    mappingFile: ./build/app/outputs/mapping/release/mapping.txt
    track: internal

Conclusion

Using GitHub actions as a continuous delivery tool has provided a comfortable, reliable service for building and deployment of any app. Benefits worth mentioning:

  • When you use a GitHub Repository, you already have a familiar environment for your CI/CD. You can have everything for your code in one place.
  • With a large community of GitHub you can have nearly any use case already covered with an Action from the marketplace.
  • At any moment, you can scale to your needs with Microsoft-provided servers or run all your actions on another server or your device with self-hosted runners without paying GitHub anything.

Overall, GitHub Actions helped us deliver apps in different configurations much faster on multiple platforms at a time.

Discover the steps of creating a micropayments mobile app in 2024 with TBR GRoup

In the era of globalization and smart everythings, a firmly established web presence appears crucial.

By addressing challenges posed by digital technology, an enterprise can stand a chance of building a prosperous online business.

In this article, we are going to brief you on platform-independent text-to-speech mobile app development.

What technology should furnish the idea in the best possible way?
And what pitfalls could there be on the way?

In case mobile development relates to the react-style framework Flutter, such issues become specifically relevant.
“Read the text out loud” techniques have come into widespread use and the number of app downloads is rising rapidly.

Furthermore, the “Forecast growth of the artificial intelligence (AI) software market worldwide from 2019 to 2025” is expected to witness a sustained increase.

What is text-to-speech software?

Speech synthesis refers to the synthetic output of human beings’ speech. Text-to-Speech technology is a method for rendering the text into a real-time voice.

It’s part of machine learning, data mining, and artificial intelligence technologies.

Simply put, Text-to-Speech synthesis —TTS — produces the voice. Text-to-speech solutions should not be confused with speech recognition techniques, which are concentrated on voice recognition and translation practices.

You might have come across such definitions as voice synthesis or text-to-voice technology, which actually define the same notion.

TTS readers could be a perfect match for both increasing productivity and helping those suffering from dyslexia, vision impairment, and such like.

Based on preferences, users can choose:

  • languages;
  • gender;
  • speed;
  • quality.

In their vast majority, text readers allow users to upload files of various text formats or connect to file-sharing apps, such as DropBox and OneDrive. It is as well possible to download the required files from a local device.

A reading style can be adjusted to auditory, visual, or a compound array of both.

Configuring screen layouts is another option available for software users.

How to develop text-to-talk apps?

Getting a clear comprehension of how to craft a text-to-voice mobile app is significant.

You will need to define the goal and the target audience.

The discovery and the business analysis stages are crucial as they will determine the overall strategic course.

Right after the research has been done, it is time for designs to get created and code written.

You may either try using a pre-created mobile app design tool to draw designs for a mobile text reader app.

Extending the development opportunities, you may reach out to a software engineering company.

The mobile software development could be

  • native;
  • web;
  • cross-platform.

Plus, each and every technological stack features its peculiarities.

Elaborating on the development stages, we dive deeper into the domain in our Building a pet care app with Flutter: TBR Group guide, and Why choose Flutter for mobile app development in 2022?

A quality assurance specialist is to test the brand-new app and ensures its impeccable performance. A phase of testing is highly essential before launching the product to a broad audience.

As the app is uploaded into the App Store and Google Play stores, it becomes available to get downloaded by all those interested.

The post-launch is all about supervising the correct performance of the text reader and adding new features and updates.

How much money does it cost to build text-to-voice mobile apps?

When it comes to the median price of crafting a text-to-speech Android or iPhone app, the cost will depend upon a few factors.

As an example, the Flutter engineer’s earnings are hourly based and depend upon the location region. Likewise, in Eastern Europe, the rates fluctuate between $40–60 and the USA pays $100–200 per hour on average.

The article Pros and cons of dedicated teams for mobile app development will cast some more light on the problem of choosing an appropriate team to fulfill the project.

Examples of text-to-talk apps

Just to name a few, some of the most top-rated Google text-to-speech and text-to-speech iPhone software solutions are:

Text to speech book readers might serve as efficient aids both at the time of work and leisure or during a learning period.

Neural Reader — a Text-To-Speech mobile app developed with Flutter: TBR Group’s experience

Neural Reader refers to the Productivity section in the App stores. It is a text-to-speech and speech-to-text cross-platform mobile app built with Flutter.

Please, read through a complete Neural Reader case study on our Cases page.

Converting the text into audio, the app allows people suffering from impaired vision to listen to their text inputs.

People, who cannot hear well, may see audio transcripts. This way, the app converts a real-time audio speech into text.

Opportunities for users vary from general account setting options to the key functionality of the application.

Neural Reader mobile app: “Settings” pages for authorized and non-authorized users.

It is possible to personalize the client’s member area.

Neural Reader mobile app: “Settings Language”, ”Language”, ”Settings Voice”, and ”Settings Text Size” pages.

Allowing for a large range of files to get uploaded, Neural Reader makes sure customers can pick up the required format.
Such as:

  • text and word docs;
  • EPUB and PDF;
  • dictations,
  • web article links;
  • image files.

Neural Reader app: “My Library” pages.

A consumer can benefit from the next features:

  • files import;
  • language choice;
  • audio player;
  • audio and text conversion;
  • text transcription;
  • data storage;
  • dictation;
  • voice preferences;
  • font size;
  • audio replay speed.

Neural Reader mobile app: “Audio player” pages.

A user can convert the files from the:

  • image;
  • text;
  • files of the supported extensions.

Neural Reader mobile app: “Convert from” pages.

A user is able to:

  • log in to the account;
  • choose between the subscription options;
  • apply the required settings;
  • share feedback.

The artificial neural network technique and the Flutter framework have been applied in the project to realize the natural language processing technology.

In a nutshell, Flutter can be defined as a software development kit, a framework. Flutter contains development tools for code conversion.

So, a code base written in Dart is transformed by Flutter into a machine code that could be understood and executed on mobile devices with iOS or Android operational systems, as well as Web solutions.

By employing the Flutter framework and the Dart programming language, we were able to craft a cross-platform mobile app natively felt on iOS and Android.

More of Flutter is written in our article The fundamentals of Flutter & Dart on the Blog page.

Summary

TBR Group is a Ukrainian company focused on platform-independent mobile app development.

Having completed a number of projects, we will gladly advise on any scope of work for your project.

How to craft a micropayment mobile app in 2024?

As an online reader, you may be searching for information on how to use your mobile phone to pay goods off or remunerate agents and other third parties.

And indeed, payment mobile apps are a great favorite with clients for contactless payments or P2P transactions.

What about micropayment mobile apps? Even though small payments are rather popular these days, it could be pointless making low-value transactions due to the high service fees imposed.

In this article, we are going to describe the main steps in crafting a mobile app for small payments and get acquainted with the most favored low-value mobile payment applications.

How to build a micropayment mobile app in 2023?

Building a micro payment service mobile app, as well as any piece of programming, takes time, effort, and careful consideration.

As such applications deal with monetary transactions, you will need to make an effort with the prearrangements and define all the financial regulations and laws relevant to your scope of activity.

Well, how to create a payment processing mobile app?

There are a variety of options for how to craft a mobile micropayment app.

Before advancing to any technological solutions, your initial objective should be concentrated on:

  • the idea;
  • designs;
  • software implementation;
  • quality assurance testing;
  • post-launch period support.

The entire bunch of works could be carried out by:

  • freelancer geeks;
  • outstaffed specialists;
  • a dedicated team or company.

Hiring a dedicated development team means employing tech experts from a single source. Our article Pros and cons of dedicated teams for mobile app development will bring out more info in this regard.

Here is how each participant is steadily working towards your company’s goal.

A project manager is responsible for carrying out the entire project successfully and smoothly. The PM has to define requirements and objectives clearly, as well as evaluate the scope of tasks, the cost of the project, and its time limits.

A designer will deliver the look of the application. Whereas the software engineers will provide the code implementation. After the app has been coded, the QA will assure its seamless performance.

A closer look at all the development stages is provided in:
Building a pet care app with Flutter: TBR Group guide. For all those interested, this reference article will be fun to dip in and out of.

The specifics of the mobile app for small payments

Contactless payment is a safe and convenient way to process financial transactions. It implies a bunch of technological decisions, both hardware devices, and software solutions.

During contactless payment, the card details are not transmitted.
For each contactless operation, a one-time unique code is created, which is a token. The code does not reflect the account number, card number, PIN code, or any other sensitive information.

3-D Secure protocol is an additional layer of security for online credit and debit cards to ensure two-factor user authentication.

What are micropayments?

Micropayments are transactions focused around $1.00 in value. In a broader sense, they are basically small remittances that cover money transfers from $1 to $20 at a time.

Similar terms related in meaning to micropayments are:

  • small payments;
  • low-value payments;
  • micro transactions.

What are mobile payment applications?

In a nutshell, mobile payment applications — sometimes called digital wallet apps — are software programs allowing mobile payment processions.

By leveraging their comparative strengths, customers can benefit from

  • speedy payments;
  • simplicity in use;
  • reliability and safety.

How do micropayments work?

To start using one of the micropayment digital wallet apps, it is required to follow the steps listed below.

So, the customer needs to:

  • download and install a mobile app from an eligible source;
  • create either a personal or a business account;
  • indicate a phone number and email address;
  • connect the account to the source of funds — a debit card, a credit card, or a bank account. It will be necessary to set up micropayment methods available in the app;
  • make sure to enable multifactor user authentication and the SMS payment confirmation;

As soon as the application has been installed and adjusted, the user can run it.

What are micropayment methods and features?

Micro payment options allow

  • money transfers;
  • internet acquiring;
  • purchasing goods and services from retailers;
  • online shopping;
  • etc.

Micro payment methods ensure payment submission in a couple of ways.
It is possible to enable customers to opt for paying via

  • peer-to-peer transactions;
  • pools of funds;
  • a QR code;
  • links;
  • buttons on the website;
  • contactless payment in the physical store.

Nice-to-have features

  • branded credit cards and debit cards;
  • support for Bitcoin or other cryptocurrencies;
  • cash-back offers;
  • etc.

Network fees & transaction charges

For a mobile app user, a difficulty may emerge in processing micropayment transactions in the credit card world.

The issue may concern the transaction charges set by the banking system.

Many merchant processors can just as well charge network fees and imply transaction charges, making low-value payments non-profitable in a way.

Starting off with the release of your micro payment service app, as a product owner, you will need to consider applying any possible network fees or transaction percentage charges. Hence, the application can either include percentage fees or come with no extra fees added.

Home / foreign market segments coverage

Mobile apps for small payments can operate in the internal market area, or cover overseas monetary transfers.

Credit card data collection

The app can share personal data with 3-rd parties, or can skip such an option and keep the sensitive data just for internal purposes.

Examples of most used mobile payment apps

All of these software payment applications are striving to make monetary transactions easy, reliable, and safe.

To exemplify some of the most preferred, most used mobile payment apps, we will offer you a list below.

It includes, without limitation

These applications aim to follow security protocols and standards.

pingNpay — a micropayment mobile app built with Flutter

As a platform-independent mobile app, pingNpay is centred around processing micropayment transactions. The micropayments are usually those at a value of £10 each.

What is really nice about the pingNpay mobile app is the simplified way of processing low-value payments. And the overriding factor is that the small payments have been made profitable.

pingNpay mobile app: “Type”, “Date” and “Home/History” pages.

We have implemented Blockchain technology to make all the payment procession well-protected.

Representing a different approach in the payment procession sphere, Blockchain acts as a method to enforce security and simplify monetary deals of any scale.

pingNpay mobile app: “Pay”, “Receive” and “Create a Dynamic QR Code” pages.

The pingNpay mobile app enables

  • deep-linking;
  • branded QR codes;
  • a QR scanner;
  • P2P transactions;
  • encryption and decryption;
  • user authentication;
  • push notification;
  • Native Share for QR codes and links.

pingNpay mobile app: “Scan QR code” and “Show your QR code” pages.

A user can choose either a Static QR or Dynamic QR code to send and receive a microtransaction. It is also possible to send funds using a permanent link.

pingNpay mobile app: “Home” pages.

In the pingNpay app, we have integrated

To make more sense of the implemented functionality, challenges, and solutions, you are invited to our pingNpay case study page.

The onboarding pages make certain that a user gets all the directions on how to successfully start using the app.

pingNpay mobile app: onboarding pages “Buy”, “Pay”, and “Live” pages.

There is a home page and the pages designed for making monetary micropayments, QR code scanning, history transactions, settings, and contacts.

pingNpay mobile app: “Contacts” and “Send a payment request page” pages.

Being a cross-platform mobile application, pingNpay can just as well operate on web devices.

Our team — TBR Group — used Dart and Flutter to craft the pingNpay micropayment mobile app. pingNpay is fast, reliable, and exceedingly user-friendly.

Whether it is an interaction with the data level and drawing the UI, or carrying out heavy calculations — Flutter handles the entire scope of data processing.

Flutter makes the code

  • swift;
  • simple for testing;
  • reusable.

You are welcome to read our articles The fundamentals of Flutter & Dart, and Why choose Flutter for mobile app development in 2022? This way, you will find out a little more about the Flutter framework and the Dart programming language.

Summary

TBR Group is a Ukrainian software development company. We specialize in cross-platform app development with Flutter and Dart.

Having completed cross-platform projects with Flutter and Dart, we were able to build:

  • a stable MVP version of the product;
  • beautiful and powerful mobile apps.

Plus, opting for a dedicated team will give you heart and support in achieving your goals. Besides, an inclusive approach to the working process is our first priority.

Hiring Flutter app developers in 2024: tips and tricks

Intro

Medicine, shopping, banks, music, babysitting services, and pet care — these are just a few market areas where the platform-independent technology Flutter has recently been growing its tremendous rise.

In gaining popularity, Flutter has been at the top over the past six months in Google Trends stats.

Google Trends “Explore what the world is searching for” page.

Flutter has been an amazingly viral topic in the software development community since its official launch in 2018.

TBR Group is going to share some insights on recruiting a Flutter developer. Mainly, we will elaborate on the following:

  • how to hire Flutter developers;
  • which questions could be asked during the job interview;
  • basic Flutter developer requirements;
  • core Flutter developer responsibilities.

As qualified Flutter app developers are scarce, the best practices applied to hire experienced specialists become highly fundamental.

Who is a Flutter app developer?

A Flutter developer — who is this guy? Is this person a computer geek harnessing the power of Flutter and Dart? Well, that’s true.

The Flutter developer is a software engineer who builds platform-independent software programs using the Flutter and Dart bundle.

For more of Flutter features, we are happy to offer our articles:
The fundamentals of Flutter & Dart, and Why choose Flutter for mobile app development in 2022?
Hands-on experience
Qualification-wise, a Flutter developer may demonstrate a track record as follows:

  • a junior or trainee is a newcomer to the industry or a freshman in the company;
  • Flutter engineers with 2-4 years of working knowledge can be considered middle-level developers;
  • senior Flutter and Dart developers are those geeks with more than four years of hands-on experience in the industry.

Flutter developer responsibilities
Flutter engineers could deal with the following:

  • creation of multi-platform apps for iOS and Android using the Flutter development framework;
  • work in a bundle with back-end developers, designers, and the engineering team to deliver well-architected and high-quality solutions;
  • advocate for engineering standards.

So, developers work day and sometimes night to deliver beautifully designed, user-friendly, and highly operational Flutter-crafted mobile apps.

How to hire an experienced Flutter developer

Due to the growing market demand for platform-independent software, app developers in Flutter are of special job relevance.

The openings for a Flutter developer are acutely felt both in start-ups and the technologically advanced company.

Chances are for a developer to get on-boarded by a start-up and accelerate professional growth due to the still-developing corporate and operational rules, procedures, and regulations.

On the other hand, at all times, in a mature company, there is an opportunity to learn quickly inside an already qualified and skilled team working both alone and as a team player.

Speaking of the Flutter developer requirements, here is a list of basic nice-to-have skills for a Flutter software engineer.

Flutter developer requirements

Hard skills:

  • experience in front-end development;
  • experience in building mobile apps in Flutter and Dart;
  • working knowledge of the general mobile landscape, architectures, trends, development lifecycles, including building and automated testing, emerging technologies;
  • solid understanding of mobile app design guidelines like BLoC, MVC, Redux, Singleton, Factory, Delegation, or other patterns;
  • Android Material Components, Cupertino layouts, and awareness of their differences;
  • proficiency in using GitHub, Bitbucket, or similar version control and continuous integration tools.

Soft skills:

  • excellent verbal and written communication skills;
  • self-starter, proactive in resolving issues and removing roadblocks;
  • willingness to learn and improve.

Additional preferred skills:

  • Swift, Objective-C, Java, Dart, or Kotlin;
  • AWS;
  • code review processes;
  • CI/CD;
  • REST, JSON
  • Experience with third-party libraries and APIs.

For app developers aiming to strive professionally, a fast, agile, and multi-functional team environment may appear as a relevant and proper solution.

Flutter interview questions
Briefing on the interview procedure, here comes an outline exemplifying variable interview questions, both verbal and written.

So, you can ask a potential candidate:

  • In which ways could you possibly implement the Skia Graphics Engine into the Flutter-based project?
  • What would you build with widgets?
  • How would you craft stateless and stateful conditions?
  • Tell us what you know about the Dart virtual machine.
  • How could you prove a freshly embedded feature functioning in the designated way?
  • What third-party software tools have you managed to integrate into your Flutter project?
  • Could you please describe your work experience in Dart asynchronous programming?
  • Have you ever implemented a “JavaScript bridge” in the Flutter development piece?
  • What is BLoC Flutter? What approaches for managing various states of the application have you dealt with?
  • Could you please articulate your background in using method channels to invoke native API knowledge?
  • Could you please speak about the usage of tools and techniques related to: code analyzers, layout inspector, performance and memory view, multithreading, networking, and security choices.

Familiarity with the Agile approach is essential. At the same time, the waterfall model may seem a more suitable alternative for a large-scale plan.

All the candidates might be expected to have previously built a complete app using the Flutter tool set and to communicate the app-building process with the in-house team engineers.

TBR Group’s assistance

Our article on Writing a Flutter Web plugin with JavaScript: a step by step guide can appear valuable for enlarging the personal practical tips asset.

Look through these Flutter apps built by TBR Group:

  • Neural Reader is a Text-To-Speech audio reader, and Speech-To-Text transcribing tool;

Neural Reader Flutter mobile app: “Audio Player”, “My Library / Convert from” and “Audio speed” pages.

  • VinciLabs mobile app aimed at handling health care data received by doctors from the patient’s digital medical devices;

VinciLabs mobile app: the onboarding “Mission, Vision, Values”, “Blood pressure” and “Customized Standalone Application” sections.

  • Śpiewnik Wywroty Flutter mobile app allows its users to dive into the music world with more than 25,000 guitar songs and ukulele arrangements;

Wywroty Songbook Flutter mobile app: “Start”, “Search” and “Popular” pages.

  • SwishBOOM Flutter mobile app ensures safe and sound cooperation between the children’s families and babysitters;
  • pingNpay is a micropayment Flutter mobile app. It makes certain money transfers encrypted and well-secured throughout the entire money transfer process.

pingNpay mobile app: “Home”, the onboarding page “Pay” and “Scan QR Code” pages.

Consequently, our Cases page, describing challenges and solutions, may be used as an auxiliary means of getting trained for a job interview.

Where to hire Flutter developers

A Flutter engineer can be hired as an in-house team player. There are likewise Flutter jobs remote offerings.

So, a Flutter developer can be applied as: a freelance programmer, a team player of the outstaffing model, a software engineer in the dedicated team.

More to the Pros and cons of dedicated teams for mobile app development you can read in our Blog section.

Having chosen a model of how to get the mobile app crafted, it is necessary to pick up one particular dedicated team to fulfill the project.

It is possible to search for an appropriate vendor on a number of B2B platforms, such as TopTal and Upwork.

Visiting the software implementation company’s website and tracking down the rate scores, alongside with previously received clients’ reviews, will give you an idea of the company’s business image.

The websites like G2 and Clutch largely represent the aforementioned data.

It’s up to a business owner to decide on any of these cooperation options, depending on the: goals to achieve, project scale, time to project launch deadline, and money to pay off.

Salary
Flutter developers’ hourly rate varies geographically. Depending on the programmer’s qualification level — junior, middle, senior — and type of employment, the average numbers are the following can vary from: Eastern Europe $40–60 and USA $100–200.

The rate differ by type of employment, and hands-on experience.

Summary

TBR Group is a Ukrainian-based software development company. We specialize in app development with Flutter and Dart.

Template generation with Mason : TBR Group experience

1. Template Generation in Flutter.

Code generation allows you to speed up and make the development more convenient by generating ready-made pieces of a code.

This can be used to preset the architecture of an application, for example. If you want to use the wedge architecture pattern, then you will have to spend a lot of time creating all the folders and files.

Template generation will save you this time and enable you to jump right into the development with a quick start.

Also, template generation helps not only with the architecture setup, but also speeds up the development itself.

For example, we used template generation to automatically create repositories to save time and make developers create unit tests for their code, since our template, together with the repository, creates a template with tests for this repository in the test directory.

There are a large number of approaches to generating templates in Flutter, we chose Mason package, because it is the most popular, constantly developing and improving package, which also has its own hub containing bricks (templates) that can be used with this package.

2. About Mason package

Mason is a Flutter code generation tool that helps developers create reusable code blocks, called “bricks”, for their Flutter projects.

These bricks can contain any type of code, from UI elements to business logic, and can be easily imported into any Flutter project using the Mason command line interface (CLI).

One of the main benefits of using Mason is that it allows developers to easily share their code with others, making it easier for teams to collaborate and reuse the code.

Additionally, Mason makes it easy to create and manage code templates, which can save developers a lot of time and effort when starting new projects or adding new features to existing ones.

Using Mason and the Brickhub can provide a number of benefits for Flutter developers, including:

  • Time saving: By using reusable bricks, developers can save a lot of time and effort when starting new projects or adding new features to existing ones.
  • Improved collaboration: Mason makes it easy to share bricks with others, which can improve collaboration within a team and make it easier to reuse code.
  • Consistency: Using a common set of bricks can help to ensure that projects have a consistent look and feel, which can be especially useful for larger projects or teams.
  • Increased efficiency: By using Mason, developers can focus on more important aspects of their projects, rather than spending time writing a boilerplate code.

Overall, Mason and the Brickhub provide a powerful tool for Flutter developers looking to save time and improve their workflow. Whether you’re a seasoned developer or just starting out, Mason can help you create high-quality, reusable code for your Flutter projects.

3. How to install Mason

Official documentation recommend installing mason_cli from pub.dev

# 🎯 Activate from https://pub.dev
dart pub global activate mason_cli

Alternatively, mason_cli can be installed via homebrew

# 🍺 Install from https://brew.sh
brew tap felangel/mason
brew install mason

Once you have successfully installed the mason_cli you can verify your setup by running the mason command in your terminal. If mason_cli was installed correctly, you should see something similar to the following output:

🧱 mason • lay the foundation!
Usage: mason <command> [arguments]
Global options:
-h, --help Print this usage information.
--version Print the current version.
Available commands: ...

4. How to install Mason

We will describe how to create your own break using as example our simple_repository brick.

Use this command to create the new brick:

mason new simple_repositoty

It will create a new, custom brick template in the current working directory.

5. Detail

It should generate such file structure:

├── CHANGELOG.md
├── LICENSE
├── README.md
├── __brick__
└── brick.yaml

The brick.yaml file is a manifest which contains metadata for the current brick. The newly generated brick.yaml should look something like:

name: simple_repository
description: Brick for the simple creating repositories and tests for them.
repository: https://github.com/TBR-Group-software/simple_bricks/tree/main/bricks/simple_repository
version: 0.1.0+2
environment:
mason: ">=0.1.0-dev.26 <0.1.0"
vars:
repository_name:
type: string
description: Repository Name
default: Dash
prompt: What is your repository name?

The __brick__ directory contains the template for your brick. Any files, directories within the __brick__ will be generated when the brick is used via mason make.

In the example brick, our __brick__ directory contains a such files structure:

├── __brick__
│ ├── lib
│ │ ├── {{repository_name.snakeCase()}}
│ │ │ ├── {{repository_name.snakeCase()}}_repository
│ │ │ │ └──{{repository_name.snakeCase()}}
_repository.dart
│ │ │ └──api_{{repository_name.snakeCase()}}
_repository
│ │ │ └── api_{{repository_name.snakeCase()}}
_repository
│ │ └── {{repository_name.snakeCase()}}.dart
│ ├── test
│ │ └── repositories
│ │ └── {{repository_name.snakeCase()}}
_repository_test.dart
└── └──

Templates currently support only Mustache syntax, we will create our template using it.

Mason supports a handful of built-in lambdas that can help with customizing generated code:

NameExampleShorthand SyntaxFull Syntax
camelCasehelloWorld{{variable.camel
Case()}}
{{#camelCase}}{{varia
ble}}{{/camelCase}}
constantCaseHELLO_WORLD{{variable.constant
Case()}}
{{#constantCase}}{{vari
able}}{{/constantCase}}
dotCasehello.world{{variable.dot
Case()}}
{{#dotCase}}{{variable}}
{{/dotCase}}
headerCaseHello-World{{variable.header
Case()}}
{{#headerCase}}{{vari
able}}
{{/headerCase}}
lowerCasehello world{{variable.header
Case()}}
{{#lowerCase}}{{variable}}
{{/lowerCase}}
mustacheCase{{ Hello World }}{{variable.mustache
Case()}}
{{#mustacheCase}}{{variable}}{{/mustacheCase}}
pascalCaseHelloWorld{{variable.pascal
Case()}}
{{#pascalCase}}{{variable}}
{{/pascalCase}}
paramCasehello-world{{variable.param
Case()}}
{{#paramCase}}
{{variable}}{{/param
Case}}
pathCasehello/world{{variable.pathCase()
}}
{{#pathCase}}
{{variable}}{{/path
Case}}
sentenceCaseHello world{{variable.sentence
Case()}}
{{#sentenceCase}}{{variable}}{{/sentenceCase}}
snakeCasehello_world{{variable.snake
Case()}}
{{#snakeCase}}
{{variable}}
{{/snakeCase}}
titleCaseHello World{{variable.titleCase()}}{{#titleCase}}
{{variable}}{{/titleCase}}
upper CaseHELLO WORLD{{variable.upper
Case()}}
{{#upperCase}}
{{variable}}{{/upperCase}}

{{repository_name.snakeCase()}}_repository.dart file:

abstract class {{repository_name.pascalCase()}}Repository {}

{{repository_name.snakeCase()}}_repository.dart file:

/// {@template api_{{repository_name.snakeCase()}}repository} /// [{{repository_name.pascalCase()}}Repository] /// {@endtemplate} 
class Api{{repository_name.pascalCase()}}Repository extends {{repository_name.pascalCase()}}Repository { /// {@macro api{{repository_name.snakeCase()}}_repository} 
}

{{repository_name.snakeCase()}}.dart file:

export 
'api_{{repository_name.snakeCase()}}_repository/api_{{repository_name.snakeCase()}}_repository.dart';
export
'{{repository_name.snakeCase()}}_repository/{{repository_name.snakeCase()}}_repository.dart';

{{repository_name.snakeCase()}}_repository_test.dart file:

import 'package:flutter_test/flutter_test.dart';

void main() {
group("Testing {{repository_name.pascalCase()}} Repository", () {
//TODO: implement the tests

setUp(() {});
test("Test method", () {});
});
}

6. How to publish brick to the Brickhub

To publish a brick to the Brickhub using Mason, you will first need to sign up for an account on the Brickhub website.

To do this, you will need to request access to the site, and then follow the instructions in the email invite to sign up and verify your email.

Once you have an account, you can log in to the Brickhub using the mason login command.

This will prompt you to enter your email and password, and once you have successfully logged in, you will be ready to publish your brick. To publish a brick, you will use the mason publish command, followed by the –directory option and the path to your brick’s directory.

For example:

mason publish --directory ./my_brick

This will start the process of publishing your brick to the Brickhub.
You will be prompted to confirm that you want to publish the brick, and once you confirm, the brick will be bundled and published to the Brickhub.

It’s important to note that you will need to be logged in to an account in order to publish a brick to the Brickhub.

Overall, publishing a brick to the Brickhub is a straightforward process that can be accomplished quickly and easily using the Mason CLI.
By making your bricks available on the Brickhub, you can share them with other Flutter developers and save time and effort when working on your projects.

7. Hooks

Mason supports Custom Script Execution so called hooks.

These hooks are defined in the application’s configuration and can be executed before or after certain events occur, such as the generation of code or the rendering of templates.

Currently, Mason only supports hooks written in the Dart programming language.

These hooks are defined in the hooks directory at the root of the brick and must contain a run method that accepts a HookContext from the package:mason/mason.dart library

There are two types of hooks available in Mason: pre_gen and post_gen, which are executed immediately before and after the generation step, respectively.

These hooks can be used to perform tasks such as logging, modifying the brick variables, or interacting with the logger.

For example, hooks for running dart formatting.

Future<void> _runDartFormat(HookContext context) async {
final formatProgress = 
context.logger.progress('Running "dart format ."');
await Process.run('dart', ['format', '.']);
formatProgress.complete();
}

Future<void> _runDartFix(HookContext context) async {
final formatProgress = 
context.logger.progress('Running "dart fix --apply"');
await Process.run('dart', ['fix', '--apply']);
formatProgress.complete();
}

8. What benefits we have got

Using Mason templates has provided a number of benefits for our development process, including:

  • Faster development: By generating ready-made pieces of code, we were able to speed up development and jump right into creating new features or working on existing ones. This saved us a lot of time and allowed us to focus on more important tasks.
  • More structured code: Using Mason templates helped us create a more structured and organized codebase, which made it easier to maintain and scale our projects. We were able to create a consistent structure for our code, which made it easier for new developers to understand and work with.
  • Forced developers to write unit tests: One of the benefits of using Mason templates is that they can be customized to include certain requirements or best practices. In our case, we used templates to force developers to write unit tests for their code, which helped us to ensure that our code was well-tested and of high quality.

Overall, using Mason templates has helped us to improve the efficiency and quality of our development process, and has made it easier for us to create and maintain high-quality code for our Flutter projects.

Native vs cross-platform app development: what to choose in 2023?

There are questions a mobile app engineer encounters each and every time and has to query about before starting off to write any software product.

How to transform a given idea into a viable market product?
Would it be far better to opt for a cross-platform framework instead of picking up the native development scheme?

For a business owner, there is a dilemma as well. How to create a competitive product in the most economically profitable and time-saving way?

It goes without saying that in either case, the product at the outlet must be of a high programming standard.

So, native vs cross-platform? As each of them can be used to serve different objectives. The competition is tough.

And in the “Interest over time” search queries in Google Trends, cross-platform development has gained popularity over the native model.

Google Trends “Explore what the world is searching” page.

Just as well, both Flutter and React Native have ranked at the top among the most frequently used libraries and frameworks in 2023 in Statista.

Is there a real dilemma native vs cross-platform development?

As both approaches do have their benefits and limitations, we would like to do an overview of these models.

Mobile application development falls into:

  • web
  • native
  • cross-platform / platform-independent:

– hybrid

– native.

Native implies building different mobile app versions for the iOS operating system and Android platform. So:

  • iOS supports Swift and Objective-C as the programming languages;
  • whereas those intended for native Android are based on Java or Kotlin.

The cross-platform approach in mobile programming includes a set of technological solutions as well. Such as:
The Ionic and Cordova frameworks belong to the hybrid cross-platform mobile application development.
React Native, Native Script and Flutter represent the native approach.

Let’s say a few words about web mobile solutions. The apps are coded with HTML, CSS, and JavaScript programming language.

Without having to be installed, the apps are available on all platforms and run directly in browsers of mobile devices. This option is a perfect choice for simple software products.

Native approach

With the totally distinguishable native code base and distinctive UI design elements, these applications demonstrate the highest efficiency in operation.

Advantages:

  • high performance;
  • better user interfaces;
  • an ability to use all the features of mobile devices;
  • intuitive user interface and user experience.

Disadvantages:

  • a pricier solution;
  • posing more challenges in communication and collaboration in teams;
  • hardly going to help implement the same logic of both iOS and Android apps.

Cross-platform/platform-independent approach

Advantages:

  • economically profitable/cost-effective;
  • shareable code base;
  • shared logic;
  • possibly similar UI and user experience;

Disadvantages:

  • possible performance issues;
  • a bit low operational flexibility;
  • UI inconsistencies, etc.

In native cross-platform app development, Flutter and Dart bundle plays a major role.

Flutter offers different models, tools, and patterns for implementing the logic of an app and delivering the relevance of the inquiries.

Hence, the stakeholders are welcome to take an advantage of:

  • a rapid market period;
  • a simpler process of the MVP creation;
  • a payment compensation plan;
  • utilizing in multiple market niches;
  • a shareable code base
  • a low learning curve for a software engineer.

In conclusion

You should choose a native approach if the application is a complex and resource-intensive one, intended to perform heavy calculations. In this case, you should be prepared for an obviously long time-market period, and for high development costs.

You can also aim to

  • relatively quickly, create a stable MVP version of the product;
  • get a scalable application;
  • obtain one shareable code-base;
  • save on expenses and time.

In this scenario, you should go for a native / hybrid cross-platform option.

For entrepreneurs, it would be advisable to opt for a dedicated development team to get the mobile app crafted. We have an article: “Pros and cons of dedicated teams for mobile app development” articulating this topic.

If you feel like being provided with extra details on this relatively new, however famous tool set, you are invited to visit our Blog page.

Cross-platform mobile app development with Flutter: TBR Group’s experience

TBR Group has focused on cross-platform framework programming, rather than picking up an option of native development.

Having completed software implementations with Flutter and Dart, we feel certain to highlight the benefits being offered by the native cross-platform app development.

We have applied Flutter cross-platform to program mobile apps for various intended purposes and market sectors. Such as

  • baby care babymates;
  • babysitting network Swishboom;
  • veterinary Vetsie;
  • digital payment pingNpay;
  • online medicine VinciLabs;
  • productivity/work Neural Reader;
  • music Wywroty Songbook.

Below goes a description of some of them.

VinciLabs is a healthcare mobile app built with Flutter.
The app has been designed to transfer data received from the patient’s devices to the health care providers.

The devices could range as follows:

  • a pulse oximeter;
  • a blood glucose monitor;
  • a blood pressure measurer;
  • other similar devices.

Hence, after being received, medical records are kept and elaborated by the health care organization.

VinciLabs mobile app: “Blood Pressure”, “Measure” and “Take a picture” pages.

VinciLabs enables users to

  • send a photo with measurements;
  • proceed with the optical character recognition option;
  • organize statistical data for a display in the form of charts and graphs;
  • notify the doctors about higher or lower-than-normal indicators;
  • insert indicators manually;
  • create a user’s profile;
  • get help in the FAQ section.

Vetsie is a veterinary application designed in 2 versions:

  • for the pet parent;
  • for the veterinary staff.

Vetsie mobile app: “Book Consultation”, “Book and Pay” and “Add Vets” pages.

Users can favor from the following functionalities:

  • user authentication;
  • video and audio calls;
  • push notifications;
  • chat, text, and voice messages;
  • subscription;
  • payment opportunities;
  • history of interactions;
  • etc.

pingNpay relates to the sphere of digital payments. Designed for all those willing to process the smallest donations, it allows up to £20 payment in one go.

As blockchain technology has been implemented, these small online payments have been made profitably available to users without increasing security risks.

pingNpay mobile app: “Home” and “Home/History” pages.

pingNpay makes it possible for users to:

  • have a quick onboarding;
  • choose QR codes for making payments;
  • have a list of contacts;
  • store the transaction history;
  • indicate the payment due date;
  • work out payment requests.

babymates is a mobile application designed for dads on how to be a father in the most exciting way. babymates is built to digitally connect dads with the service created.

There is user authentication, and it is possible to set up a member profile and join the community.

Babymates mobile app: “Start” and “Chat” pages.

The users can take advantage of the following features:

  • user’s profile;
  • building a personal network;
  • sharing photos;
  • online chat;
  • map integration;
  • events;
  • contact form;

The dad joke generator section will ensure a good mood for the rest of the day.

Wywroty Śpiewnik is a musical application, containing around 25,000 guitar and ukulele arrangements of Polish and internationally famous songs.

Wywroty Śpiewnik mobile app: “Start”, “Lyrics and notes of the song” and “Popular” pages.

Wywroty Śpiewnik allows users to:

  • authorize into the user account via Facebook, Google account, or Apple ID credentials;
  • create a list of favorite songs;
  • search for singles;
  • active Day/Night mode;
  • benefit from Google Ads.

In every case, TBR Group aimed to ensure a smooth workflow of the app for each user. So that the users could feel comfortable running the interface alongside the variety of functionalities.

You are invited to our Case study page to obtain more details on the peculiarities and challenges we had to overcome.

Summary

TBR Group is a Ukrainian software development company. Our activity is centered around platform-independent mobile app programming with Flutter and Dart.

We have chosen Flutter cross-platform because it allows creating fast, reliable, and scalable and powerful software products, with a stable MVP version of the application.

Our track of implemented mobile solutions can exemplify the potential of the technology, as well as our expertise in it.

You are welcome to get connected to TBR Group and to communicate the objectives of your existing or future product with our team. Feel free to contact us at your convenience and in any timely manner of yours.

Unlock the secrets of mastering the BLoC pattern in Flutter with TBR Group’s expertise.

MVC, MVP, MVVM, Vanilla, Scoped Model, and BLoC Flutter… These are the architectural patterns, the models, which appear to be rather popular among software engineers nowadays.

But what type of mobile app structural organization to choose and which approach to the architecture should be applied?

This article will be centered around the practical approach of BLoC pattern implementation to the mobile crypto app niche.

The ABC of Flutter BLoC pattern

Being a declarative framework, Flutter implies using one of the state management approaches to build the UI and therefore reflect the current state of the application.

Flutter BLoC can be specified as a state management system belonging to the family of stream/observable-based patterns.

The main advantage of state management: it helps the developer to separate business logic from the presentation layer. It makes the codebase more clear, reusable and indepenend.

Key pros of BLoC over other state management models:

1. It’s a very popular state management system, and, as a result, there is big amount of live projects and a big dev community who is willing to share their experience.

2. It comes with easy-to-understand and well-detailed documentation. It contains lot’s of examples helpful to kick-start with BLoC.

3. Frequent updates and regular support from the authors.

4. It has the extension for Android Studion and VSCode that speed up the development process

We’re going to expand the topic, by articulating more practical aspects of this technology.

Using Flutter BloC for developing mobile apps: TBR Group’s case study

You can freely find the bitty official documentation and tons of info concerning the topic on the web.

But alongside such a diversity of information, there’s a lack of real case studies and Flutter BLoC examples.

We are going to demonstrate the BLoC pattern in action on the example of a single use case — a Crypto Aggregator mobile app.

Crypto Aggregator is a mobile app designed to browse through cryptocurrencies and market data.

The users can check how the data is changing with the help of the line and pie charts.

The Crypto Aggregator’s settings screen provides its users with a set of features allowing them to switch:

  • the fiat currency;
  • between the night and day mode;
  • the language of the application.

The Crypto Aggregator mobile app: the “Settings” page.

While implementing the BLoC pattern, the first step is to determine the states and events classes.

State implies the output data. Actually, the state class will represent what a user will see on the screen.

Event is the input data for the BLoC. It can act either as a trigger to start loading data. Or it can represent any actions performed by the user, such as pressing a button, a text input, a page scrolling, and so on.

The “state” class describes such finals as status, fiatCurrency, themeType, and error.

The “state” class describes such finals as status, fiatCurrency, themeType, and error.

@immutable
class SettingsState {
 final BlocStatus status;
 final String? fiatCurrency;
 final ThemeType? themeType;
 final Object? error;
 const SettingsState(
   this.status, {
   this.fiatCurrency,
   this.themeType,
   this.error,
 });
}
 
enum ThemeType {
 day,
 night,
}

Respectively:

  • status can be in a “Loading”, “Loaded” or “Error” state in order to show the loader, the loaded data, or an error message on the screen.
  • fiatCurrency is the currency selected by users from the dialog. The monetary value of the cryptocurrencies is shown according to that parameter.
  • themeType is the enum presented with 2 values: “day” and “night”. Changing this parameter updates the dark/light mode of the app.
  • error implies the data used to show the error message on the screen. Typically, it is merely a string and in case no errors occur, the field remains null.

As the language change with BLoC is covered by the “easy_localization” package, we have not handled it in the current implementation.

The “event” is shown in the picture below.

@immutable
@freezed
abstract class SettingsEvent with _$SettingsEvent {
 const SettingsEvent._();
 
 const factory SettingsEvent.getFiatCurrency() = GetFiatCurrencyEvent;
 
 const factory SettingsEvent.selectFiatCurrency(String fiatCurrency) =
     SelectFiatCurrencyEvent;
 const factory SettingsEvent.getTheme() = GetThemeEvent;
 
 const factory SettingsEvent.selectTheme(ThemeType themeType) = SelectThemeEvent;
}

The event is built with help of the “freezed” package. There are:

  • getFiatCurrency renders an event to load the currently selected currency.
  • selectFiatCurrency stands for an event that is called when a user selects a particular currency.
  • getTheme indicates an event to load the currently selected theme.
  • selectTheme refers to the event called when a user selects a particular theme.

As soon as the event and state are completed, we continue with the Settings BLoC class implementation as displayed on the screenshot.

class SettingsBloc extends Bloc<SettingsEvent, SettingsState> {
 final GetFiatCurrencyUseCase _getFiatCurrencyUseCase;
 final SelectFiatCurrencyUseCase _selectFiatCurrencyUseCase;
 final GetThemeUseCase _getThemeUseCase;
 final SelectThemeUseCase _selectThemeUseCase;

As the project is built with Clean Architecture, BLoC contains four use cases for each action.

 SettingsBloc(this._getFiatCurrencyUseCase, this._selectFiatCurrencyUseCase,
     this._getThemeUseCase, this._selectThemeUseCase)
     : super(
         const SettingsState(
           BlocStatus.Loading,
         ),
       ) {
   on<GetFiatCurrencyEvent>(_getFiatCurrency);
   on<SelectFiatCurrencyEvent>(_selectFiatCurrency);
   on<GetThemeEvent>(_getTheme);
   on<SelectThemeEvent>(_selectTheme);
 }

The BLoC constructor contains the initialization of the use cases and the initial state. The initial state can work as loading, which is the first state the users encounter, and the event handlers, which are extracted in separate methods.

Future<void> _getFiatCurrency(
   GetFiatCurrencyEvent event,
   Emitter<SettingsState> emit,

 ) async {
   emit(_loadingState());
   emit(await _getFiatCurrencyUseCase()
       .then(
         (String fiatCurrency) => SettingsState(
           BlocStatus.Loaded,

           fiatCurrency: fiatCurrency,

           themeType: state.themeType,

         ),

       )
       .catchError(_onError));
 }

Let’s take a look at the callback triggered on the GetFiatCurrency event. Initially, we emit the loading state to show the loader indicator. Just after the data is loaded, the new state appears. It contains the newly loaded fiat currency as well as the current theme type. To handle the errors, we catch them by means of using the _onError method.

Future<void> _selectFiatCurrency(
   SelectFiatCurrencyEvent event,
   Emitter<SettingsState> emit,
 ) async {
   emit(_loadingState());
   emit(await _selectFiatCurrencyUseCase(event.fiatCurrency)
       .then(
         (String fiatCurrency) => SettingsState(
           BlocStatus.Loaded,
           fiatCurrency: event.fiatCurrency,
           themeType: state.themeType,
         ),
       )
       .catchError(_onError));
 }

Now, let’s explore the callback triggered by the SelectFiatCurrency event. The algorithm is mostly the same as the on “_getFiatCurrency” method. The only difference lies in the fact that the fiat currency on the loaded state is received from the event.

SettingsState _loadingState() => SettingsState(BlocStatus.Loading,
     fiatCurrency: state.fiatCurrency, themeType: state.themeType);
 
 Future<SettingsState> _onError(Object error) async => SettingsState(
       BlocStatus.Error,
       fiatCurrency: state.fiatCurrency,
       themeType: state.themeType,
       error: error,
     );

_loadingState and _onError methods help to simply create the error and respectively loading states.

The last step is to integrate the SettingsBloc into the app screen. To meet such a purpose, flutter_bloc provides a particular list of widgets.

The default widget is BlocBuilder. However, we use BlocSelector on this screen, since it allows us to focus on particular fields. Thus, if a user updates the fiat currency, there is no reason to rebuild the Day/Night mode switcher.

At first, comes the BLoC initialization.

 final SettingsBloc settingsBloc = di.sl.get();

 
 @override
 void initState() {
   super.initState();
   settingsBloc.add(const SettingsEvent.getFiatCurrency());
 }

Before the page is built, we need to add SettingsEvent.getFiatCurrency to load the selected fiat currency. In the project, we use get_it for the BLoC dependency injection, but the more usual way is to use BlocProvider.

Next comes the fiat currency switcher.

GestureDetector(
   onTap: () async {
     final String? selectedCurrency =
         await showBottomSheetCurrencySelector(
             context: context);
     if (selectedCurrency != null) {
       settingsBloc.add(
           SettingsEvent.selectFiatCurrency(selectedCurrency));
     }
   },
   child: Row(
     children: <Widget>[
       BlocSelector<SettingsBloc, SettingsState, String>(
         bloc: settingsBloc,
         selector: (SettingsState state) =>
             state.fiatCurrency ?? '-',
         builder: (BuildContext context, String fiatCurrency) {
           return Text(
             fiatCurrency.toString().toUpperCase(),
             style: TextStyles.overlay3Bold14,
           );
         },
       ),
       SizedBox(width: 4.w),
       const ChevronIcon(),
     ],
   ),
 ),

As soon as a user selects the currency from the bottom sheet, we need to send it to the BLoC wrapped with the SettingEvent.selectFiatCurrency event.

On the selector method, we are able to receive the required data. If the string returned from the selector method changes, everything inside the builder method is rebuilt.

And the final is the Day/Night mode switcher.

 BlocSelector<SettingsBloc, SettingsState, ThemeType?>(
   bloc: settingsBloc,
   selector: (SettingsState state) => state.themeType,
   builder: (BuildContext context, ThemeType? themeType) {
     return GestureDetector(
       onTap: () {
         if (themeType == ThemeType.night) {
           settingsBloc.add(
               const SettingsEvent.selectTheme(ThemeType.day));
         } else {
           settingsBloc.add(
               const SettingsEvent.selectTheme(ThemeType.night));
         }
       },
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: <Widget>[
           Text(
             themeType == ThemeType.night
                 ? 'switch_to_day_mode'.tr()
                 : 'switch_to_night_mode'.tr(),
             style: TextStyles.semiBold14
                 .copyWith(color: Theme.of(context).hintColor),
           ),
           Icon(
             themeType == ThemeType.night
                 ? CupertinoIcons.sun_max
                 : CupertinoIcons.moon,
             color: Theme.of(context).hintColor,
           )
         ],
       ),
     );
   },
 ),

It works in the same simple way as the fiat currency switcher does. On tap, BLoC updates the state with the new themeType that updates the corresponding text and icon.

The following screenshots demonstrate the UI updates. There come selecting fiat currency and updating the color mode.

The Crypto Aggregator mobile app: “Selecting fiat currency” option.

The Crypto Aggregator mobile app: “Updating the color mode” option.

The Crypto Aggregator project is based on Clean Architecture and the BLoC state management. You can check our GitHub repository, where extra details on the topic have been given out.

Flutter cross-platform has proved to be applicable for crafting mobile apps for meeting various purposes.

You can get more insights on this topic from our articles:
The fundamentals of Flutter & Dart, and Why choose Flutter for mobile app development in 2023?

TBR Group has carried out such software implementations as:
VinciLabs — a platform for providing digital medical solutions for healthcare entities;
SwishBOOM and Babymates are child care mobile apps;
pingNpay will describe the digital payment options based on blockchain technology;
Wywroty Śpiewnik — a musical mobile app — will make you privy to the Polish guitar songs’ performance.

A complete list of the designed mobile apps is presented on our Case Study page.

Summary

Operating in the sphere of platform-independent mobile app engineering, TBR Group targets Flutter app development.

Web, iOS, and Android mobile app developers are welcome to get in touch with TBR Group.

Whether you are an experienced engineer, a junior coder, or an enterprise willing to establish your presence online — feel free to contact TBR Group and articulate any concept directly with the development team.

Unlock the secrets of building a babysitter mobile app development: insights from TBR Group

The baby caring field could possibly win an award for being one of the most rapidly developing domains.

The overall baby care products market size worldwide is expected to rise from $67.35 billion in 2020 up to $88.72 by the year 2026.

But not only an impressive range of baby care products sustains a market position. Combined with the baby caring industry, internet technologies will just as well make an excellent value.

Provided below, there is a list of 5 childcare mobile applications to serve as an example.

Tinybeans

Tinybeans App Store / Google Play mobile app: “Photo Editor”, “Family” and “Ideas” pages.

The application makes it possible to create a photo journal, just as to share pictures with family and friends.

Bubble

Bubble App Store / Google Play mobile app: “Favorite Sisters”, “Latest Reviews” and “Your booking is active” pages.

Bubble focuses on providing babysitting services handled by certified caregivers.

Zum

Zum App Store / Google Play mobile app: “Zum”, “Real-time tracking” and “Upcoming Rides” pages.

Zum is a carpooling application, allowing parents to safely book a car trip for their children. The app features a calendar and a photo-sharing option.

Cubo AI

Cubo AI App Store / Google Play mobile app: “Home”, “Sleep Analytics” and “Live Night Vision” pages.

Cubo AI is an artificial intelligence-driven app. The application is supposed to be exploited together with the Cubo AI baby Camera. It embeds the features such as:

  • the child’s face detection;
  • sending an alert on the dangerous zone approach;
  • audio/video chatting options;
  • heat and humidity sensor.

Cozi Family Organizer

Cozi Family Organizer App Store / Google Play mobile app: “Home”, “Calendar” and “Lists” pages.

This family organizer app allows families to create a personalized list of the child’s characteristics. So any medical or sensitive data the caregiver should be aware of is accurately specified.

In this article, you will find out about the peculiarities of how to build a baby care mobile app — an overriding factor to succeed in the market.

Why baby care app good for your business

As a much-needed tool for expanding an online marketing presence, cross-platform mobile app development is in a great demand.

Unless digitalized, almost any kind of business will avoid being easily geared to the contemporary market opportunities offered by the technological pace.

In practical terms, that is the entrepreneur’s first priority, to create a mobile application of sufficient quality to successfully deliver the baby caring services offered by the company.

And if you tend to stick with the idea of scaling up your baby caring business by going online — you are on the right track.
Essential features in baby care app

Two variants of mobile childcare apps are normally available. One of the applications is designed for a family, and the other — for a care provider.

A babysitting app intended for families may contain the following set of functionalities:

  • user authentication;
  • family area;
  • family verification;
  • routines;
  • medical records;
  • milestone charts;
  • information panel;
  • babysitters’ profiles;
  • booking a service;
  • subscription and payment options;
  • chat;
  • text and voice messages;
  • multiple languages support;
  • search;
  • google map integration;
  • push notifications;
  • track record;
  • review and ratings;
  • network;
  • media files sharing;
  • social events.

The application used by the care providers implies:

  • user authentication;
  • caregiver/babysitter area;
  • caregiver/babysitter verification;
  • administrative dashboard;
  • families’ profiles;
  • text and voice messages;
  • multiple languages support;
  • search;
  • google map integration;
  • push notifications;
  • track record;
  • working history;
  • review and ratings;
  • special notes;
  • media files sharing;
  • social events;
  • etc.

The admin panel can be integrated just as well. This way, a system administrator will monitor the entire workflow, collect analytical data, and make sure that the entire process is accurately run.

Steps to build a baby care app

You might already be interested in building an app for daycares to extend your market share.

So, how is the best babysitting app crafted?

For crafting your unique pet care app, your first priority is to denote a general, step-by-step procedure.

The following stages are considered fundamental in any kind of product evolution. A babysitting app is not an exception in this case.
Stages of childcare app development.

They are:

  • idea;
  • discovery;
  • business analysis;
  • design;
  • software implementation;
  • testing;
  • launch;
  • post-launch.

Flicking through the pages of a variety of contemporary information sources will not only help to get the objectives right, but it may give you heart to proceed further on your project just as well.

With this in mind, you can get that unique idea of your best babysitter app as well as perform the product discovery stage.

Business analysis will make certain that you do identify the company’s essential needs. Besides, such an investigation will determine solutions to any business challenges. It could be a daft mistake to either underestimate or skip this requisite start-up phase of an app for daycares development.

Making a competitive and unique design will let your idea gain a concept of its initial look as a mobile application.

The user interface (UI) and the user experience (UX) will largely depend on the app’s graphical quality as well as on the coding itself.

The stage of mobile software development is a demanding and time-consuming period.

It includes applying the native, web, and cross-platform approaches, each based on a different technological stack.

You are welcome to visit our Blog, where you can look through a set of various articles covering multiple topics on mobile app development. Our blog article The fundamentals of Flutter & Dart explains the basics of these coding technics. And Why choose Flutter for mobile app development in 2023? expands the scope of the topic even further.

The testing stage is the next level you ascend in babysitting app implementation. What is really nice about this is the possibility to witness an application’s performance prior to its official launching. The newly crafted application is expected to perform as planned and any bugs spotted should be fixed.

And here is the launch — the most exciting part of the entire product development cycle. Now, your is available in the App Store and Google Play and your customers can happily download it to their mobile devices.

The clock is ticking, and you can observe the number of app downloads possibly increasing. The post-launch period is underway. You need to constantly pay attention to the app’s performance. Should any failures appear, taking action immediately will be crucial. It allows getting excellent reviews from the customers worldwide and keeps the software base updated. This way, chances are the application can probably come into widespread use.

The app is running and consequently, the efforts of the entire team are paid off in both direct and figurative meaning. So, how much does it cost to produce the best babysitter app?

Cost of babysitting app development

The technical requirements will substantiate the scope of work to be done and configure the team to engage.

Typically, a team of a few specialists can build a babysitting app, where there is at least:

  • a project manager (PM);
  • a designer;
  • a team of software developers/engineers;
  • a quality assurance specialist (QA tester).

In mobile application development, there is an hourly wage rate along with a fixed price payment.

The location of the working team matters as well. The price of mobile app development will vary in Europe, India, and the USA.

Respectively, in an hourly wage rate model, a business owner can calculate the cost of the project by summing up the following figures:

  • the number of working hours each team member spends on the project realization;
  • the cost of each working hour for a particular team specialist;
  • the project complexity;
  • possible overheads.

In any case, you can get the most accurate answer only after the developing team proves the estimate of the project.

Get in touch with the TBR Group software developing agency and receive answers to all of your questions.

Swishboom mobile app for babysitting services

Swishboom — App Store / Google Play — is a cross-platform babysitting mobile application. The app helps families look for and choose either a babysitter or a care provider.

Swishboom App Store / Google Play mobile app: “Your Job”, “How it works” and “Find A Sister” pages.

The app offers two user interfaces and consequently a bit different set of functionalities for each of the versions.

One version of the app serves the families to book babysitting services, and the other works on the care provider’s side.

Being a feature-rich application, Swishboom offers both essential and additional functionality. It ensures a stable performance and a happy user experience.

The verification feature of both the families and the care providers is essential. It makes the cooperation sustainable and the workflow passes most efficiently.

The families can pay the caregivers via Venmo or cash. Whereas, the subscription feature is realized via the RevenueCat service.

You can discover more about the challenges and solutions, key features, and the general project overview in our Swishboom case study.

Created with the Flutter framework and the Dart programming language, the app is targeting both mobile and Web operating devices.

Conclusion

As a mobile app developer, TBR Group uses Flutter and Dart bundle to deliver fast, the most natively sensed platform-independent mobile and web solutions.

TBR Group will suggest a solution on how to create the best babysitter app in the industry. Please, send any request via our contact us page. We will happily respond to any questions or inquiries submitted. Looking forward to hearing from you.

Flutter for building mobile app MVP: is the game
worth the candle?

Annual global mobile app consumer spending in the App Store and Google Play is projected to reach nearly $233 billion by 2026. It is going to hit a 76 percent expenditure increase when compared to 2021.

Offering a diversity of mobile applications, the app stores get to distribute them by category. Within each and every category, there are dozens of apps operating immensely dissimilar at times.

Therefore, a brand-new app should in fact be distinguishing to yield good results and bring something to the table.

Here comes an MVP. Hence, it is actually quite reasonable to get down to work by crafting an MVP version of the emerging product.

Setting up one’s own business does matter too much and could obviously become a real challenge at times.

In practical terms, in order to produce a product of high quality, you will need to make an effort.

An MVP — which stands for a minimal viable product — is a newly created market product that incorporates the minimum of most important features and targets to meet consumers’ needs in all the possibly relevant areas.

In this article, we are going to cover the basics of mobile app MVP creation. And why building an MVP mobile app in Flutter will definitely be a game that is worth the candle.

Why Use Flutter for MVP mobile app development

Chances are you have really heard of Flutter. It is a framework for building cross-platform mobile applications.

You must be familiar with such corporations as:

They did go for the Flutter-based MVPs before having the full version of the product successfully created.

The applications built with this framework can run on mobile, desktop, and web solutions. They are fast, productive, and flexible.

What else can make Flutter for mobile app MVP become a powerful tool for any kind of software programming works?

An open-source code base, inviting all those interested to the Flutter community, might be an attractive reason to think over. So, there are:

Flutter executes Dart. Unlike some other programming languages, Dart appears to be the one quite easily manageable.

Therefore, software specialists will seek a low learning curve in either mastering this language or improving the existing skills.

The article ”The fundamentals of Flutter & Dart” in our blog allows the reader to dive deeper into the domain.

Advantages of creating mobile app MVP with Flutter

Any stakeholder is expected to benefit significantly just from opting for Flutter in mobile app MVP.

You can learn about the tendencies in the mobile software domain in our article “Why choose Flutter for mobile app development in 2023?”.

Building MVP mobile app in Flutter will be suitable for crafting apps in various industries. Including, but not confined to :

  • music and audio;
  • parenting;
  • productivity;
  • artificial intelligence;
  • machine learning;
  • education/teaching;
  • medicine;
  • pet care.

And software engineers are enabled to expedite the MVP app creation due to:

  • the Just In Time compilation and a stateful Hot Reload;
  • a comprehensive set of functionalities combined with Flutter DevTools;
  • Flutter engine;
  • basic widget components;
  • Material design and Cupertino layouts;
  • dispensing with native elements, XML, and “JavaScript bridge”;
  • leveraging the Skia graphic engine;
  • Firebase integration;
  • Ahead Of Time compilation, ensuring the fast and smooth performance of the ready-made application;
  • GPU-accelerated API;
  • easily added software integrations.

Simplifying elaboration, Flutter for MVP allows business owners to:

  • create a sustainable MVP version of the product;
  • freely opt for various niches;
  • precisely allocate the project budget;
  • pick up a dedicated team or an out staff model with no need of hiring standalone Android and Apple teams;
  • add and implement special unique functionality;
  • integrate the 3rd party services and API;
  • EHR or sensitive data storage;
  • save on expenses;
  • reduce time to market period;
  • receive a natively felt, multi-platform and niche adaptive mobile apps;
  • build exclusively user-friendly mobile apps;
  • to bring in more investors.

Judging by the above, business owners and entrepreneurs can significantly maximize the chances of an early MVP delivery.

So by choosing Flutter for MVP development, they get not only a scalable product of high quality, but also push a project to a jump start.

TBR Group — an expert in building MVP mobile apps in Flutter

TBR Group is a Ukrainian Flutter cross-platform mobile app development company.

Having launched a number of projects in the efficient MVP versions, we considered maximizing the user experience by adding extended functionality.

A variety of technological decisions performed by TBR Group may serve as a confirmation of Flutter’s suitability for the MVP version.

Our team has implemented:

  • a verified network feature in the Swishboom mobile app;
  • deep-linking, branded QR codes, and a QR scanner, the blockchain technology in pingNpay;
  • support of various file formats and enhanced web article text extraction in Neural Reader;
  • the VMP version of Śpiewnik Wywroty was completed within 2 months and when the app proved to be a success, our team added new features;
  • an algorithm for scanning and analyzing data from the 3rd party devices was implemented in VinciLabs;

Our Cases page gives a detailed description of the jobs performed. We will look at just a few of them to showcase different niches Flutter is applicable to.

SwishBoom

Swishboom is an online spot for providing baby care services.

Swishboom mobile app: “How it works”, “Your Job” and the onboarding “Schedule your babysitters faster” pages.

The users can benefit from an additional range of features as well. Among them, there are:

  • contacts integration;
  • Google map integration;
  • push notifications;
  • promotional offering for AppStore;
  • personal or Swishboom care providers network;
  • posting an upcoming babysitter job offer;
  • claiming a babysitter job;
  • in-app purchases;
  • reviews and ratings.

Neural Reader

Neural Reader Most Natural TTS is a mobile application operating as a Text-To-Speech audio reader, and a Speech-To-Text live transcriber.

Neural Reader mobile app: “My Library”, “Dictation” and “Profile” pages.

The key features available for users are:

  • various types of import files;
  • audio reader and player;
  • audio/text conversion;
  • text transcription;
  • data storage;
  • dictation options;
  • voice selection;
  • language selection;
  • text size modification;
  • audio playback speed.

pingNpay

The pingNpay is a software solution for processing micropayments.

TBR Group used Amplify toolset kit and implemented the GraphQL connection with the AWS services, as well as added the Cognito user authentication.

pingNpay mobile app: “Home”, “Contacts” and “Receive” pages.

In the member area, a user can track down and utilize the following functionality:

  • Amplify Cognito authentication;
  • Amplify AppSync GraphQL communication;
  • branded QR codes;
  • a QR scanner;
  • app deep-linking;
  • push notification integration and handling;
  • encryption and decryption;
  • Native Share for QR codes and links;
  • a QR code on-device saving option.

pingNpay will soon be downloadable from the app stores.

VinciLabs

Vinci Labs is a mobile application created for medical organizations.

VinciLabs company is focused on providing a modular API solution to get the 3rd party digital medical devices integrated into particular software products or services.

VinciLabs mobile app – the onboarding “Mission, Vision, Values”, “EHR Data Storage and Analytics” and “Customized Standalone Application” sections.

Vinci Labs is responsible for:

  • the device updates;
  • sensitive data protection;
  • secure storing the EHR data.

All the above confirms that a bunch of technological decisions and functionalities could be implemented with the help of Flutter and Dart bundled together.

Summary

Flutter makes its way to truly becoming the best option to build an MVP mobile application due to its low cost, quick time to market, and scalability. It could be the right choice for a start-up as well.

Providing services to business entities of any scale, TBR Group has been mainly focused on Flutter development.

Whatever project size you may have, do not hesitate to contact us for getting it evaluated. We will render any assistance to you with any kind of concern, dilemma, or inquiry.

Top Flutter mobile app examples

Information technology spending on enterprise software worldwide has already been on the rise for a decade. In 2022, the expenditures in the market area were expected to reach $672 billion, arriving at even a higher number of $752 billion by the year 2023.

The Flutter framework, and respectively the Dart programming language, are among the leaders in mobile application development.

Chances are, you might have already posed a question to yourself:
How about creating a project built with Flutter?

  • Is Flutter suitable for a telehealth mobile data processing program?
  • Will an e-commerce or online babysitting application or even cryptocurrency software be run on mobile devices as well as their alternatives on desktop or web solutions?
  • Is Flutter suitable for an online social media application?

In meeting these challenges, Flutter and Dart bundled together have composed an ultimate solution for crafting cross-platform mobile applications.

Flutter app development ensures a platform-independent operation for the entire range of native, web, and desktop software applications.

The Best Flutter projects to copy

With the number of Flutter app examples considerably growing by now, their sophisticated diversity has been impressive.

Among Flutter projects are such giants as Abbey Road Studios, Google Pay, eBay, and Toyota.

Below, just a few of them exemplify the most popular Flutter hybrid apps. They are:

Reflectly

Falling under the category of health and fitness, Reflectly is an AI-powered personal journal app.

By helping users to cope with negative thoughts, the app aims to nourish a positive alignment and discover the science of how to feel comfortable and happy.

Reflectly App Store / Google Play mobile app: “Home screen”, “Progress” and “Amazing! What’s making your evening super awesome?” pages.

By offering users structured audio reflections, Reflectly ensures learning from the world’s major experts in the area. Thus, a user obtains tools as well as a mindset to improve health and state of mind, building the closest way to happiness — a merry spirit.

CryptoGraph

CryptoGraph is a cryptocurrency market application aiming to provide the user with all the essential data required for a successful crypto market engagement.

CryptoGraph App Store / Google Play mobile app: “Cryptograph”, “Ethereum” and “Feedback” pages.

The user interface is specifically designed for mobile screen resolutions so that all the charts and diagrams could be properly viewed.

The application offers the following features:

  • more than 2,500 cryptocurrencies and tokens available;
  • comprehensive data set on every coin;
  • an exchange rate graph;
  • a list of favored coins;
  • extensive search and filter options;
  • increasing community participation;
  • customizable market cap and display functionalities;
  • a feedback page.

Hookle

Hookle is a social media assistant app that can be readily procurable by all kinds of businesses.

Hookle App Store / Google Play mobile app: “Statistics”, “Planner” and “New post” pages.

The application comes in with relevant and workable solutions. Respectively, in one single place and one go, the application user can:

  • operate multiple social network channels;
  • release posts, images, and videos to numerous network channels;
  • share content directly from the local drive, virtual disk spaces, or the web;
  • create, preview, finalize and issue publications;
  • customize, edit or delete publications;
  • schedule or hold off any content as well as prospective events;
  • search and pick out the previously used hashtags;
  • receive detailed analytic data on the channels;
  • share the social media channels with all the Hookle users and therefore collaborate.

Over and above, such instruments as Social Score, Hookle Planner, and Unsplash will nicely complement and enhance the previously listed functionality.

Being a time-saving practice, Hookle allows entrepreneurs from anywhere in the world to enlarge commerce opportunities and have their businesses scaled up.

Xdrop

Xdrop is a file transfer mobile application.

The main features the customer benefits from:

  • multi-platform sharing;
  • customer-oriented UI/UX;
  • an advantage of much speedier operation;
  • files, photos, videos, and application exchange;
  • privacy and sensible data protection.

Xdrop App Store / Google Play mobile app: “Profile” “Hey” and “FAQ” pages.

As a Flutter-based mobile application, Xdrop may become a perfect choice to meet the need for data sharing.

Slice

Slice is a no-fee Visa credit card mobile application. The main advantage secured by Slice is ensuring reliable and easily accessible online shopping, supported by having an opportunity of splitting the payments.

Slice App Store / Google Play mobile app: “Spark”, “Rewards” and “Spends” pages.

Slice allows users to:

  • shop now and pay later;
  • use passbook to control spending;
  • track and manage expenditures;
  • receive cashback and discounts;
  • funds transferring to the bank or Paytm accounts.

The advantages of using Slice:

  • no user fees;
  • a flexible credit limit;
  • spending habits data analysis.

Providing opportunities to slice the payment submitted, Slice has become a reliable solution for online shopping.

Holywings

Falling under the category of Food & Drink, Holywings mobile app is focused on reservation services and offers multiple services. They include:

  • an online reservation;
  • a minimum charge fee;
  • online reservation;
  • a delivery option;
  • membership advantages.

Holywings App Store / Google Play mobile app: “Profile” “Event” and “Home” pages.

The application is user-friendly and comfortable to use.

Obviously, Flutter is a powerful tool for any kind of development work. Flutter created apps are fast, reliable, and beautifully designed.

Flutter and Dart mobile app examples vividly illustrate a rapid increase in popularity among these powerful software tools.

TBR Group — your tech partner for mobile app development

The IT Development company — TBR Group — is a group of Ukrainian software engineers specializing in platform-independent software and Flutter and Dart programming tools.

There is a set of cross-platform mobile applications built with Flutter and Dart in the TBR Group’s portfolio. In this piece, we will take a closer look at:

mobile apps.

Vetsie for Vets

Vetsie for Vets is a pet care mobile application built with Flutter and Dart. Vetsie for Vets offers both the pet parent and the vet professional sides for application usage. The admin panel option enables the software administrator to supervise the entire app’s performance and provide any assistance needed.

Vetsie for Vets mobile app: “Book Consultation / Payment” and “Audio Call” pages.

More details on the software development peculiarities you can get in Vetsie case study.

Providing an exceptionally user-friendly interface and a set of functionalities, Vetsie for Vets is essential to ensure a comfortable workflow for each of the takers.

Swishboom

Swishboom — a platform-independent mobile application in the category of parenting and lifestyle.

The application is designed to run in two versions — the first for caregivers and the other for caretakers. Families, experiencing a need for babysitting services, can choose a caregiver whose profile may seem the most applicable for the position. Meanwhile, babysitters and various care providers are able to advertise the caregiving services they offer.

Swishboom enables subscribers to:

  • schedule babysitting services;
  • build a personal network;
  • advertise open positions;
  • send event invitations;
  • post jobs into the calendar;
  • validate, and therefore secure and protect each party involved.

Swishboom App Store / Google Play mobile app: “How it works” and “Find a sister” pages.

Further details of the Swishboom project are presented in the Swishboom case study, which you are most welcome to review.

Wywroty Songbook

Wywroty Songbook is specifically developed by guitarists for guitarists.

Originally designed for musicians in Poland, the app has started gaining popularity offshore.

Wywroty Songbook Apple Store / Google Play mobile app: “Start” and “Popular” pages.

As the largest database of arrangements of Polish and foreign songs, Wywroty Songbook enables its user to:

  • create a collection of your favorite songs;
  • browse the most popular and daily played compositions;
  • transpose the chords into the corresponding keys;
  • switch between the guitar and ukulele chord charts;
  • activate automatic text scrolling;
  • to easily search for pieces of music;
  • activate a night mode feature.

A detailed case study description, as well as a complete functionality set overview, can be checked out at Wywroty Songbook case study.

Summary

If you have already got your idea outlined, although a lack of how-to-implement clear understanding is still there, you are most welcome to get in touch with the TBR Group IT Development company.

We will be happy to assist you in clearing up technical aspect details, the look of the application, and the scope of work to be done.

The fundamentals of Flutter & Dart

Smart screens are everywhere. Embedded into the watch on your hand or installed into the mirror in your bathroom or functioning as a roadmap at a bus stop — the screens have already been enriching the life of the entire society.

But multiple functions, as well as convenient usability, are the core features that outline smart mobile phones as leaders in the technological field. The number of smartphone holders is expected to continue growing worldwide.

And here is where Flutter comes in. It strives not just to make sure the power of the device is maintained, but also to enhance its capacity.

Mobile applications, distinguished by functional characteristics, tend to be multi-platform supporting a variety of formats.

As one of the most popular frameworks for mobile app development nowadays, Flutter has steadily gained leadership. As well as Dart — a language it is based on.

Cross-platform mobile frameworks used by developers worldwide 2019-2021

Statista: Cross-platform mobile frameworks used by developers worldwide 2019-2021

Before taking up Flutter mobile app development, you should understand the nature of Flutter and Dart.

Let us dive deeper and discover the topic.

What is Flutter? Is Flutter a framework?

Flutter is a framework for cross-platform mobile app development

In 2018 at the WeAreDevelopers conference in Berlin, Flutter was presented to the IT professional viewership. The speaker, Martin Aguinis, said: “A lot of times when we usually talk about Flutter, we do it with four pillars. Flutter is beautiful, Flutter is fast, Flutter is productive, and Flutter is open”.

The Flutter diagram displayed at the WeAreDevelopers conference

The Flutter diagram displayed at the WeAreDevelopers conference

A brief description of the technology

Flutter is a framework for cross-platform mobile app development

In 2018 at the WeAreDevelopers conference in Berlin, Flutter was presented to the IT professional viewership. The speaker, Martin Aguinis, said: “A lot of times when we usually talk about Flutter, we do it with four pillars. Flutter is beautiful, Flutter is fast, Flutter is productive, and Flutter is open”.

Flutter is a framework for crafting platform-independent applications. And here comes a question: “Is Flutter a programming language?” This issue bothers a great number of curious natures. And the answer will be: “No”.

Flutter itself is not a programming language. It is an SDK – a tool kit – that operates being bundled with either a text editor or an IDE, as a better option, such as Android Studio, IntelliJ IDE. To write the code, Flutter uses the Dart programming language.

The development is started out with the Flutter SDK installation.
Once installed on the chosen desktop operating system, Flutter runs inside the Dart virtual machine.

Respectively, Flutter alongside with Dart allows creating:

  • Android and iOS mobile apps;
  • web applications;
  • graphical applications for desktop Windows, macOS, and Linux solutions.

The benefits primary stakeholders get.

A business owner, by opting for Flutter, can save both on money and time.

So, with Flutter, compared to its native equivalent, it will be easier and considerably cheaper to:

  • build the software;
  • create the MVP;
  • to follow-up with the product support.

Program engineers will appreciate:

  • the documentation, community, and the package repository of the Flutter;
  • an open-source programming;
  • a well-structured toolset;
  • the stateful Hot Reload feature enabled by the JIT compilation;
  • an elegantly designed work environment.

Why will a user enjoy the smooth performance of the application built with Flutter? The answers are:

  • Ahead-of-Time compilation;
  • powerful basic stateful and stateless widgets;
  • Skia graphics engine;
  • out of the box functionalities;
  • no native elements.

Besides, Flutter has also been used to create the user interface of Fuchsia – a new operating system developed by Google.

As described above, no dilemma “Dart vs Flutter” exists any longer, since both terms are interconnected.

Our article “Why choose Flutter for mobile app development in 2024?” helps you much better understand the domain, the benefits, and downsides of the technology.

What is Dart?

Developed by Google and chosen as a programming language for Flutter, Dart is the foundation of this framework.

Embedding an extensive set of basic libraries and packages, Dart:

  • allows using essential elements for daily programming tasks;
  • makes it possible to provide tons of API solutions.

The technology allows Dart to:

  • compile the code into multiple programming languages; 
  • ensure its usage on several platforms.

Given this, Dart is targeting native and web operating devices.

Native solutions

The Dart runtime system is required to execute the code natively. By default, the Dart runtime is included in the Dart VM.

Dart VM is a virtual machine, a collection of components for executing Dart code natively.

To render the machine code, Dart VM applies:
just-in-time compilation (JIT);
ahead-of-time compilation (AOT).

Thus, expediting the start time of the application, the AOT enables an efficient performance of the mobile or desktop application.

Whereas, the JIT is Flutter’s famous Hot Reload feature.

Web solutions

Through the use of particular compilers, Dart is translated into the JavaScript language, which enables its use in the browser. This way web solutions are realized.

Development and Production toolchain for Dart Native and Dart Web solutions

Dart overview diagram: Development and Production toolchain for Dart Native and Dart Web solutions

So, it is incorrect to say: “Flutter coding language” or “Dart SDK”. As Flutter is an SDK or a framework, and Dart – a programming language.

TBR Group: your tech partner in Flutter mobile app development

Just a few words to outline the TBR Group expertise section.

TBR Group is a software company based in Ukraine.

Cooperating with enterprises all over the globe, the TBR Group team has undertaken and successfully carried out a set of projects in platform-independent mobile app software programming.

Vetsie for Vets App Store / Google Play and Swishboom App Store / Google Play may serve as relevant examples.

Vetsie for Vets is a pet care mobile application targeting mainly the USA and Canada market areas. Having been introduced in 2 versions — for the pet parent and the medical workers – Vetsie for Vets perfectly suits both. Outstanding performance has been achieved due to the technology stack of Flutter and Dart realized by the TBR Group team.

Vetsie for vets: “New bookings” and “Upcoming consultation” page. Vetsie for Vets: “Chats” page.

Vetsie for vets: “New bookings” and “Upcoming consultation” page. Vetsie for Vets: “Chats” page.

To learn more on how to craft a pet care mobile app, check “Building a pet care app with Flutter: TBR Group guide”. And to dive into the details of the Vetsie for Vets project realization, you are welcome to read “Vetsie case study page”.

Swishboom App Store / Google Play is another case – a platform-independent mobile app built with the Flutter and the Dart.

Swishboom functions as a web-based spot for parents to order babysitting services. Similar to Vetsie for Vets, according to the functionality assigned, Swishboom has just as well been implemented in 2 software solutions. The first one is specifically designed for families, the other meets the needs of the caregivers and the babysitters engaged in the service.

Swishboom mobile app: “Your job” page and “Find a sister” page.

Swishboom mobile app: “Your job” page and “Find a sister” page.

Find the technical aspects of the project on Swishboom case study.

If you feel like specifying your project requirements, we will be happy to assist.

In a process of dialogue, we will go over the guidelines and terms of the upcoming project, without enforcing solutions. Every peculiarity will be discussed and agreed on with you to ensure an entire case understanding.

You are most welcome to reach out to us and leave your message via our contact form. Looking forward to assisting you at any time.

5 Healthcare mobile applications trends 2024

An extensively digitalized healthcare alongside with COVID-19 consequences has accelerated not just the growth of the mobile device sector alone. The entire healthcare industry is bustling.

Improving the quality of health services, healthcare mobile platforms have gained even more popularity among smartphone holders.

The mHealth apps, which were available in the Google Play Store in December 2021, reached a total of 53,054 items. The Apple App Store showed nearly the same 53,979 applications ready to be downloaded to the customers’ portable devices.

The competition is tough and, therefore, new apps should have a competitive edge to stand out.

In this article, we will give a brief overview of the mobile medical app industry. We will also define the latest trends in healthcare mobile app development.

On top of that, we are going to take a closer look at the Vinci Labs platform – a company that implements medical device integration software.

We will also describe how TBR Group partners up with the Vinci Labs medical device integration software platform.

Top 5 trends in healthcare mobile app development

In the app stores, you are expected to discover a great variety of healthcare applications.

Some mobile medical applications are particularly designed for medical professionals. Others aimed to meet the patients’ needs.

Here come a few examples of the medical workers’ apps:

The patient-oriented apps:

It is required to consider law regulations as well.
An indispensable condition for releasing a healthcare mobile app in the USA, Canada, and across the countries of the European Union is its law regulations observance.

Thus, legal compliance with the HIPAA act, FDA control, and the data protection services CCPA and GDPR should undoubtedly be taken on board.

Concerning the structure of the healthcare mobile platform, two variants of mobile medical applications are usually available. Each contains a bit different set of functionalities.

The admin panel version can be available as well. In this case, the system admin can supervise the working process on the whole and ensure its correct performance.

Which trends are now shaping up the mobile healthcare industry?

#1 Trend – Artificial Intelligence

As an integral part of the entire healthcare system, Artificial intelligence is revamping the way physicians practice medicine.

AI helps doctors:

  • diagnose multiple diseases;
  • define a set of necessary treatment methods;
  • predict better medication results for the patients;
  • much else.

Integrated into the healthcare mobile applications, artificial intelligence technologies facilitate users’ obtaining and managing health-related data.

AI technology offers a scope of valuable opportunities. Such as:

  • symptom checking apps can help users get an initial diagnosis;
  • health checkers help patients decide whether there is a necessity to see a specialist, and if so which doctor to refer to;
  • intelligent chatbots are helpful to answer various patients’ queries;
  • AI app programmes can assist in receiving valuable health data to be further properly stored, etc.

BasicAI is a data collection AI and ML mobile application.

BasicAI mobile app – “Submit task” and “Task detail application” pages.

BasicAI mobile app – “Submit task” and “Task detail application” pages.

#2 Trend – Virtual reality

Both augmented reality and virtual reality are considered to deliver real-life experiences.

In the healthcare area, they assist in teaching a trainee on getting through different medical tasks having no actual human body around.

The technology proves to be indispensable in tackling various pains, especially while laboring. It can also be used by stroke victims to efficiently regain their mobility.

The VR and AR technologies can be implemented in a variety of applications for mobile phones. This allows to investigate and examine new options when socializing with users.

Complete Anatomy mobile application 2024 App Store / Google Play is a complete anatomy reference book with creative tools including virtual dissection.

Complete Anatomy app – “Groundbreaking Female Model” and “Simulate Cadaveric Dissection” pages.

Complete Anatomy app – “Groundbreaking Female Model” and “Simulate Cadaveric Dissection” pages.

#3 Trend – Telemedicine

Telemedicine turned out to be a much-needed tool, gaining popularity as an ultimate option used by both patients and doctors.

Telemedicine apps have boosted sharing the online data between them.

Addressing common health issues, patients can be advised by doctors and medically prescribed out of a clinic. It ensures immediate contactless attention.

This tool saves a ton of a patient’s time, while doctors can keep to the daily routine much more efficiently.

Seeking a professional consultation, healthcare experts and specialists can be reached at any time.

Telemedicine apps have come into widespread use, providing easy access for doctors of different specialities.

AMBOSS App Store / Google Play app is an AI knowledge base. The application allows users to get answers to various medical inquiries and perform prior diagnostics.

AMBOSS mobile app – “Master every speciality” and “Explore content seamlessly” pages.

AMBOSS mobile app – “Master every speciality” and “Explore content seamlessly” pages.

#4 Trend – Blockchain

Blockchain in healthcare has drastically moved forward in the area.

Following this tendency, applications have proved to be more secured, with online transactions becoming much quicker and safer.

This is likely to advance medical bill online payments, eliminating a physical queueing up.

A chance to pay online will facilitate the payment process and provide more security to it.

Blockchain technology will reduce unsolicited use of patients’ data kept in the application.

Exchange and storage of the medical data are readily available.

Accompanied by the possibility to make records, Blockchain technology helps to diminish blunders, forgery, stealing and losing the data.

Through Blockchain solutions, an extra tool has emerged to efficiently cope with healthcare problems, covering clinical trials, drug control, and keeping medical records.

Reply gives data concerning blockchain technology in healthcare mobile applications.

Reply project – “Healthcare Blockchain Applications” and “Blockchain Applications” sections.

Reply project – “Healthcare Blockchain Applications” and “Blockchain Applications” sections.

#5 Trend – Integration with 3rd party devices

Third-party device and software integration means an extension of a device’s functionality by means of analyzing, processing, and storing the data with the help of existing software.

Through an application programming interface (API), the existing 3rd party device can be integrated into the software in question.

Any type of device can be connected to the software to obtain and process new data, automating the delivery and saving operational time.

These include, but not limited to pulse oximeter, weighing scale, digital stethoscope, portable ECG, spirometer, and B.P. monitor.

The above-mentioned devices are updated and patients’ EHR data is secured and stored, which is advantageous for both a patient and a doctor.

Hence, the users’ and clients’ demands define the trends and main tech and non-tech requirements for mobile apps.

Apple Watch app makes it possible to pair and sync a personal Apple Watch with the iPhone.

Apple Watch mobile app – “All watches” and “Add Watch Face” sections.

Apple Watch mobile app – “All watches” and “Add Watch Face” sections.

The Vinci Labs platform

Vinci Labs is a community of medical doctors, business people, and software engineers.

Vinci Labs company is focused on providing the API solution to get the 3rd party digital medical devices integrated into the standalone software product or service.

Vinci Labs offers users to choose either between the API’s option or go for an application variant.

Ensuring the correct performance of the medical device integration software, Vinci Labs handles the whole integration process. So, Vinci Labs:

  • carries out the device updates;
  • protects sensitive information;
  • makes sure EHR data is stored highly secured.

The key features the Vinci Labs Platform offers:

  • Native 3rd Party Device Integration;
  • Modular API;
  • Customized Standalone Application;
  • EHR Data Storage and Analytics.
Vinci Labs platform – “Modular API’s” and “Native 3rd Party Device Integration” sections.

Vinci Labs platform – “Modular API’s” and “Native 3rd Party Device Integration” sections.

Vinci Labs platform – “EHR Data Storage and Analytics” and “Customized Standalone Application” sections.

Vinci Labs platform – “EHR Data Storage and Analytics” and “Customized Standalone Application” sections.

By applying the above, the Vinci Labs platform makes it possible for healthcare organizations to ensure quality and seamless digital care accessible to their patients and customers through the use of technology.

Vinci Labs platform – “Enable Your Platform For Real Time Virtual Care” and “Perform Remote Patient Monitoring and Homecare” sections.

Vinci Labs platform – “Enable Your Platform For Real Time Virtual Care” and “Perform Remote Patient Monitoring and Homecare” sections.

Currently, Vinci Labs is on its MVP stage, getting through a steady development process.

While the front-end was entirely accomplished by TBR Group, a third-party technical partner worked on the backend programming part.

Given this, on the backend, it was decided to implement an algorithm for scanning and analyzing data from the 3rd party devices.

The algorithm in question contributed to the subsequent creating of charts, diagrams, and other data storage modules.

Consequently, the implemented options referred to measuring the user’s temperature, blood pressure and pulse, as well as other health indicators.

Vinci Labs makes it possible to obtain a platform demo version.

The challenge & solution

The main goal of the project was to keep detailed statistics of the patient’s health indicators during treatment and provide an easy way for patients to enter medical data.
We have developed a mobile application that allows patients to enter data from devices without thinking about the meaning of certain indicators, since data can be uploaded simply by taking a photo of the device. Also application provides a way to interact with health indicators statistics by interactive charts. Charts support data scaling and different date ranges.
One of the challenges we faced while developing is to show on the charts measurements that was made outside healthy range. To achieve this, we added a custom coloring for line chart which depends on measurements data and health indicators ranges.

Summary

Actively expanding, the mobile healthcare industry has definitely established its presence in the market niche.

Hot trends like AI, telemedicine, and 3rd party device integration are outlining the basic technical requirements for a brand new mobile app to be delivered.

Respectively, mHealth has influenced the efficiency, communication options, costs, and even quality of healthcare services.

TBR Group IT Development company has already obtained vast experience in building complicated medical apps.

Solving technical challenges, TBR Group works out a general, step-by-step procedure to craft your unique healthcare or medical mobile app.

Depending on the technical specifications, our software engineers team tracks down and utilizes various frameworks and tools, as well as programming languages to efficiently carry out the project.

We make sure, that at each design stage, the communication between our development team and the client company remains stable and as if led nominally.

Feel free to contact us at any convenient time. Through get In touch form, you are most welcome to share your mobile app concept. And indeed, there is always a perfect way to start.

Pros and cons of dedicated teams for mobile app development

A rapid and continuous growth of the IT realm can hardly stay unnoticed. Serious changes are underway in the programming field. And mobile application development is in the spotlight.

The Number of mobile app downloads worldwide from 2016 to 2021 showed a steady increase in downloads. Thus, in 2016 this number surpassed the mark of 140 billion, having reached the volume of 230 billion in 2021.

Furthermore, mobile applications are expected to generate more than $613 billion in revenues by 2025.

Given this, owning a mobile application to expand the business is one of the latest trends.

So, how to craft a first-rate mobile app?

The mobile application development appears to be rather expensive and time-consuming.

Getting just the right team to fulfil the dedicated project is crucial. Is it better to hire freelancers or refer to a development company?

The software service providers may offer reasonable solutions. Respectively, business holders do tend to opt for external help.

There are a few types of outsourcing in mobile application development.

In this article, we will discover the advantages as well as the downsides of the dedicated team approach and the outstaffing model.
We will also outline our expertise this business model cooperation.

The anatomy of dedicated development and outstaffing model

What is a dedicated team model?

A dedicated development team – a group of specialists in the software field working together on a particular project.

The initial scope of work may vary depending on the case and the client’s requirements.

The services provided by the dedicated team mainly lie in crafting designs, software development and QA testing.

The outcome is an entirely completed, ready-to-market product. It can be either a mobile app, or a website payment system.

The concept implies business cooperation at least between a client company and a service provider.

The scope of work, project features and values, desirable specifications, and timelines will form the cost of the dedicated project and identify a suitable payment model.

In charge of the group is a project manager. Leading the dedicated software team and coordinating the workflow, the PM supervises the whole development process.

Still, a dedicated team should not be considered as a unit of the in-house staff structure. While working remotely on the client’s project, the team is directly subordinated to the own supervising management.

Hiring a dedicated software team allows the business holder not to perform a direct hands-on administration and therefore lessens the management burden.

What is outstaffing?


The outstaffing business model can be characterized as a personnel withdrawal.

As the majority of the business holders are truly tech-savvy, they can successfully head up the entire development process.

In case of a staff shortage, outstaffing can appear like a perfect choice to swiftly and relatively easily fill the temporary skill gaps.

So, applying for an outstaffing model helps to optimize expenditures on human resources.
Typically, two or three sides of participation are involved in outstaffing. There are:

  • the host/customer company;
  • the recruitment agency or the intermediary;
  • the service provider/outstaffer.

The client company is a corporation in need of temporary staff resources to carry out a definite scope of work or to participate in the development project.

The same as in the dedicated team module, a recruitment agency is also not a constant participator in the outstaffing business concept. If any, the agency acts as an intermediary between the host company and the outstaffer.

After the project requirements have been defined, the service provider can start outstaffing suitable candidates.

Scrupulously selected, each specialist has to perfectly fit the client’s requirements.

Performing as a part of the in-house team, the allocated employee is still registered as a staff member of the provider company.

Being in charge of the entire development process, the host company controls the employee’s engagement, as well as every stage of the project implementation.

Advantages of the dedicated team and outstaffing models

These models can actually appear as a perfect solution for mobile app development.

As the allocated staff work distantly, it helps to reduce costs on maintenance and taxes of different kinds.

So, saving expenses, they just as well expedite time to market period and lessen the management burden for the client company.

What concept to opt for depends on the project requirements and its goals. It is necessary to estimate the costs and the budget available. The characteristics of the market will also have to be examined.

The difference between these two models lies mainly in their objectives.

The outstaffing model implies allocating one or more specialists to the host company. Usually, there are no time frames for such cooperation.
The host company provides direct supervision over the outstaffed employees. Specifying tasks, the customer company controls the whole working flow.

The dedicated team concept requires a team of specialists to fulfil a particular project within a set timeline. The entire development process is controlled by the project manager of the dedicated team.

In the end, the client company receives a completely ready-to-market product.

Here comes a comparative table summing up the advantages and some downsides of these business models.

Pros and cons of dedicated teams and outstaffing

Advantages and disadvantages of dedicated team and outstaffing models

Outstaffing model by TBR Group: the babymates case

TBR Group – a Ukrainian IT development company specializing mainly in cross-platform mobile app development.

The technology used – the Flutter framework and the Dart programming language.
The piece on Why choose Flutter for mobile app development in 2023? will let you have a closer look at these advanced technologies.

You are welcome to observe a few products crafted by our team. These mobile applications are already available in the App Store and Google Play. So, out there, you can find Vetsie for Vets (App Store / Google Play), Swishboom, Neural Reader Most Natural TTS, Śpiewnik Wywroty.

In some mobile software implementations, TBR Group had a chance to operate as a dedicated team, as well as an outstaffing company.

In the babymates project, TBR Group performed as an outstaffing company.

This mobile application has been specially designed for dads to ”dad” in the most comfortable, pleasant and happy way.

Paying attention to how tough being a dad can be in the new world of restrictions, lockdowns and social distance, babymates aims to digitally connect dads with the service created.
The key features include:

  • user authorization;
  • profile section;
  • online chat;
  • map integration;
  • community;
  • events;
  • contact form;
  • and a dad joke generator section.

Built up with a rich set of functionalities, babymates is intuitive and really user-friendly.

The babymates mobile app – build your dad profile and connect with your dad mates pages.

The babymates mobile app – chat with new mates and feed, create and share dad moments pages.

The challenge and the solution

The engineers of TBR Group took part in the babymates mobile application development. Enlarging the host company’s team, the group considerably expedited the development process.

Outcome

The goals set had been reached and the assignments fulfilled. The babymates mobile application was delivered to the client within the defined timeline.

Summary

Being popular among users, mobile applications have truly become a core feature in expanding business online.

As a business owner, to craft a mobile app, you have to think over tons of possibilities and define hundreds of variables.

TBR Group dives into the nitty-gritty of your business idea.

Perhaps, you would like to opt for a dedicated development team. Or you might choose an outstaffing model.

In any case, the TBR Group IT Development company will gladly help you decide what suits you best and give you a helping hand.

You are most welcome to contact us via the get In touch contact form. At all times, we are always here to assist you.

Top 9 features of mobile pet care apps — Flutter app development company

The pet industry market, having grown over the past few years, has actually created new exciting opportunities for nearly all the market participants.

The American Pet Product Association (APPA) in Pet Industry Market Size, Trends & Ownership Statistics have figured out a continuous growth of the total U.S. pet industry expenditures. The records show a corresponding increase in outlays from $90.5 billion in 2018 up to $103.6 in 2020, with the estimated figure of $109.6 in 2021. The report has confirmed a consistent increase in the pet annual expenses year-on-year.

The COVID-19 conditions have also contributed to the pet industry development, having pushed hundreds of vet industries to build businesses online.

Respectively, the sector of mobile pet care applications is rapidly moving forward.

Providing a range of various services, apps for pet care have already simplified the way the pet parents get in touch with their vet care professionals.

The diversity of the modern software capabilities has resulted in technological stack dilemma. What programming language to choose to create the best app for dog care? Or what functionalities distinguish good pet apps from the mediocre ones?

An optimal way to get stared avoiding possible pitfalls is to craft an MVP version of the application. This pilot option enables business owners to watch over the strong points and detect the downsides.

In this article, we will go through a list of the top must-have features which every vet mobile app should capture in its MVP release.

9 features the best veterinary mobile app should have

It’s worth mentioning that a vet care app really implies two sides of interaction – a pet parent and a veterinary clinic. So, you will need to develop two types of applications as well. Each app has to hold a bit of a different set of functionalities.
Here come 9 must-have features for the MVP solution. They are:

Admin panel for owners

To efficiently maintain the interaction process between the clinic itself and pet parents, the administrative panel appears as an absolutely essential feature.

It allows vet professionals to handle all the incoming requests, text or video messages, as well as various notifications.

In the admin dashboard, veterinarian staff observe new bookings and manage actual appointments.

Plus, as all the details regarding a pet and its owner are documented in one place, it couldn’t be more convenient for pet care providers.

Onboarding / authorization options

To obtain services, the consumer needs to create a personal account and to authorize as a user. Embedding a log-in option may also encourage members to keep up using the service.

Pet’s profile

The pet profile section displays the general information about a pet. A pet parent can disclose a pet’s character, behavior and nutrition habits.

The general data, such as the breed, color, age, and weight should similarly be defined in this section.

The vet professional can insert and update information concerning a pet’s possible ailments and its health situation.

Coming in really handy, this option definitely allows the pet parent to be terribly bitty about the pet’s background.

Payments and Order history

Having a few plans available for the subscription, the pet owners can freely opt for that one, which is the most appealing.

It is possible to set up a monthly payment or an annual subscription. The consumer can just as well go for a flat fee.

The vet clinic usually determines the payment terms and methods by taking into account the veterinarian staff qualification, the type of the consultation services and the subscription period.

Book a consultation

This feature enables the pet parents to choose a vet doctor and set up a convenient time and date for a visit.

The consumer can also refer to the preferred veterinarian in text or email messages on simple questions.

An appointment can be held either in person or via a video or audio call.

Video and Audio calls

Carrying out a video or audio call with a vet doctor can appear most important in case of possible symptom onsets or injuries a pet may have.

A pet parents can schedule either a video and audio conversation with vet specialists, or pay a personal visit.

Online Chat

An online chat feature enables pet parents to directly get connected with pet care providers.

The required data concerning a pet’s variable medical conditions can be sent to a veterinarian in a text, voice, or video message.

Google map integration

A pet’s parents can look for a veterinarian clinic nearby. The search results will be displayed on the map in the most convenient way.

The so-called heat map index, the option of displaying the current workload on every vet station, can obviously come out as a nice little bonus.

Pet’s health records

This section contains all the official medical data on a pet’s chronic conditions, vaccines received, and allergies diagnosed.

Here a pet’s parents and the vet staff can check a pet’s health records or get a summary of the previously paid visits.

The application designed for vet service providers may include extra functionalities. Such as:

  • order management
  • earnings
  • daily reports
  • active/inactive user status
  • heat maps index.

Nice to have mobile app features and extra functionalities to implement throughout the next stages of the product evolution may include:

  • reminders
  • push notifications
  • educational articles and videos
  • PDF reports
  • Facebook events
  • food monitoring
  • exercise
  • reviews and ratings
  • support
  • GPS tracking
  • first aid.

Respectively, these handy features will enable both the business owner and the pet parents to interact with each other in an efficient and cost-effective way.

The aforementioned core set of functionalities has also been implemented in the following vet applications:

11Pets App Store and Google Play, PetCoach App Store and Google Play, Rover App Store and Google Play, PetDesk and Vetsie for Vets App Store and Google Play.
Hereinafter, we will get a closer look at Vetsie for Vets pet health app.

Vetsie mobile pet services app developed by TBR Group

Vetsie for Vets – a veterinary telemedicine mobile application, available in App Store and Google Play. Crafted by the Ukrainian IT development company – TBR Group – Vetsie for Vets is mainly oriented to the Canadian market.

You are most welcome to read our article Building a pet care app with Flutter: TBR Group guide. The entry describes the development stages performed and may give you a hint on how to craft the best pet care app.

And to get more technical overview of the implementation, please, refer to Vetsie case study page.

So, realized in 2 versions, Vetsie for Vets (App Store / Google Play) offers an expedient set of functionalities to the pet parents and a practical admin panel for the vet clinic.

Opportunities for users and administrators offered by Vetsie for Vets and the key features of the application

Vetsie for Vets is a user-friendly environment for any consumer. The key features of this pet services’ app are the following:

  • Video and audio calls;
  • Chat (file uploading, unread messages, voice messages);
  • Book consultation;
  • Google map integration;
  • Charts;
  • Reviews;
  • PDF reports;
  • Push notifications;
  • Stripe payment integration;
  • Facebook events.

The functional capabilities offered by Vetsie for Vets (App Store / Google Play) make it easy for the pet owners to connect with a pet care expert.

Vetsie for Vets mobile app - Text / Audio Call feature.

Vetsie for Vets mobile app – Text / Audio Call feature.

Plus, thanks to the push notifications, the pet parent receives all the vital data concerning the pet care services.

Being able to schedule a visit or immediately speak to the doctor in times of emergency, the user obtains a highly qualified consultation and thus a sense of security.

Vetsie for Vets mobile app – Book Consultation feature.

Vetsie for Vets mobile app – Book Consultation feature.

The administrative section provides vet business owners and the medical staff with an attractable Admin Dashboard.

It displays general statistical data, earnings obtained, appointments scheduled and the flow of the incoming requests.

The app keeps all the metrics together, tracking a pet’s medical history in one convenient place and at the tip of the fingers.

Best of all, the communication is held right through the application, simplifying the pet’s health care involvement.

Technological Stack

Vetsie for Vets (App Store / Google Play) – a veterinary mobile application that is cross-platform and cloud-based.

To obtain the most relevant software realization of the project, TBR Group used the Flutter framework and the Dart programming language.

Being relatively brand new, Flutter has already evolved into one of the most widespread programming languages.

Wonder why? You are welcome to check our article on Why choose Flutter for mobile app development in 2023? You will find out the reason for Flutter’s growing popularity among developers. As well as why consumers themselves love applications build with Flutter.

To enable video and audio broadcasting options, TBR Group implemented a robust Agora SDK technology. Respectively, Agora Real-time Communication (RTC), Agora Real-time Messaging (RTM) and Agora Web SDK library have been integrated.

Just as Agora SDK itself does not support chat features for Flutter web options, our team had to use a Flutter web plugin combined with the JavaScript language.

This way, TBR Group have succeeded to craft a highly productive pet health mobile app, with a reliable and secure interaction between the vet business owners and the pet parents on one single platform.

Summary

Having successfully crafted multiple cross-platform mobile applications, the TBR Group IT Development company each and every time takes care to deliver a top-quality software product.

Check our projects as a proof. You can find and download the apps, such as Swishboom, Neural Reader Most Natural TTS, Śpiewnik Wywroty from the App Store and Google Play.

You are most welcome to ask anything you want at any time right through our Get In Touch contact form. We will always be happy to assist in your project realization.

Why choose Flutter for mobile app development in 2024?

The mobile app industry has already been on the rise, and it will keep increasing its revenues by 10 times, according to Statista.
That’s wow! App stores are crowded with tools for every human need, be it – a song directory, pet vet app, or a sales store.

In recent years, Flutter and React Native have been the leading frameworks in cross-platform development. Occupying the first position in the diagram, Flutter has started to steadily drive the lead.

Though being the front-runner, Flutter has still challenges to work with. In this article, we will describe the pros and cons of the framework, the difficulties we faced, and the solutions we took.

So, let’s go.

Flutter mobile development fundamentals

The framework architecture of Flutter is designed for a cross-platform development process.

It is implemented by deploying several core components, such as Dart programming language, Flutter engine, design-specific widgets, development tools kit, and foundation library.

Let’s dive into the domain and gain an insight into what Flutter actually is.

The upsides of the Flutter framework

Flutter is an open-source framework released by Google in 2018. It is basically a tool kit, an SDK, for the developer to create applications. It contains libraries, widgets, and the required tools for the work process to flow quickly, smoothly, and efficiently.

The list of the big companies’ apps built by Flutter cross-platform is presented in Flutter Apps in Production and An open list of apps built with Flutter.

Advantages of Flutter

A single code base


Flutter runs the code written in Dart. Dart is an object-oriented programming language launched by Google and picked up to implement Flutter.

Dart allows for a single code base to be reused for every platform. The API is stable and well-supported.

It supports Ahead Of Time as well as Just In Time options of code compilation.

During the Flutter app development process, the JIT compilation enables Flutter’s stateful Hot Reload.

With Dart, the flow of development cycles is extremely fast. Respectively, with the changes applied, Flutter app developers can see the actual look of the application in less than a second.
Fast development flow and smooth performance.
The Flutter mobile application becomes AOT-compiled as soon as it has been created and ready to be released.

AOT option allows you to efficiently compile the Flutter mobile app code into the binary native code. Just like with natively coded applications, the start time is speedy and further performance is smooth.

Widget customization


In Flutter, everything is a widget. Using various compositions of widgets, you can draw the user interface, introduce changes into the outer look of the application or even execute the data transmission process.

Developers can create totally customizable widgets. By painting every pixel to the screen, you gain complete control over the application.

Concerning the design-specific widgets, Flutter holds both Cupertino layouts resembling Apple’s iOS Human interface guidelines design language and Android Material Components of the Material Design, which is a design language developed by Google in 2014.

The layouts are defined by using the Dart code only. There is neither XML nor templating language in the Flutter development kit, just as there is no visual designer tool either.

All graphical elements, such as buttons, backgrounds, and texts are written by the graphic Flutter engine.
Compilation flexibility
Due to its compilation flexibility, Dart may be used in a combo with JavaScript and, thus, implemented in the browser or even on the server side by either being compiled natively or into the JavaScript programming language.

There are other benefits of Flutter development, such as:

  • a low learning curve;
  • it is app-oriented, not platform-oriented;
  • it is well-documented;
  • suitable for various niches;
  • Flutter engine and Flutter DevTools have ever-growing capacities;

it’s great for MVPs.

The downsides of Flutter

Dependence on the IT community

To interact with certain native features, Flutter has to use third-party libraries and plugins. Once built by iOS and Android developers, they need to be constantly updated.
The IT community has actively been growing since Flutter was released, and tons of important plugins have come into widespread use.
File size
The file built by Flutter is more disk space-consuming than the one coded natively. The Flutter application that goes into the App store is heavier than its native equivalent.
This file size challenge has already been faced by the Flutter developers and the file size reduction is underway. Performance & Optimization documentation may appear to be a viable solution.

Instability


As Flutter was released from the beta version not so long ago, some sort of operating instability may still occur. Google has already focused on gaining stable and reliable framework performance.

Now let’s compare Flutter and other cross-development mobile frameworks.

Flutter vs React Native vs Native

React Native is an open-source JavaScript framework released by Facebook and applied to build cross-platform applications.

The framework interacts with native platforms by using a so-called “JavaScript Bridge”. This is a context that may cause a jank. A noticeable choppiness of the application performance is detected. And the performance of critical applications may get affected.

In the React Native framework, developers cannot get full control over the software tool and prevent possible security issues and data leakage.

Flutter vs React Native comparison reveals the main differences both in the Dart language capabilities and in Flutter’s new framework architecture itself.

Flutter applications have a faster start-up time and a quicker performance. Looking natively and performing efficiently, they provide a perfect user experience. They are secure enough to be used in any market niche your business belongs to.

If you set the cross-platform approach represented by Flutter vs Native (Kotlin, Java, Swift, Objective-C) or any other native coding option, the differences will at large lie in the development process and become obvious during post-launch support.

The need to hire a doubled number of specialists and run a project in a time- and resource-consuming way will probably make such a project a pricey one.
Maintenance and considerable support costs for two separate applications should as well be considered.

With so many benefits, Flutter appears to be one of the most popular and capable technologies to build cross-platform applications.

Building cross-platform apps with Flatter: TBR Group’s expertise

Here comes a true industry showcase of the apps created by TBR Group which have already been published in the app stores.

TBR Group is a company that specializes in web and mobile programming development.

Swishboom

This Flutter mobile app is available only in the App Store.

Swishboom mobile app – “How it works”, “Find a Sister” and “Your Job” pages.

Swishboom mobile app – “How it works”, “Find a Sister” and “Your Job” pages.

Swishboom connects the families in want of babysitting service to the baby care providers available for job employment. The application allows for creating personal networks for both families and babysitters, scheduling working hours, extending the existing network, and making the babysitter jobs easy to apply for.

Neural Reader Most Natural TTS

Flutter for mobile app development was considered a perfect technology to accomplish Neural Reader Most Natural TTS mobile app project.

Neural Reader Most Natural TTS mobile app – “My Library”, “Reading” and “Dictation” pages.

Neural Reader Most Natural TTS mobile app – “My Library”, “Reading” and “Dictation” pages.

Available on the App Store, Neural Reader is designed to be the most human-like Text-To-Speech audio reader, and the most accurate Speech-To-Text live transcribtion tool. The app provides several subscription plans.

Śpiewnik Wywroty

The Wywroty Songbook is the largest database of Polish and international song arrangements. It was originally created by guitar player for guitar players.

Śpiewnik Wywroty mobile app – “A prompter booth”, “The most favorite Polish Songs” and “Chord charts” pages.

Vetsie for Vets

Vetsie for Vets belongs to pet care telemedicine. It is cross-platform and cloud-based.

Vetsie for Vets – “Book Consultation” feature and “Add Vets” feature.

More information on the app is available at Building a pet care app with Flutter: TBR Group guide.
The challenges of the development process and their solutions

Below there is a list of issues and the solutions we faced while crafting the apps.

  • not all the existing Dart packages support the Null Safety guarantee sound. Due to this reason, some packages have to be manually rewritten to obtain the Null Safety sound support;
  • Flutter applications have bigger sizes than native ones. Since the Flutter app contains the core engine, framework, ICU data, and LICENSE file it will take some space on a disk. For example, for Android, a min Flutter app size is 4MB while the Kotlin app can take 550 KB. However, this is a default drawback for all cross-platform solutions.;
  • to implement Video & Audio chat, a Vetsie application core feature, the TBR Group used a powerful Agora SDK platform. This is similar to FaceTime conversations technology and ensures reliable and secure communication. The app Vetsie for Vets itself has been written using a Flutter web plugin in combination with the JavaScript programming language. Such a programming combination was rooted in Agora SDK itself. Agora SDK does not support chat features for Flutter web options.

For more information and details on how we did it, please, refer to the Writing a Flutter Web plugin with JavaScript: a step-by-step guide.

Summary

Flutter has already been redefining the software development for mobile, web and desktop solutions applicable for projects of any kind and scope.

Having a bunch of numerous benefits and out-of-the-box capabilities, Flutter dares to challenge projects of any complexity.

Flutter’s potential weak points can practically be avoided with a proper development approach.

Flutter app development costs may vary and depend on the preferences of your business projects, goals, and priorities.

What technology to use for mobile app development in 2024 – Flutter or alternative solutions?

This is a dilemma you might have already faced as a business owner and mobile developer, walking the way to your mobile app creation.

Get your unique project communicated and discussed. Find a comprehensive solution. We are always here to assist you!

Unlock tailored solutions with bespoke pet care app development by TBR Group

The world of IT is rapidly dashing forward. Incredible things have become a reality, and the future promises more and more ahead at a quicker pace.

COVID-19 has added its extensive input by applying restrictions and imposing new rules on all the market players. Such conditions force tons of businesses to go online.

The vet tech industry is not an exception to this technological race. There has been an ongoing market demand for online diagnostics of pets’ possible ailments.

Swiftly developing, the pet industry market is expected to enlarge its market share in Global Veterinary Diagnostics from $2.23 billion in 2018 up to $4 billion by 2023 according to the Global veterinary diagnostics market size 2023 forecast.

Pet healthcare centers have been establishing their internet presence. The vet telemedicine busts out, developing digitally and thus discovering new opportunities for businesses involved. Both web and mobile solutions are thriving.

If you are one of the veterinary business holders who have already got a functional website and ponder over creating a vet-on-demand app, you are down the right path.

This is a convenient choice for a pet parent.
Having them both is cool and beneficial and lets your business grow more efficiently. So, here comes a brief outline of how to build a pet care app.

How to build an app for pets?

You need to have your idea shaped up into a concept with clear outlines.

You need to have your idea shaped up into a concept with clear outlines.

Taking into account the number of applications available in the app stores today, you need to apply your creativity to work out an idea to launch a potentially successful vet application.

You can study the most favored pet care apps. Combine their best features, introduce relevant improvements, and generate your own unique application outline.

The majority of the existing apps have arisen due to such a technique.

Perform substantial market research and define the distinctive features. What exactly will make it possible for your application to outgrow eventual competitors?

Draft a proper business plan and outline the marketing strategy to launch your app and keep it efficiently running.

Once you have obtained a perfect understanding of what exactly you want as an outcome and the relevant designs have been made, it’s time for the app coding to get started.

At this stage, you may encounter certain pain points of choosing between either a platform for mobile pet care app development or a custom solution to hire a team of developers who will build a pet services app for you.

Here is a short description of both options:

To code the app by yourself.

If this option appeals to you, you are apparently the one who has already been creating apps.

Using a software builder platform.

You have become aware of the latest tendencies in the chosen domain and stay familiar with the already available solutions to emerging issues.

This tool allows the user to create a pet services app without having to be an expert in programming.

This can be a way out for some small and plain applications which do not require much of smartphone resources.

You will hardly be able to seriously customize the pre-created functionality as well as the template design.

Moreover, one day you can come across a very similar app out there, as the chances are another internet traveler makes his choice on the same template.

The manufacturer platform usually charges on a monthly basis to support running the application and get it operational at all times.

To get additional info as for the Drag and Drop software, please, visit Compare Drag and Drop App Builder Software.

Consuming a white label program.

The option of consuming a white label program – a pre-created software produced by one company and then rebranded by the other – may also deepen the sense of insecurity.

Even though a client purchases a ready-made vet app, still there is a necessity to employ a developer to personalize and adapt it to precisely articulated requirements.
For more information, please, check What is white labeling?, and a list of Frequently asked questions about the white label app builder.

Hiring a development company.

You can hire a team of developers specializing in mobile development to have that unique application coded for you.

This is the most reliable way of embedding your idea into a functional vet on-demand application.

The development company houses its own capacity, which includes a team of highly qualified code programmers, bug testers, project managers as well as quality hardware.

The team members are entirely focused on delivering high-rate products and the project managers closely supervise the working flow to eliminate any inaccuracy in the outcome.

Although it is more expensive compared to the other alternatives, applying to a development company is the fastest, safest, and most nerve-saving option.

The coding language appears to be another challenge for the veterinary or pet health care center owner.

You might have already faced the problem of picking up the best technical stack suitable for creating your pet services app. Indeed, the diversity of coding languages is obviously bewildering.

Vetsie – a pet vet app built with Flutter

TBR Group assisted the Canadian start-up Vetsie in making their idea come true and built a mobile application, Vetsie for Vets.

The vet app Vetsie for Vets belongs to veterinary telemedicine. It is cross-platform and cloud-based, with the interaction taking place on a single platform.

We have developed two types of applications, each has embedded a different set of functionalities.

One of them is comfortably suited for pet owners and the other one — is for the vet clinic.

These two applications are constructed to meet the needs of their owners in the best way possible.

On the Pet Parents’ side, Vetsie for Vets is designed for people owning cats, dogs, and other household pets. It searches for reputable specialists qualified to advise on the pet’s proper ailment.

Vetsie mobile app - Add Vets feature and Sign up page

Vetsie mobile app — Add Vets feature and Sign up page

All the required information about the vet doctor who will render a consultation is shown to the pet parent.

The pet owners can also see the history of correspondence, proceed with payment and buy a consulting service from the vet.

To book an appointment, the pet parent is expected to specify a disturbing issue, opt for a vet professional to refer to, and select a time and date for the call or visit.

Vetsie mobile app — Add Vets feature and Sign up page

The pet owner can communicate their pet’s case to the veterinarian by text, voice, or video messaging.

On the medical workers’ side, Vetsie for Vets is indispensable for veterinary clinics in their interaction with the client – a pet owner. It has got a user-friendly dashboard.

All the statistical data, such as earnings, appointments of each vet professional, etc. are easily seen and analyzed. It displays incoming requests and new bookings, and briefs on the pet parent and the pet itself.

The vet doctors can choose to either accept or deny the requests received.

Vetsie for Vets pet care app is fast, smooth, and easy to run. It contains the following set of key functionalities helping to ensure an efficient interaction process:

  • Video&Audio calls (Agora RTC, RTM, Agora web library);
  • Chat (file uploading, unread messages, voice messages);
  • Book consultation;
  • Google map integration;
  • Charts;
  • Reviews;
  • PDF reports;
  • Push notifications;
  • Stripe payment integration;
  • Facebook events.

Vetsie mobile app — Text / Audio Call feature.

TBR Group company has made a user-friendly app, easy to handle for both — by pet owners and medical workers. It enables the vet staff to balance out their work and time off and ultimately enhance pet care performance.

In Vetsie for Vets we have used Flutter, a brand-new framework produced and backed by Google, for cross-platform mobile and web dashboard development.
It is an open-source software based on the Dart programming language, and the SDK uses a C++ rendering engine.

Flutter provides widgets out of the box with an architecture grounded on reactive programming, which means that web and mobile apps built with Flutter are extremely responsive.

The code written with Flutter can be deployed onto different platforms. Providing high performance and building an amazing experience for the user, Flutter is an extremely user-friendly environment.

In 2021 Vetsie was selected by “Best Startup Canada” as one of the most promising start-ups.

It emerged in two articles: Care Startups and Companies in Alberta, and 10 Top Pet Startups and Companies in Alberta has given a considerable boost to a brand-new business.

Summary


TBR Group is a rapidly evolving company that specializes in web and mobile programming development.

We deliver custom mobile application solutions to bespoke complex projects within the timeline and at a sustainable budget. You are welcome to contact us at any time. The consultation is free, but it gives you a chance to move forward instantly.

Writing a Flutter Web plugin with JavaScript: a step by step guide

Introduction

If you have an idea of either creating or adding web support for a Flutter plugin, but you don’t have enough experience with JavaScript or Flutter Web, then this article is specifically intended for you. We will talk about how to call a JavaScript code from Dart, how to handle JavaScript calls on the Dart side, as well as about the features in writing such a code for a Flutter web plugin in JavaScript and Dart parts.

Communication between Dart and JavaScript

First of all we need to understand how we can pass data between Flutter and the Web. On Android and iOS platforms we use MethodChannel to invoke native parts from a Flutter app, but on the Web to make your Dart code capable of communicating with JavaScript and vice versa we need to use the official core package called js. It provides a way to declare methods that can be called from Dart and JavaScript code.
In your Flutter plugin project add js dependency into the pubspec.yaml file (the changes are highlighted):

flutter_plugin/pubspec.yaml

...
dependencies:
 flutter:
   sdk: flutter
 js: 0.6.3
...

To call JavaScript code from Dart, declare a global function in the JavaScript code and then create an external function with @JS() annotation in the Dart code.

JavaScript code example:
flutter_project/web/index.js

//Declares a global function
window.jsInvokeMethod = async (method, params) => {
   //Process your Dart call here
}

Dart code example:
flutter_plugin/lib/flutter_plugin_web.dart

@JS()
library callable_function;
 
import 'package:js/js.dart';
 
​​@JS()
external dynamic jsInvokeMethod(String method, String? params);

Finally, let’s call the JavaScript method from Dart.
flutter_plugin/lib/flutter_plugin_web.dart

dynamic sendMethodMessage(
   String method, String? arguments) {
 final dynamic response = jsInvokeMethod(method, arguments);
 //...
}

But most likely, if you add support for some native JavaScript library, you will face JavaScript asynchronous methods. In such a case to convert JavaScript Promise into the Dart Future, import package:js/js_util.dart and use promiseToFuture method.

Handle the JavaScript Promise Dart code example:
flutter_plugin/lib/flutter_plugin_web.dart

//...
import 'package:js/js_util.dart';
//...
 
Future<dynamic> sendMethodMessage(
   String method, String? arguments) async {
 final dynamic response =
     await promiseToFuture(jsInvokeMethod(method, arguments));
 //...
}

Now let’s call a Dart code from JavaScript. For that, we also need to declare a function with @JS named annotation and then create a function that can be called from JavaScript with allowInterop method from package:js/js.dart. Pass to the allowInterop method a callback function which will be triggered each and every time after JavaScript calls a jsOnEvent function.

Dart code example:
flutter_plugin/lib/flutter_plugin_web.dart

//..
@JS('jsOnEvent')
external set _jsOnEvent(void Function(dynamic event) f);
//..
 
//..
//Sets the call from JavaScript handler
_jsOnEvent = allowInterop((dynamic event) {
 //Process your JavaScript call here
});
//..

Now let’s call Dart from JavaScript.
flutter_project/web/index.js

window.jsOnEvent('Hello from JavaScript')

This is it, let’s move ahead and prepare the JavaScript code for the plugin.

JavaScript part of the Flutter plugin

The first thing to understand is that there is no need to create any folders with JavaScript code in your Flutter plugin. All JavaScript code will be either placed or imported directly in your web folder in the Flutter project.
First of all, create the index.js file in your Flutter project web folder. The code in the index.js will look something like this.

flutter_project/web/index.js

//Your JS libraries imports
//...
 
//Declares a global function
window.jsInvokeMethod = async (method, params) => {
   //Process your Dart call here
}
 
//Sends event to Dart
function callDart(event) {
   window.jsOnEvent(event)
}
 
//Your JS code
//...

Then create a package.json file in the web folder and put the code below there.

flutter_project/web/index.js

{
 "name": "web",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
   "build": "webpack --config webpack.config.js"
 },
 "dependencies": {
   "webpack": "5.28.0",
   "webpack-dev-server": "3.11.2",
   "webpack-cli": "4.5.0"
 }
}

Finally create a webpack.config.js file in the web folder and put this code there.

flutter_project/web/index.js

{
 "name": "web",
 "version": "1.0.0",
 "main": "index.js",
 "scripts": {
   "build": "webpack --config webpack.config.js"
 },
 "dependencies": {
   "webpack": "5.28.0",
   "webpack-dev-server": "3.11.2",
   "webpack-cli": "4.5.0"
 }
}

Install the npm if you previously did not. We will use webpack to generate the final JavaScript bundle file which we will deploy and connect to the index.html later.
Finally, create a webpack.config.js file in the web folder and put this code there.

Now navigate to the project web folder and run the npm install command:

$ cd ~/web
$ npm install

After that bundle your JavaScript files using npm run build command:

$ npm run build

The bundle.js file appears in the dist folder, which you can specify in the index.html file.

Let’s add it to the bottom of the head tag:
flutter_project/web/index.html

<!DOCTYPE html>
<html>
<head>
 <!--...-->
 <script type="text/javascript" src="./dist/bundle.js"></script>
</head>
<body>
 <!--...-->
</body>
</html>

Now you can call your JavaScript code from Dart, but let’s go a little further and deploy the bundle file to use it by HTTP link.

JavaScript bundle file deployment

To make your bundle file accessible by HTTP link, put it in the GitHub repository and use jsdelivr CDN to generate a jsDelivr link from your GitHub bundle file link.

Migrating from GitHyb to jsDelivr

Put this link instead of the local link in the index.html file.

flutter_project/web/index.html

<!DOCTYPE html>
<html>
<head>
 <!--...-->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NikitaPipita/flutter_web_plugin_example@master/web/bundle/bundle.js"></script>
</head>
<body>
 <!--...-->
</body>
</html>

Congratulations! Now your JavaScript bundle is accessible to use by the link.

Dart part of the Flutter plugin

Now let’s move to the Flutter plugin part. Add the following dependencies to the pubspec.yaml file (new changes are highlighted):

flutter_plugin/pubspec.yaml

...
dependencies:
 flutter:
   sdk: flutter
 flutter_web_plugins:
   sdk: flutter
js: 0.6.3
...

Also specify a Flutter plugin web entry point class and a path to it in the pubspec.yaml.

flutter_plugin/pubspec.yaml

flutter:
 plugin:
   platforms:
     android:
       package: com.example.flutter_plugin
       pluginClass: FlutterPlugin
     ios:
       pluginClass: FlutterPlugin
  web:
       pluginClass: FlutterPluginWeb
       fileName: flutter_plugin_web.dart

Let’s move on and code the web entry point class. Like on iOS and Android, the web part of the plugin also needs to be registered before being used. This is done in a static registerWith method in the web plugin class, which will be called when your web app starts.
To make your web support more compatible with previously added Android and iOS plugin realizations, let’s register previously used ones for communication with native parts MethodChannels here, in registerWith method, using Registrar from package:flutter_web_plugins/flutter_web_plugins.dart. Now all MethodChannels calls will be handled by the web plugin class.
Also, this is the most suitable place to use the allowInterop method to create a function that can be called from JavaScript.

The registerWith method code:
flutter_plugin/lib/flutter_plugin_web.dart

static void registerWith(Registrar registrar) {
 final MethodChannel channel = MethodChannel(
   'flutter_plugin',
   const StandardMethodCodec(),
   registrar,
 );
 
 final pluginInstance = FlutterWebPluginExampleWeb();
 channel.setMethodCallHandler(pluginInstance.handleMethodCall);
 
 //Sets the call from JavaScript handler
 _jsOnEvent = allowInterop((dynamic event) {
   //Process JavaScript call here
 });
}

The full code of web plugin class is provided:
flutter_plugin/lib/flutter_plugin_web.dart

@JS()
library callable_function;
 
import 'dart:async';
 
import 'package:flutter/services.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:js/js.dart';
import 'package:js/js_util.dart';
 
@JS('jsOnEvent')
external set _jsOnEvent(void Function(dynamic event) f);
 
@JS()
external dynamic jsInvokeMethod(String method, String? params);
 
class FlutterPluginWeb {
 static void registerWith(Registrar registrar) {
   final MethodChannel channel = MethodChannel(
     'flutter_plugin',
     const StandardMethodCodec(),
     registrar,
   );
 
   final pluginInstance = FlutterPluginWeb();
   channel.setMethodCallHandler(pluginInstance.handleMethodCall);
 
   //Sets the call from JavaScript handler
   _jsOnEvent = allowInterop((dynamic event) {
     //Process JavaScript call here
   });
 }
 
 Future<dynamic> handleMethodCall(MethodCall call) async {
   switch (call.method) {
     case 'sendMethodMessage':
       return sendMethodMessage(call.method, call.arguments);
     default:
       throw PlatformException(
         code: 'Unimplemented',
         details:
                 'flutter_plugin for web doesn\'t implement \'${call.method}\'',
       );
   }
 }
 
 Future<dynamic> sendMethodMessage(
     String method, String? arguments) async {
   final dynamic response =
       await promiseToFuture(jsInvokeMethod(method, arguments));
   //...
 }
}

Conclusion

That’s all! Now you can add web support for existing plugins or create your own ones. Hope this article has been helpful to you.