DEV Community: George Ikwegbu Chinedu

Implementing App and Universal Links in Flutter

George Ikwegbu Chinedu — Mon, 08 Apr 2024 15:06:04 +0000

It's no news that, come August 25, 2025, Firebase will no longer support dynamic links for Flutter applications. To that effect, we will need to handle the app link (for Android) and the universal link (for iOS) ourselves. And in this article, we will be doing so with the help of onGenerateRoute.

Table of Content

🎉 Introduction
✨ AppLink Overview
⚙️ Updating AndroidManifest.xml
🍦 Creating SHA256
💪 Creating & Hosting assetlinks.json file
🧪 Testing and Confirming assetlinks.json
🚀 Deploy app to PlayStore internal testing
✅ Confirm the link is auto verified in the device hardware app settings
🌐 Universal Link Overview
👮🏾‍♀️ Adding capability
📡 Creating & Hosting AASA file
🔌 Confirming Our AASA file
⚒️ Testing Via cmd xcrun
⛓️ OnGenerateRoute Setup and Routing to a dynamic page with data

🎉 Introduction

Deep or dynamic linking is a great feature that Flutter offers in its application to enable a continuance in data consumption from a website to a mobile application.

For instance, say you have an e-commerce website with products to be sold or an online campaign website where users need to vote or be voted for. A user could share a link to that product/profile with another user, who then clicks on the link to be led to the website to continue their business. In a situation where you have both a website and a mobile app and you want the users to still continue their business through the mobile interface, that is where a deep or dynamic link comes in.

NB: In situations where the shared user does not have the app installed, they'd be redirected to their respective device's stores (Play or Apple Store) to download and continue with the application.

PS: In this article, we will be handling the applink and universal link for Android and iOS, respectively.

✨ AppLink Overview

We will be following the official Android Guidelines.

⚙️ Updating AndroidManifest.xml

Navigate to your AndroidManifest.xml file and add the below intent inside your <android> block.

<meta-data android:name="flutter_deeplinking_enabled" android:value="true" /> 
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data android:scheme="https" />
    <data android:scheme="http" />
    <data android:host="gikwegbu.com" />
    <data android:host="www.gikwegbu.com" />
</intent-filter>

NB: You need `flutter_deeplinking_enabled` for it to work; that way, the route can be passed from the Android routing system into our Flutter application.

NB: Please update the `gikwegbu` host with your personal domain name.

🍦 Creating SHA256

We will need to create an SHA256 for our application. To do that, open your root project in the terminal and run the below code:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Then copy the SHA256 value that comes up.

💪 Creating & Hosting AssetLink.json file

You can either use the Statement List Generator and Tester link to Generate your statement and in future, Test your statement. Or simply update the below json file with your own details;

NB: This code MUST be saved in the assetLinks.json file.

[{
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.gikwegbu.app",
      "sha256_cert_fingerprints":
      ["PASTE YOUR OWN SHA256 HERE"]
    }
  }]

NB: Update the package_name with your app's own.

Congratulations if you've gotten to this place so far; you're a genius. But before we host our json file, we need to do something first. I assume you already have a PlayStore account and an APP created for your currently built application. If you don't, please pause and do so.

There is every tendency that your app already exists in the store, and you just want to include this feature, which is perfect. All I need you to do is get the SHA256 google Auto-created for you application in the integrity section of the console and update the sha256_cert_fingerprints in your AssetLink.json. Remember, it's an array of SHA256 values, so just a comma and the new SHA256 value from PlayStore console.

    [{
      "relation": 
      ["delegate_permission/common.handle_all_urls"],
       "target": {
      "namespace": "android_app",
      "package_name": "com.gikwegbu.app",
      "sha256_cert_fingerprints":
      ["PASTE YOUR OWN SHA256 HERE", "PASTE GOOGLE PLAY CONSOLE SHA256 HERE TOO"]
    }
  }]

Hosting your AssetLink.json file;

For this, you will have to reach out to the person managing the website, as we need to upload our file to a specific directory.

http://gikwegbu.com/.well-known/assetlinks.json

NB: It is very important that you place assetlinks.json inside the .well-known/ directory.

NB: The domain must match what you provided in your AndroidManifest.xml android:host data as well.

NB: Once it has been hosted, make sure it's accessible by visiting http://gikwegbu.com/.well-known/assetlinks.json. If it's accessible, you'll see the json data displayed.

🧪 Testing and Confirming AssetLink.json file

To test if your assetlink.json will be OK, provide the required details in the Statement List Generator and Tester, then click on Test Statement to confirm.

This will crawl your website, to confirm the assetlink.json file is present, and the SHA256 keys are also valid.

As a bonus, try inputing the SHA256 you got from the Google Play Console, to confirm it works too.

🚀 Deploy app to PlayStore internal testing

Based on my earlier assumption that you just created the app on your Google Console, we would be deploying to internal testing, just so we could test out our deep links before releasing them to the actual store.

NB: This article won't cover how to build and upload your appbundle to the store.

PS: If you have already released your app, no problem, just continue with the next step.

On your Google Play Console, go to the Deep Links on Side Navigation, If everything we've done so far has worked out well, you should get a pretty dashboard like below.

Getting Started

Successful Upload

NB: If there's still an issue, please reach out to me, and I'll be glad to help out.

NB: Once you have uploaded the appbundle to your internal testing, wait for a while (say an hour; honestly, I don't know how long it takes for Google to verify your assetlink and web domains) before installing it.

NB: When you have installed it on your device, go to your flutter app's details, select Set as default, > Supported web addresses and see if the host you provided in the AndroidManifest.xml is/are present there.

Your flutter app settings

Set as default

Approved Hosts

✅ Confirm the link is auto verified in the device hardware app settings

Because in our AndroidManifest.xml, we set the <intent-filter android:autoVerify="true">, therefore, you shouldn't see the toggle/switch button beside your host.

Approved Hosts

Whoop Whoooop!!!! We just finished Applink on our Android.

PS: Stick around to the end of the article to learn how the routing works with the onGenerateRoute configs in Flutter.

🌐 Universal Link Overview

For our iOS application, we will be using a Universal link, which is an exclusive type of deep link to Apple devices that uses either the http or the https schemes.

👮🏾‍♀️ Adding capability

In the next few steps, we will be working closely with XCode via the following steps:

Open your project in XCode,
In your Project Navigator, click on the Runner.
Click the Runner in the TARGETS section.
Select Signing & Capabilities.
Click on the + Capability,
When the Modal pops up, search for Associated Domains and add it.

After adding the Associated Domains, update the current web credential Domains with;

applinks:gikwegbu.com // first input
applinks:www.gikwegbu.com // second input

NB: I like adding more options so my app will be recognized when users try to access it with or without the www.

NB: While the above is the easiest and UI approach of adding the Runner.entitlements to your app, you could just create. a Runner.entitlements file within your ios/Runner/ directory, ad add the below code manually:

<?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>com.apple.developer.associated-domains</key>
    <array>
        <string>applinks:gikwegbu.com</string>
        <string>applinks:www.gikwegbu.com</string>
    </array>
</dict>
</plist>

NB: gikwegbu.com should be your own domain.

From our Step 3 above, whilst still on the Runner in the TARGET section:

Click on the info tab.
Open the URL Types dropdown and complete the form with below data:

identifier : your app's bundle Identifier,
URL Schemes: https.

NB: You can get you bundle Identifier from your Signing & Capabilities tab in XCode.

NB: For the iOS routing system to successfully parse the dynamic url back into our Flutter application, we need to add the below data into our info.plist file;

<key>FlutterDeepLinkingEnabled</key>
<true/>

📡 Creating & Hosting AASA file

Open your project root in the terminal and run the below code:

$ touch apple-app-site-association

Then copy and paste the below code, with your own data;

{   
  "applinks": {       
    "apps": [],

    "details": [{           
        "appID": "[TEAM_ID].[APP_BUNDLE_ID]",           
        "paths": ["[PATH_FOR_REDIRECTION]"]
    }]
  }
}

NB: To get your Team_ID, just open your apple dev account, you'd see the ID by the top right, underneath your name of your screen,

"paths": [
       "/your_path", // Users will be be redirected if they visit <https://gikwegbu.com/your_path>
       "/your_path/*", // Users will be redirected if they visit  <https://gikwegbu.com/your_path/[shduewjakssd]>
       "*", // will be redirected to any link <https://gikwegbu.com/[wild card links]>
       "NOT /your_path", // Users will be be redirected  to any link other than <https://gikwegbu.com/your_path>
       "NOT /your_path/*", // Users be redirected to any link other than <https://gikwegbu.com/your_path/[wild card]>

]

Once you're done with the above, host the AASA file on your domain, within the .well-known/ directory, just like you did with your Android assetlinks.json file.

🔌 Confirming Our AASA file

To confirm if the AASA file was properly hosted, once you visit the http://gikwegbu.com/.well-known/apple-app-site-association, the file will automatically be downloaded onto your machine.

NB: gikwegbu will be your own domain.

⚒️ Testing Via cmd xcrun

First make sure your XCode is running your Flutter app, Open your terminal and run the below code:

$ xcrun simctl openurl booted https://gikwegbu.com/guest/dsewe

NB: Since we haven't worked on the Routing system in our Flutter app, the above command should simply launch your app.

⛓️ OnGenerateRoute Setup and Routing to a dynamic page with data

For an efficient and cleaner codebase, I like to keep all my routes in a separate file.

Within your MaterialApp, in your main.dart file, you can add your onGenerateRoute data and point it to the external routes file.

Image of the main.dart file

Here, we will create a class called Routes;

class Routes {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    debugPrint('${settings.name} Is the current route' );

    if (settings.name!.contains('guest')) {
      final page = PreInviteInfoScreen(
        code: settings.name!.split('/').last,
      );
      return MaterialPageRoute(builder: (_) => page);
    }

    final args = settings.arguments;  // For screens that requires arguements to be passed
    switch (settings.name) {
      case HomeView.routeName:
        const page = HomeView();
        return MaterialPageRoute(builder: (_) => page);
      default:
        const page = HomeView();
        return MaterialPageRoute(builder: (_) => page);
    }
  }
}

NB: For more context, say the link our users clicks on is https://www.gikwegbu.com/guest/Uhdys, the if statement, will check if that route has the guest keyword, then extract to get the code as it a URL PATH.

This way, when a user clicks on the link above, only the Uhdys is now being passed as the argument for the next screen immediately the app launches.

THE END

So with the above sets of instructions and examples, you should be able to get the Applink and Universal link ready for your FLutter application. CONGRATULATIONS AND GOOD LUCK.

Custom Flutter GroupListView Widget

George Ikwegbu Chinedu — Mon, 05 Feb 2024 09:08:50 +0000

Table of Content

🎉 Introduction
✨ Items JSON
⚙️ Modeling our Data
🍦 Implementation
💪 Full Code
💙 Summary

🎉 Introduction

You may need to arrange items in an orderly manner at some point. These objects might be anything, employing a specific property in their object, from a list of books to questions.

NB: Check out my previous article, in which I explain how to create a form in Flutter dynamically. I used this article to group the questions according to their order.

✨ Items JSON

I would be constructing a basic JSON data set as our source data in order to keep things simple. Although this will be relatively little data, you can reuse the function in your larger dataset after you understand how it operates.

// Continent and Country Json data
const itemsJsonData = 

[
  {
    "id": 0,
    "continent": "Africa",
    "country": "Nigeria", 
    "order": 1
  },
  {
    "id": 1,
    "continent": "Asia",
    "country": "Cambodia", 
    "order": 10
  },
  {
    "id": 2,
    "continent": "NorthAmerica",
    "country": "Canada", 
    "order": 2
  },
  {
    "id": 3,
    "continent": "NorthAmerica", 
    "order": 2
  },
  {
    "id": 4,
    "continent": "SouthAmerica",
    "country": "Brazil", 
    "order": 3
  },
  {
    "id": 5,
    "continent": "Europe",
    "country": "Austria", 
    "order": 12
  },
  {
    "id": 6,
    "continent": "Africa",
    "country": "Burundi",
    "order": 1
  },
  {
    "id": 7,
    "continent": "Asia",
    "country": "Azerbaijan",
    "order": 10
  },
  {
    "id": 8,
    "continent": "NorthAmerica",
    "country": "Belize",
    "order": 2
  },
  {
    "id": 9,
    "continent": "NorthAmerica",
    "country": "Antigua and Barbuda",
    "order": 2
  },
  {
    "id": 10,
    "continent": "SouthAmerica",
    "country": "Argentina",
    "order": 3
  },
  {
    "id": 11,
    "continent": "Europe",
    "country": "Andorra",
    "order": 12
  },

];

NB: Pay close attention to the continent and country 
dataset and it's ordering and how it is an `int`..

NB: Request the server sends the `order` as an `int` 
value. Else, you might have to map over the keys and turn 
them to `int`

⚙️ Modeling our Data

For simplicity sake, we would be creating a model, which will enable us interact with the data efficiently.

class ContCountryModel {
  final int? id;
  final String? continent;
  final String? country;
  final int? order;

 ContCountryModel({
    this.id, 
    this.continent, 
    this.country, 
    this.order,
   });

   factory ContCountryModel.fromJson(Map<String, dynamic> json) => ContCountryModel(
        id: json["id"],
        continent: json["continent"],
        country: json["country"],
        order: json["order"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "continent": continent,
        "country": country,
        "order": order,
    };

  List<ContCountryModel> fromList(List<dynamic> items) {
    if(items.isEmpty) {
      return [];
    } else {
      return items.map((e) => ContCountryModel.fromJson(e)).toList();
    }
  }
}

🍦 Implementation

NB: We won't be covering the network calls; as I assume, you already have the data list in your system and just want to create the grouped list

// We will be needing the `groupBy` found in the `collection` package to first group our items.

import 'package:collection/collection.dart';



// Placed within the State of your stateful widget
List<ContCountryModel> _itemList = [];

Map groupItemsByOrder(List<ContCountryModel> items) {
 return groupBy(items, (item) => item.order);
}
// When the above function runs, it'll arrange all the items by their `order`. But since the `order` is a `String` datatype, it won't be mathematically correct, e.g; `10` will come before `2`.


// Placed within state builder:

Map groupedItems = groupItemsByOrder(_itemList);

// NB: You can either load the `_itemList` in the `initState` or use any `state management` system of your choice to get the data.


// Here we will be using a `ListView.builder` within a `ListView.builder` to get our `Continents` and the `Countries` within it in a grouped fashion


ListView.builder(
  itemCount: groupedItems.length,
  itemBuilder: (BuildContext context, int index) {

    var sortedKeys = groupedItems.keys.toList()..sort();
   // Since the groupedItems is a Map,we can use the .keys, 
      to get all the keys, then turn it into a list before 
      sorting it

    int order = sortedKeys.elementAt(index);
    // Recall that groupedItems returns a Map of data grouped 
       by 'order', hence using the above listView index,

    // we fetch the key that matches the index, which inturn 
       becomes the active 'order' in the current loop.

    List<ContCountryModel> itemsInCategory =
groupedItems[order]!;

     // With the help of the retrieved `order` , we now get 
        the items in the category data, with which we would 
        use to create the second ListView

     // Return a widget representing the category and its 
        items

     return Column(
              children: [
                 Padding(
                   padding: const EdgeInsets.only(top: 20),
                   child: Text(
                         "${itemsInCategory.first.continent}:"),
                   ),
                 ListView.builder(
                   shrinkWrap: true,
                   physics: const ClampingScrollPhysics(),
                   itemCount: itemsInCategory.length,
                   itemBuilder: (BuildContext context, int 
                       index) {
                       ContCountryModel each = 
                      itemsInCategory[index];
                          int _originalListIndex = _itemList
                              .indexWhere((q) => q.id == each.id);
                          // Return a widget representing the item
                          return Padding(
                            padding: const EdgeInsets.symmetric(
                              vertical: 10.0,
                            ),
                            child: Text("${each.country}"),
      );
     },
    ),
   ],
  );
 },
),

💪 Full Code

Here is the full code implementation:



import 'package:flutter/material.dart';
import 'package:collection/collection.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GrouupedList Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Grouped List'),
    );
  }
}



class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  }) : super();

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

// Placed within the State of your stateful widget
  List<ContCountryModel> _itemList = [];

  Map groupItemsByOrder(List<ContCountryModel> items) {
   return groupBy(items, (item) => item.order);
  }
  // When the above function runs, it'll arrange all the items by their `order`. But since the `order` is a `String` datatype, it won't be mathematically correct, e.g; `10` will come before `2`.

   @override
   void initState()  {
    _itemList = ContCountryModel().fromList(itemsJsonData);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Map groupedItems = groupItemsByOrder(_itemList);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: groupedItems.length,
                itemBuilder: (BuildContext context, int index) {

                  var sortedKeys = groupedItems.keys.toList()..sort();
                  // Since the groupedItems is a Map,we can use the .keys, to get all the keys, then turn it into a list before sorting it

                  int order = sortedKeys.elementAt(index);
                  // Recall that groupedItems returns a Map of data grouped by 'order', hence using the above listView index,
                  // we fetch the key that matches the index, which inturn becomes the active 'order' in the current loop.

                  List<ContCountryModel> itemsInCategory =
                      groupedItems[order]!;
                  // With the help of the retrieved `order` , we now get the items in the category data, with which we would use to create the second ListView

                  // Return a widget representing the category and its items
                  return Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(top: 20),
                        child: Text(
                              "${itemsInCategory.first.continent}:"
                            ),
                      ),
                      ListView.builder(
                        shrinkWrap: true,
                        physics: const ClampingScrollPhysics(),
                        itemCount: itemsInCategory.length,
                        itemBuilder:
                            (BuildContext context, int index) {
                          ContCountryModel each = itemsInCategory[index];
                          int _originalListIndex = _itemList
                              .indexWhere((q) => q.id == each.id);
                          // Return a widget representing the item
                          return Padding(
                            padding: const EdgeInsets.symmetric(
                              vertical: 10.0,
                            ),
                            child: Text("${each.country}"),
                          );
                        },
                      ),
                    ],
                  );
                },
              ), // ListView Ends here
            )

          ],
        ),
      )
      // Body ends here
    );
  }
}


class ContCountryModel {
  final int? id;
  final String? continent;
  final String? country;
  final int? order;

 ContCountryModel({
    this.id, 
    this.continent, 
    this.country, 
    this.order,
   });

   factory ContCountryModel.fromJson(Map<String, dynamic> json) => ContCountryModel(
        id: json["id"],
        continent: json["continent"],
        country: json["country"],
        order: json["order"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "continent": continent,
        "country": country,
        "order": order,
    };

  List<ContCountryModel> fromList(List<dynamic> items) {
    if(items.isEmpty) {
      return [];
    } else {
      return items.map((e) => ContCountryModel.fromJson(e)).toList();
    }
  }
}

// Continent and Country Json data
const itemsJsonData = 

[
  {
    "id": 0,
    "continent": "Africa",
    "country": "Nigeria", 
    "order": 1
  },
  {
    "id": 1,
    "continent": "Asia",
    "country": "Cambodia", 
    "order": 10
  },
  {
    "id": 2,
    "continent": "NorthAmerica",
    "country": "Canada", 
    "order": 2
  },
  {
    "id": 3,
    "continent": "NorthAmerica", 
    "order": 2
  },
  {
    "id": 4,
    "continent": "SouthAmerica",
    "country": "Brazil", 
    "order": 3
  },
  {
    "id": 5,
    "continent": "Europe",
    "country": "Austria", 
    "order": 12
  },
  {
    "id": 6,
    "continent": "Africa",
    "country": "Burundi",
    "order": 1
  },
  {
    "id": 7,
    "continent": "Asia",
    "country": "Azerbaijan",
    "order": 10
  },
  {
    "id": 8,
    "continent": "NorthAmerica",
    "country": "Belize",
    "order": 2
  },
  {
    "id": 9,
    "continent": "NorthAmerica",
    "country": "Antigua and Barbuda",
    "order": 2
  },
  {
    "id": 10,
    "continent": "SouthAmerica",
    "country": "Argentina",
    "order": 3
  },
  {
    "id": 11,
    "continent": "Europe",
    "country": "Andorra",
    "order": 12
  },

];

💙 Summary

In this article, we were able to

create a model class for our item that also houses a .fromList method that enables you to easily get a list of items from a dynamic list and the .fromJson also to easily map our json data onto our model.
Provide a dummy list for the item, and lastly,
Implement a ListView within a ListView, which would represent the sorted items while having it's continent as a Header placed above each section of the list..

NB: Once you understand how the above was achieved, you can create multiple UI using the same approach.

Flutter Apple Auth Implementation

George Ikwegbu Chinedu — Tue, 16 Jan 2024 09:14:25 +0000

NB: This article is not for a total beginner, as you need a basic understanding of how Flutter works and API consumption to fully comprehend this article.

Table of Content

✨ Introduction
💪 Flutter Auth Packages
🍏 Apple accepted Data Flow
😬 Edge Cases

✨ Introduction

Apple Sign-In is a feature that enables users of your application to either sign up or sign in to your application using their iCloud account across all of your platforms while utilizing two-factor authentication. In this article, we will be looking at how to use the Flutter package to complete this feature on a mobile phone.

Sign in with Apple flow: From Apple

For full information about this sign in with Apple, please make reference to this site: Authenticating users with Sign in with Apple

💪 Flutter Auth Packages

To follow up with this article, we will be using the sign_in_with_apple package. To avoid repetitions, you can follow the instructions on this package page.

In summary, select Sign In with Apple Capability.
NB: You can achieve this by simply:

Going to your XCode,
Select Signing & Capabilities tab,
Click on the Capability beneath, a modal pops up.
Either scroll down or just search for sign, you should see the option,
Select to enable it.

🍏 Apple accepted Data Flow

Once a user has authenticated and either accepted to show or hide their email, they should be either registered or logged into your application (depending on what feature you're using it for) and not redirected to complete anything else, as that will make the review team flag your app during testing.

Best advice: make your signup endpoint either flexible or have a different endpoint for social OAuths. That way, you get to prompt the user to update their profiles once they're already logged into the system.

SignInWithAppleButton(
  onPressed: () async {
    final credential = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );

    print(credential);

    // Now send the credential (especially `credential.authorizationCode`) to your server to create a session
    // after they have been validated with Apple (see `Integration` section for more information on how to do this)
  },
);

Images from Sign_in_with_apple

😬 Edge Cases

Apple's authentication is so security tight, that you as the developer will only get the user's email just once, and which is the initial time they used the apple service to sign into your application. If the log out of your application and tried to log back in, there's a tendency of it not working, as you might be expecting their email to continue.

To circumvent that, I'd suggest that you first check if the email is returned from the above code, if yes then continue with your normal implementation, else, send the identityToken, which is a value returned from the apple api call to your server. Then your server gets to decode that jwt_token, gets the email address and checks if user exist in the system.

PS: You can actually decode the jwt_tpken from you flutter side first and still re-use your supposed api.

This might be a security flaw, what do you think?

flutter iOS app is stuck on launchScreen when installed on real device 🚀🚀🚀🚀

George Ikwegbu Chinedu — Tue, 05 Dec 2023 20:09:22 +0000

NB: This is going to be a really short article 🥹🥹.

While working on my application with my team, we noticed our app was stuck on the splash screen, though this wasn't happening across all devices, as some ios devices went past the splash screen while some were simply stuck.

This even made apple to reject our submission on the basis of Performance - App Completeness.

To keep this short, make sure that all your functions in your main.dart is working well. In my own case, the culprit was my setupNotification() where I handled my pushNotification.

This required me to get the firebase token and also subscribe the device to a topic.

Well, this was where my headache started. I had gone forward to subscribe the device to a topic, which was causing the problem. The painful part was that I didn't get log on my IDE. Luckily for me I was able to see the exception from my firebase crashlytics.

Apparently, I needed to request for the APNSToken for iOS before I can subscribe to the topic.

final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;

  if (Platform.isIOS) {
      String? apnsToken = await _firebaseMessaging.getAPNSToken();
      if (apnsToken != null) {
        try {
          await _firebaseMessaging.subscribeToTopic('notificationChannel');
        } on FirebaseException catch (e) {
          debugPrint("George here is the error: $e");
        }
      } else {
        await Future<void>.delayed(const Duration(seconds: 3));
        apnsToken = await _firebaseMessaging.getAPNSToken();
        if (apnsToken != null) {
          try {
            await _firebaseMessaging.subscribeToTopic('notificationChannel');
          } on FirebaseException catch (e) {
            debugPrint("George here is the error: $e");
          }
        }
      }
    } else {
      try {
        await _firebaseMessaging.subscribeToTopic('notificationChannel');
      } on FirebaseException catch (e) {
        debugPrint("George here is the error: $e");
      }
    }

This way, the error was corrected.

NB: Just trace the functions you have running in your main that might be throwing an error.

Thanks...

Integrating Zendesk with Flutter

George Ikwegbu Chinedu — Mon, 22 Aug 2022 20:02:04 +0000

Image Credit: Pexels by Cottonbro

Table of Content

🕹 Introduction
🎥 Tips
🧰 Zendesk Flutter Package
🧰 implementation
🎙 Setting up Channel Message
📲 Codebase

🕹 Introduction

Zendesk is an American company headquartered in San Francisco, California. It provides software-as-a-service (Saas) products related to customer support, sales, and other customer communications.

This Saas, provides a ticketing platform for users, and companies at large. In this article, you'll learn how to integrate zendesk into your flutter application with ease, setup and configure your zendesk dashboard for the utmost experience.

NB: This article covers both the android and iOS Flutter platform

🎥 Tips

Before we continue, there are somethings I'd love to get out of the way,

You should be familiar with Flutter and how to add Packages.
Already created a zendesk admin account or have access to it. If you don't (probably as the developer), do well to reach out to the person managing the zendesk platform, share this article or explain the information you'll be needing from them.

🧰 Zendesk Flutter Package

There are lots of zendesk packages on the pub.dev platform, but I found one to be very detailed and worked well for me. Click on zendesk_messaging, copy the current version and add to your pubspec.yaml file.

🎥 Implementation

Once you have added the package to your pubspec.yaml, run the below code in the terminal of your project's root.

flutter pub get

In other not to repeat the implementations, do follow through with what you see on the zendesk_messaging package screen. I'd only walk you through where to get the necessary information.

🎙 Setting up Channel Message

On your zendesk admin dashboard, with side navigation bar, go to the Channel -> Messaging and Social, select the message tab.

Incase no messaging channel has been added yet, you'd have to click on the 'Add Channel' dropdown button, to select your options, which in our case will be the 'Android and iOS'

Upon selection of either the Android or iOS channel, you'll be walked through on the settings, there you'll find your "channel key", please copy this out and store in your code.

NB: It's platform specific, meaning both the Android and iOS have different channel keys.

From the Above Image, you'd notice six (6) tabs;

1. The Basic, which is essentially where you see the name 
   of the channel you're currently working on.

2. The Style, here you set the color of the zendesk on 
   either platform you're working on, you could provide 
   your app's color, so it'll still match your beautiful 
   UI.

3. The Response, you get to configure how to respond to 
   messages, add bot privileges etc...

4. The Notification, well it's like adding Firebase Cloud 
   Messaging, for push notifications in your mobile app.

5. The Authentication, here, you'll be redirected to go 
   setup your "jwt", a short form of "Javascript Web 
   Token", which plays a vital role, in recognising  and 
   retaining users once they are chatting with you (The 
   help center)

📲 Codebase

Like I said previously, if you (as a developer), don't have access to the zendesk dashboard, you can request for the above information from the person managing the dashboard.

Initialising Zendesk in your applicaition.

// paste the android and ios channel keys you earlier copied out here.

// These keys, should be placed in a .env file, and added to the .gitignore file, so you don't check it into any version control system.

final String androidChannelKey = '';
final String iosChannelKey = '';

  @override
  void initState() {
    super.initState();
    ZendeskMessaging.initialize(
      androidChannelKey: androidChannelKey,
      iosChannelKey: iosChannelKey,
    );
  }

Showing the Zendesk

ZendeskMessaging.show();

NB: The above method could be added to any GestureDetector of your choice, say onTap, of a button, to pop up the zendesk platform.

Authenticating Users

This is optional, but necessary if you want to keep track of the user chat across platforms, meaning, if user closes and opens the application again, the chat history will be there.

PS: The Zendesk must be initialised before you authenticate.

// Remember the 'jwt' from the Authentication tab on your zendesk dashboard, replace the "YOUR_JWT" with your actual 'jwt'

final ZendeskLoginResponse result = await ZendeskMessaging.loginUser(jwt: "YOUR_JWT");
await ZendeskMessaging.logoutUser();

Flutter Paystack All Options Implementation

George Ikwegbu Chinedu — Thu, 21 Jul 2022 08:51:00 +0000

Table of Content

🕹 Introduction
📡 Required Paystack Details and Endpoints
🖲 Installing WebView Package
🛢 Making API calls in Flutter
📲 Displaying Paystack pop-up in webView
💾 Listening For Navigation url
💙 Important Notes for Release APK

🕹 Introduction

As at the time of writing this article, paystack integration for android and mobile SDK, only supports card payments and bank (with just Zenith as the option).

In this article, you will learn how to include other payment options in your flutter application.

PS: I'm assuming you are familiar with flutter and 
paystack with all the necessary keys and how to get them 
from your paystack dashboard.

Before we continue, please take a quick look at this article from Paystack, that's where I got ideas from 😋. If you want, you could use that article, or continue reading.

📡 Required Paystack Details and Endpoints

You will need your paystack secret_key (use the test key for testing and live key for prod) as your Bearer token in your Authorization header while making a POST request to the paystack initialize api.

Check the below images for better understanding.

Setting your authorization header with secret_key

POST body details

email: This is the payers email.

amount: This is the amount to be paid, please multiply by 
        100, to remove the kobo value

reference: This should be randomly generated as it should 
           be a unique value for each payment.

callback_url: This is the most important part. If you 
              already have a callback url, setup from your 
              paystack dashboard, you don't need this 
              parameter. If you still go ahead to include 
              it, it'll override that of the dashboard. 
              This callback_url is what we will be 
              listening for from our webview.

cancel_action: This will be used to listen for when the 
               user wants to cancel payment, we then pop 
               the webview screen.

Response from paystack API

authorization_url: This is the most important data we will 
                   be needing for our webview, so hold on 
                   to it 😎.

🖲 Installing WebView Package

To install this package, please visit this link, read through the setup and install it.

🛢 Making API calls in Flutter

This approach depends on which architecture you're using to build your application, at the end, it's all the same response you will receive. In this article, i'll be keeping it really simple 🥹.

var headers = {
  'Authorization': 'Bearer sk_test_039***************',
  'Content-Type': 'application/json',
};
var request = http.Request('POST', Uri.parse('https://api.paystack.co/transaction/initialize'));
request.body = json.encode({
  "email": "g.ikwegbu@gmail.com",
  "amount": "10000",
  "reference": "randomDetails",
  "callback_url": "https://github.com/gikwegbu",
  "metadata": {"cancel_action": "https://www.google.com/"}
});
request.headers.addAll(headers);

http.StreamedResponse response = await request.send();

if (response.statusCode == 200) {
  print(await response.stream.bytesToString());
}
else {
  print(response.reasonPhrase);
}

PS: I personally love using the flutter dio package

Retrieve the authorization_url from the response and store 
it in a global variable.

📲 Displaying Paystack pop-up in webView

Ok, let's be on the same page here 🙃. We are building an application that allows users make payment for an item via paystack.

🏳️ The Data Flow:

when the user clicks on the PAY button, the paystack pops-up, user selects whichever option that's suitable, and proceed. Once the payment is successful, we will be redirected to a callback_url. Once this happens, we will have to be listening for that callback_url, which when detected, allows us to close the webview widget, and then continue with sending our reference code to our server to complete checking out of the PAID item.

🏳️ Implementation:

To make the process seamless, i'd be using a popup dialog, set it to fullscreen to overlay our current page, add the webview widget.

Below is a code snippet that will help you understand more:


// This is called when the PAY button is clicked.
_showPaystack() async {
    var _ref = 'ChargedFromMyApp_${DateTime.now().millisecondsSinceEpoch}';
    Map data = {
      // Removing the kobo by multiplying with 100
      "amount": double.parse('${_amount * 100}').toInt(),
      "email": _user.email,
      "reference": _ref,
      "callback_url": "https://github.com/gikwegbu",
      "metadata": {"cancel_action": "https://www.google.com/"}
    };
    // This awaits the [authorization_url](#authUrl). NB: I'm using the MVVM architecture in my live code, but it's still the same process of retrieving the authURL.
    var authUrl = await _profileCtrl.paystackWebViewChargeCard(data);

    // only pull-up the dialog box when we get the authURL
    if (authUrl != null) {
      return showGeneralDialog(
          context: context,
          barrierDismissible: true,
          barrierLabel:
              MaterialLocalizations.of(context).modalBarrierDismissLabel,
          barrierColor: Colors.black45,
          transitionDuration: const Duration(milliseconds: 200),
          pageBuilder: (BuildContext buildContext, Animation animation,
              Animation secondaryAnimation) {
            return Center(
                child: Container(
              width: MediaQuery.of(context).size.width - 10,
              // height: MediaQuery.of(context).size.height - 80,
              height: MediaQuery.of(context).size.height - 0,
              padding: const EdgeInsets.only(top: 40),
              color: Colors.white,
              child: WebView(
                initialUrl: authUrl.toString(),
                javascriptMode: JavascriptMode.unrestricted,
                userAgent: 'Flutter;Webview',
                navigationDelegate: (navigation) {
                  //Listen for callback URL
                  if (navigation.url == "https://standard.paystack.co/close") {
                    Navigator.of(context).pop(); //close webview

                    // _txnRef is my glabally created variable to handle my reference
                    _txnRef = _ref;
                    _submit();
                  }
                  if (navigation.url ==
                      "github.com/gikwegbu?trxref=$_ref&reference=$_ref") {
                    Navigator.of(context).pop();
                    _txnRef = _ref;
                    _submit();
                  }
                  if (navigation.url == "https://www.google.com/") {
                    Navigator.of(context).pop();
                  }
                  return NavigationDecision.navigate;
                },
              ),
            ));
          });
    }
  }

The _submit(), is a function that sends the reference to 
my backend to complete the purchase transaction on the 
selected item.

💾 Listening For Navigation url

From the above code snippet, you'd have noticed the navigationDelegate section, this is where you'll handle listening for the callback_url and also, in the case the user is making payments with a Card, and the 3Ds Authentication will have to redirect you to the 'https://standard.paystack.co/close'. Other than that, we will listen for our custom callback_url, and then pop our screen.

💙 Important Note For Release apk

The application will actually work while in debug mode, but will through an error or not work at all in released build, as you'd only be seeing a gray overlay.

Steps Taken to Resolve this.

<uses-permission android:name="android.permission.INTERNET" />

in your android/app/src/main/AndroidManifest.xml.

if (Platform.isAndroid) WebView.platform = AndroidWebView();

Inside of your initState(){} function of your file. This means you'd have to be using a "Stateful" widget.

This is the most important. Run

flutter run --release

This would help you build your app as in 'release mode', but you can still be seeing your debugs in your console. Now watch closely if you see an error like I/flutter (18782): Another exception was thrown: Instance of 'DiagnosticsProperty<void>', if so, then please look for where Expanded widget was used in your implementation and remove it.

Finally

We have successfully integrated our paystack payment system with multiply option into our flutter application. To experience the multiple option, please change from your test secret key to your live secret key, only then will you see the

Unhandled exception: ProcessException: No such file or directory, Command PhaseScriptExecution failed with a nonzero exit code

George Ikwegbu Chinedu — Fri, 10 Jun 2022 11:28:00 +0000

Photo by eberhard grossgasteiger

As at the time of writing this article, I had already told my parents to prepare a farmland for me, as tech is not my calling again 😂😂😂😂.

This is going to be a different pattern of writing my 
articles.

So if you come across this article as being a solution to a similar problem as the title, well, leave a thumbs up.

So I cloned a flutter project to work on, started off with installing my flutter SDK and the xcode version that the project was created with.

First ran for the android, which worked without issues, but when it got to the iOS, everything went south in split second.

I reached out to the Engineer handling the project initially, we went through installations and codes again, found nothing, I was advised to downgrade my xcode and try again... Long story short, I currently have xcode 13.4, 13.3, 13.3.1, 13.2.1 in my mac 😂.

An image of my error message:

Well, none of the solutions found on stackoverflow and github issues worked for me. Which included the following:

Open the terminal On the root directory of your project, run:

   $ flutter clean
   $ flutter pub get

   // cd into your ios directory
   $ cd ios
   $ pod deintegrate
   $ pod install

   // cd out of your ios directory
   $ cd ..

   // try running the project on your ios simulator
   $ flutter run
   // Be sure your ios simulator is active

Having done all of the above, and even did flutter doctor, just to confirm if I had issues with my installations and setup, nothing worked for me.

The most confusing thing was that, a dummy flutter project I created worked just fine, same as a flutter project I had created with my windows some months back and cloned into my mac, all worked out just fine for both Android and iOS.

I found a regex code

grep -riL "<path to your flutter sdk>" "<path to your project>"

this searches through your project for instances of the flutter sdk in that project. I saw logs for the dummy project and that of the flutter project created with my window, but for this current project, it was showing 'No such directory found'.

Well, my last resort was to open an issue on github, which I reluctantly did, as I saw thousands of opened issues, didn't even expect anyone to look at mine...

Well let's say someone did, and instantly noticed the problem.

Solution

The URL of the cloned project, had a space after the name, 
and git used same pattern to create the directory on my 
machine and this caused the whole problem.

Below is a link to the issue I opened and closed 💁🏽.

Link to Github Issue

Hope it helps.

Signing and Compiling Flutter APK

George Ikwegbu Chinedu — Sun, 24 Oct 2021 15:49:02 +0000

Photo Credit: Fritz Hoste From Pexel

🎊 Introduction
🧶 Change App Icon
🎢 Change Name of App
🎪 Sign App
🎭 Release Configuration
🎨 Build APK

🎊 Introduction

First of all, I would like to say a very big congratulations on finishing that awesome app of yours with flutter. What's next? you might ask, Ok time to build and realese a signed version of your application, and possibly upload it to the Google PlayStore.

NB: As at the time of writing this article, I do not own a 
macbook 😥, so the focus would be just for windows users 🙂. If 
you wish to help out, sure, reach out to me 🥰.

In this article, I will be walking you through on how to successfully sign your apk file and the possible errors you might encounter, with their possible solutions.

NB: At the time of writing this article, PlayStore no longer 
accept 'APK' files but 'App Bundle'.

For more information, see Android App Bundle and About Android App Bundles.

🧶 Change App Icon

By default, Flutter ships it's brand logo, as your default app icon. To change to your custom icon, there are various approach you can take. Take a look at one of them in another article I wrote here.

🎢 Change Name of App

For any reason, you would like the name of your application to be changed to something else, take these few steps:

In your project directory, locate your android\app\src\main\AndroidManifest.xml
Open the AndroidManifest.xml, and change the android:label to your app name.

    // Enter the new name, and remove the square bracket.
    // If you wish for you app to have access to internet, add
    <uses-permission android:name="android.permission.INTERNET" />
    <application
     android:label="[NEW NAME]"
     ...

🎪 Sign App

By signing your application, you're providing it with it's digital signature. For future updates on the app, this created signature will serve as an authentication. With that being said, try and keep the signature/keys safe, and don't check it into any version control system. Follow the below steps to sign you app:

1. Create a keystore.

Preferably, in your VsCode terminal, which I presume will have it's current directory to be the root of your project. In my case, I have 'C:\Users\usser\Documents\Flutter_Github\shopy>', but depending on where you wish to store the keystore.jks file we are about to create, you then navigate to the directory and paste the below code in your VsCode terminal

  keytool -genkey -v -keystore myCustom-Keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias custom

NB: The 'myCustom-keystore.jks', can be any name you wish to save the file as, while the 'custom' is the alias of the keystore file.
The -storetype JKS tag is only required for Java 9 or newer. As of the Java 9 release, the keystore type defaults to PKS12.

NB: The keytool command you just ran, might not have worked, don't freak out (at least not 
yet 🤣). The reason is that the keytool might not have been in your path, as it's part of 
Java which was installed alongside your Android Studio Software. To correct this problem, 
run 'flutter doctor -v', copy the path after the 'Java binary at:', paste it in your 
VsCode terminal, remove the 'java' at the end of the path you copied and replace it with 
the keytool command we saw ealier.

NB: From the Image above, I am making use of Cmder, to run the 'flutter doctor -v', so you can see the process clearly.

NB: If your path (just like mine in the above image), includes space-separated names, such 
as 'Program Files' and 'Android Studio' (in my own case), for windows, use quotes (e.g 
'Program Files' and 'Android Studio') to escape the space, or use back-slash for 
Mac/Linux (e.g Program\ Files and Android\ Studio), to escape the space.

Once you paste the new command, and hit enter, you will be prompted to provide a password, after which you would have to provide other sets of information. Remember to read through and thoroughly before continuing.

🎭 Release Configuration

In this section, we would generally talk about keystore, and how to reference it from the app, then we would learn how to configure the signing in gradle.

1. Reference the keystore from the App

In your 'android' root folder, create a file called 'key.properties', copy and paste the below code into it (PS: Don't copy the comment also).

storePassword=<The password you entered in the command prompt>
keyPassword=<The password you entered in the command prompt>
keyAlias=custom
storeFile=<location of the key store file>

/* 
   1. When you pasted your keytool command, you were prompted to enter a password, that'll 
   be the same you will enter as the storePassword and keyPassword, provided you used same 
   password.
*/

/*
   2. The keyAlias, i.e the name after the '-alias' in the keytool command is what you will 
   provide here.
*/

/*
   3. For the storeFile, this is the location where you stored the keyStore file. In our 
   example above, I stored it in the root of our project.
*/

2. Add Signing Config in Gradle

The next step to take is to configure your gradle, so it'll be aware of your keystore and be able to use it when building your app in release mode. To achieve this, locate and edit your build.gradle file in '[project]/android/app/build.gradle' with the following lines of code:

1. Add the Keystore information from your properties file before the 'android' block:

    // Simply copy from the 'def' below, to android {', and replace the 'android {' in your 
    // file 😎

   def keystoreProperties = new Properties()
   def keystorePropertiesFile = rootProject.file('key.properties')
   if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
   }

   android {
         ...
   }

2. Find the 'buildTypes' block:

   buildTypes {
       release {
           // TODO: Add your own signing config for the release build.
           // Signing with the debug keys for now,
           // so `flutter run --release` works.
           signingConfig signingConfigs.debug
       }
   }

And replace it with the below signing config info:

   signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }
   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

Once you're done with the above configurations, the release builds of your app will now be automatically signed.

Oh, before I forget, you may need to run 'flutter clean' after updating the gradle file. This would help clean some cached builds, preventing it from affecting the signing process.

🎨 Build APK

Let's say everything worked out fine, which it should 😅. In your project root directory, run the below code to build your flutter apk file

flutter build apk

For more information, checkout the official flutter documentaion here.

Custom Flutter Launcher Icon

George Ikwegbu Chinedu — Thu, 21 Oct 2021 12:22:39 +0000

Image Credit: Pixabay From Pexel

Introduction
Selecting Appropriate Icon
Flutter Package
Summary

🎇 Introduction

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

By default, Flutter ships its own app icon similar to the image above (well, not coupled with the name 'Flutter' of course 🤣), for every newly created application.

If not for demo purpose, say you wish to build a real-life application, you would definitely need to change the said default icon to your personalized version. And that is the aim of this article.

🎃 Selecting Appropriate Icon

To start off, you will need a suitable icon(image), with certain dimension. This custom_icon of ours should try and represent what your app does (now there's no rule regarding that, you can use any image you like 😊). But for the dimensions, you should provide a high resolution (say, 1080 x 1080) Portable Network Graphic (PNG) image file, so that when our launcher package runs, it gets to build for all screen sizes. Now you wouldn't want to have a pixelated image as your first 'user-encounter' experience now, would you?.

🎁 Flutter Package

There are so many approach to getting your custom_icon into your project, but for this article, we will be looking at 'flutter_launcher_icons' flutter package.

You can always make reference to the official doc for the Flutter_launcher_icons here. But I'd love to make reference to the few sections we would be needing for this article.

   // paste the below code in your pubspec.yaml file

   dev_dependencies:
      flutter_launcher_icons: "^0.9.2"

   flutter_icons:
      android: "launcher_icon"
      ios: true
      image_path: "assets/icon/icon.png"

NB: Please remember to give the specified number of indentation.
NB: run 'flutter pug get' to get the package.
NB: run flutter pub run flutter_launcher_icons:main , to build the icon.

Once you have successfully finished the above procedures, your icons, (yeah, icons, for various screen sizes) will be placed in your 'android\app\src\main\res' directory\folder.

Close your application process, and run it again, this should incorporate the new launcher icon into the app.

Summary

Finally, our app looks more like ours now, phew!!! 😪😪. There are still native ways to reproduce the launcher icons, but that would require you to get the image for the icon to various device screen sizes. That I know for a fact won't be easy.

Intuitive Flutter Codebase

George Ikwegbu Chinedu — Wed, 20 Oct 2021 00:13:26 +0000

I'd have to first of all start by saying, there's no perfect 
approach to having the best Flutter codebase. Phew!!!, with that 
out of the way, here's a less complicated and easy to use approach 
to structuring your Flutter Codebase.

What is Flutter?
What is VsCode?
Installing Dart Extension
Create a New Flutter App
Structuring the Folders
Importance of Using this Approach

✨ What is Flutter?

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Click here, to know more about Flutter.

🎆 What is VsCode?

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Click here, to know more about VsCode.

😎 Installing Dart Extension

Before getting started with Fluuter in VsCode, you would have to first of all install the Dart extension, which will allow you work with Flutter seamlessly in your VsCode. To do so, follow the below instructions, and also use the Image below as a guide.

...
1. In your VsCode, click on the 'double-file-like' icon, to 
   reveal your side bar.
2. Select the 'Square-like' icon, that has it's first quadrant 
   apart to open your 'Extension market' or click 'Ctrl+shift+X'.
3. On the search bar, enter Dart, select the first extension that 
   pops up, and install.
4. Since I have already installed mine, it's showing 'Uninstall',       
   but yours (if you haven't installed it yet), will have the 
   'install' text instead.

🎈 Create a New Flutter App

Visit the Flutter official page, to learn how to create a new 
application, as that is not our major concern in this article.

🎇 Structuring the Folders

Having created the project, you'd be greeted with the usual 'starter app' flutter provides. This would serve as a boilerplate. Congratulations on that.

From the above image, you'd noticed I numbered the structures. Those numbers corresponds to these below explanations

...


Components

This is found at the level of the main.dart file, which 

provides necessary re-usable components that should be 

universally available anywhere in the application, e.g, the 

likes of action button, etc.
Model

This controls the structure of data you wish to use. For 

instance, say you want to create a blog post, the title, name 

of author, content, created_at, updated_at, etc, would form 

the model of the blog.dart class.
Providers

If you are using the flutter provider package, this would 

enable you split your provider helpers.
Screens

This literally means the pages of your application.
Home_screen

Lifting just the 'home_screen' as an example, it's cleaner to 

have a folder of each screen/page you wish to implement, this 

gives you the access to have other elements within the 

home_screen file.
Components

This components, does the same this as the No.1, but it's 

access is only limited to the particular screen you're working 

on. You could see the 'body.dart', which would literally 

contain the body of the scaffold in the home_screen.dart.
Enums

In flutter/dart, enums, would help you establish small set of 

predefined set of values that will be used across the 

application logic.
SizeConfig

This comes in handy, when you wish to outline sets of 

functions, that would help calculate and return, on the fly, 

the width and height of the device you're currently working 

on.
Theme

This works like the themeData in the scaffold. Here you get to 

declare some variables and User Interface settings. Some call 

it constants.

🎉 Importance of Using this Approach

Like I earlier stated, there's no perfect way to structure your codebase, but try as much as possible to split your codes into an organized component. That way, one can easily understand your code, and would only make reference to the section at a time to fully grasp what you are writing on.

I actually stumbled upon this pattern after months of having my codebase look messy, and coming from Vue.js, my codebase is a lot cleaner than what I had in Flutter.

But after watching Abu Anwar speed codes, I fell inlove with this approach, and decided to write an article on it. Please do well to check out his Repository, you'd definately learn more.

Cordova FCM Custom Notification Icon

George Ikwegbu Chinedu — Mon, 19 Jul 2021 12:00:58 +0000

Cover image from pexels by Pixabay

From my other blog post, about Cordova FCM-Push Notification, I want to write on how to add your user custom notification Icon in your App.

PS: This icon will only be of 1 color, black and white 😥

Table of Content

Modifying the Icon
Moving Downloaded Files to res Folder
Editing Config.xml
Updating the FCM JSON Data

Modifying the Icon ✨

One thing you need to have in mind is that the icon will be of one color (white & black), and must be in the correct dimension and package name. To be on a safe side, you will need to upload your icon to Android Asset Studio, which would help you format the icon, when you're done, click on the download icon, to download the zipped file.

Moving Downloaded Files to res Folder 💌

In your cordova root folder:

1. Open the 'res' folder found within your 'cordova' root folder.
2. Select (for the course of this blog) android folder.
3. Create a new Folder called 'notification_icon'.
4. Copy and paste the files from the zip file you downloaded earlier.

Editing Config.xml 🎮

Open your config.xml file, copy the below lines of code into the file:

  <platform name="android">
        <resource-file src="res/android/notification_icon/drawable-mdpi/notification_icon.png" target="app/src/main/res/drawable-mdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-hdpi/notification_icon.png" target="app/src/main/res/drawable-hdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xhdpi/notification_icon.png" target="app/src/main/res/drawable-xhdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxhdpi/notification_icon.png" />
        <resource-file src="res/android/notification_icon/drawable-xxxhdpi/notification_icon.png" target="app/src/main/res/drawable-xxxhdpi/notification_icon.png" />
  </platform>

Updating the FCM JSON Data 📀

On your FCM payload, either from Postman, or the Backend (server side), change the 'Icon' key's value to 'notification_icon'. e.g

{
  "notification":{
    "title":"Selyct",
    "body":"Otuonye Kossy accepted your ride",
    "sound":"default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"notification_icon"
  },
  "data":{ Data you want to send to the device... },
  "to":"device_token",
  "priority":"high"
}

You should be able to see the icon on the notification Status, when you send a push notification to the device. 🎇🎆🎇✨🎉🎊

Cordova FCM-Push Notification

George Ikwegbu Chinedu — Sun, 20 Jun 2021 22:12:47 +0000

Image From Pexels by Brett Jordan

Are you a cordova developer and trying to implement the FCM push notification but encounter errors, ok, I was once like you few hours ago from writing this article.

So, I'd like to drop what I learned on how to solve this problem. Because the plugin itself has some bugs in it (At the time of writing this article).

Creating new Cordova Project
Adding Android Platform
Adding FCM plugin
Creating new Firebase Project
Editing Config.xml file
Adding the google-services.json File
Correcting Plugin Bugs in Files
Running getToken Function inside Device Ready

Creating new Cordova Project

Navigate to the Folder you want to keep this project in.

cd 'C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\'

Then create a new folder (directory) either from the GUI or

mkdir cordovaFcm
// this creates a new folder with name cordovaFcm
cd cordovaFcm
// this changes the current working directory to the newly created one.

Next, create a cordova app within the new directory

cordova create .
 // This creates a boilerplate of the cordova app within the current  
 // project because of the period (.) we added.

Adding Android Platform

Once you have created the new cordova app, the next thing to do
is to add a platform.

I currently do not own a macbook (😪), so my article will be 
based on the android platform. (I'm really sorry 😥)

cordova platform add android
// this adds the android platform to the project

Adding FCM plugin

We now need to add our plugin, with this, you won't need the firebase SDK, this plugin will handle everything... well yeah 😎.

cordova plugin add cordova-plugin-fcm
// Notice, I used 'fcm' and not 'FCM', as uppercase will throw an 
// error.

Creating new Firebase Project

Break time....🥱🥱🥱,

just kidding,

ok, hope you are already familiar with Firebase, as we won't explain much about it.

Go to firebase: https://firebase.google.com/
Create an account if you don't have any, or go to console if you have and logged into it.
Click on 'Add Project'
Enter the project name, most suitable will be the actual project name.
Accept the next slide.
Choose or create a new account (I went with the default account).
Create the project.
Scroll down (on the side navigation bar, to the (at the time of writing this article) Engage section, and select the cloud messaging).
Select the android icon, and continue.
The next slide, will ask you to enter the android package name, this name must rhyme with the ID or Package name your have in you config.xml file (If you can, read the next section about config.xml).

<widget id="com.fcmpushnotification.georgeikwegbu" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

It will be in reverse domain name eg. 'mrbrowny.dev.to' will be 
'to.dev.mrbrowny'

And the 'App nickname', will be the value you have in your 'name 
tag' within your config.xml file.

Please leave the 'Debug signing certificate SHA-1 (optional)' 
empty, as it's beyond this article, then click on the 'Register 
app'

After clicking on the 'Register app', the accordion, will bring out your 'google-services.json' for your app, download it.

Editing Config.xml file

Nothing much to do here, as you should know what and how you wish your app to look and work. But, key things to take into considerations are:

The Package name, which is what you will provide on the firebase console.
The name of the project, which is found within the 'name' tag.
The description is left for you to decide what that will be 😉.

Adding the google-services.json File

The google-services.json file you downloaded, is to be added to:

The root of the cordova project

C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\

The 'platform\android\app\' of the platform

C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\platforms\android\app\

Correcting Plugin Bugs in Files

The 'cordova-plugin-fcm' has a bug init (as of the time of writing this article), so we would try and resolve those now:

1. Change the following things:

firebase-core:+
firebase-messaging:+

//to 

firebase-core:16.0.3
firebase-messaging:17.6.0

in


C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\platforms\android\app\build.gradle

and

C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\platforms\android\project.properties

2. Change the following things:

// From
var strings = fs.readFileSync("platforms/android/res/values/strings.xml").toString();
// to
var strings = fs.readFileSync("platforms/android/app/src/main/res/values/strings.xml").toString();

// AND

// From
fs.writeFileSync("platforms/android/res/values/strings.xml", strings);

// to
fs.writeFileSync("platforms/android/app/src/main/res/values/strings.xml", strings);

in

C:\georgeikwegbu\usser\Documents\GitHub\_sideProjects\cordova_fcm\plugins\cordova-plugin-fcm\scripts\fcm_config_files_process.js

Ok..... we done 😎😎😎😎

Running getToken Function inside Device Ready

I will be leaving the link to the github repo of the plugin itself, but all codes should be run after the device ready, so place it within the onDeviceReady function:

onDeviceReady: function() {
        this.receivedEvent('deviceready');
            FCMPlugin.getToken(function(token) {
            //this is the FCM token which can be used
            //to send notification to specific device 
            console.log('George here is the token', token);
            alert(token)
            prompt('', token)
            //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
            //Here you define your application behaviour based on the notification data.
            FCMPlugin.onNotification(function(data) {
                console.log(data);
                //data.wasTapped == true means in Background :  Notification was received on device tray and tapped by the user.
                //data.wasTapped == false means in foreground :  Notification was received in foreground. Maybe the user needs to be notified.
                if (data.wasTapped) {
                    //Notification was received on device tray and tapped by the user.
                    alert(JSON.stringify(data));
                } else {
                    //Notification was received in foreground. Maybe the user needs to be notified.
                    alert(JSON.stringify(data));
                }
            });
        });
    },

// Since you'll need the token, to try and send notification from the firebase, I used the 
// 'prompt()', so you could copy the token from your phone, look for a way to get it to the 
// firebase website 😋

DEV Community: George Ikwegbu Chinedu

Implementing App and Universal Links in Flutter

Table of Content

🎉 Introduction

✨ AppLink Overview

⚙️ Updating AndroidManifest.xml

🍦 Creating SHA256

💪 Creating & Hosting AssetLink.json file

Hosting your AssetLink.json file;

🧪 Testing and Confirming AssetLink.json file

🚀 Deploy app to PlayStore internal testing

✅ Confirm the link is auto verified in the device hardware app settings

🌐 Universal Link Overview

👮🏾‍♀️ Adding capability

📡 Creating & Hosting AASA file

🔌 Confirming Our AASA file

⚒️ Testing Via cmd xcrun

⛓️ OnGenerateRoute Setup and Routing to a dynamic page with data

THE END

Custom Flutter GroupListView Widget

Table of Content

🎉 Introduction

✨ Items JSON

⚙️ Modeling our Data

🍦 Implementation

💪 Full Code

💙 Summary

Flutter Apple Auth Implementation

Table of Content

✨ Introduction

💪 Flutter Auth Packages

🍏 Apple accepted Data Flow

😬 Edge Cases

flutter iOS app is stuck on launchScreen when installed on real device 🚀🚀🚀🚀

Integrating Zendesk with Flutter

Table of Content

🕹 Introduction

🎥 Tips

🧰 Zendesk Flutter Package

🎥 Implementation

🎙 Setting up Channel Message

📲 Codebase

Initialising Zendesk in your applicaition.

Showing the Zendesk

Authenticating Users

Flutter Paystack All Options Implementation

Table of Content

🕹 Introduction

📡 Required Paystack Details and Endpoints

Setting your authorization header with secret_key

POST body details

Response from paystack API

🖲 Installing WebView Package

🛢 Making API calls in Flutter

📲 Displaying Paystack pop-up in webView

🏳️ The Data Flow:

🏳️ Implementation:

💾 Listening For Navigation url

💙 Important Note For Release apk

Steps Taken to Resolve this.

Finally

Unhandled exception: ProcessException: No such file or directory, Command PhaseScriptExecution failed with a nonzero exit code

An image of my error message:

Solution

Signing and Compiling Flutter APK

Table Of Contents

🎊 Introduction

🧶 Change App Icon

🎢 Change Name of App

🎪 Sign App

1. Create a keystore.

🎭 Release Configuration

1. Reference the keystore from the App

2. Add Signing Config in Gradle

🎨 Build APK

Custom Flutter Launcher Icon

Table Of Contents

🎇 Introduction

🎃 Selecting Appropriate Icon

🎁 Flutter Package