As a mobile developer Dependency Injection (DI) is a design pattern in software engineering where an object's dependencies are provided (or "injected") by an external entity rather than the object creating the dependencies itself. This is typically achieved through a constructor, setter, or interface injection. The main idea is to separate the creation of an object's dependencies from the object's behavior, promoting a more modular and testable codebase.

Let's start with some key fundamentals before digging into this topic. Still, it won't be long as many of you will be familiar with mobile development and dependency injection.

So why Koin?

Besides Koin supporting KMP environment, it provides an easy and efficient way to incorporate dependency injection into any Kotlin application (Multiplatform, Android, backend ...)

The goals of Koin are:

• Simplify your Dependency Injection infrastructure with smart API
• Kotlin DSL is easy to read, easy to use, to lets you write any kind of application
• Provides different kinds of integration from the Android ecosystem, to more backend needs like Ktor
• Allow to be used with annotations

AND THAT'S SOME KIND OF INFORMATION THAT YOU COULD FIND EASILY ON THE INTERNET.. I know it's boring...

Enough talk and let's start the exciting part where you can see the magic 😃

For this example, I'll be using PokéAPI to display a list of Pokemon's

First Start by creating your project over

Kotlin Multiplatform Wizard | JetBrains

Create your first multiplatform project using the Kotlin Multiplatform wizard for Android, iOS, and Desktop, or use one of the pre-made templates.

JetBrains

Leave the configuration as it is, only specify your project name and package name (Project ID), and then open it using your Android Studio (Mine is: Android Studio Koala | 2024.1.1)

After opening the project I cleaned the boilerplate code

let's start by importing packages and dependencies that we need, go to

gradle/libs.version.toml and add the following

Under [versions] add :

ktor-client = "2.3.11"
lifecycleViewModel = "2.8.2"

koin = "3.6.0-alpha3"
koinCompose = "3.6.0-alpha3"
koinComposeMultiplatform = "1.2.0-alpha3"
navigationCompose = "2.7.0-alpha03"

Under [libraries] add :

navigation-compose = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "navigationCompose" }

ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor-client" }
ktor-client-encoding = { module = "io.ktor:ktor-client-encoding", version.ref = "ktor-client" }
ktor-client-logging = { module = "io.ktor:ktor-client-logging", version.ref = "ktor-client" }
ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor-client" }
ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor-client" }
ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor-client" }
ktor-serialization-kotlinx-json = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor-client" }

koin-android = { module = "io.insert-koin:koin-android", version.ref = "koin" }
koin-androidx-compose = { module = "io.insert-koin:koin-androidx-compose", version.ref = "koinCompose" }
koin-core = { module = "io.insert-koin:koin-core", version.ref = "koin" }
koin-compose = { module = "io.insert-koin:koin-compose", version.ref = "koinComposeMultiplatform" }

lifecycle-viewmodel = { module = "androidx.lifecycle:lifecycle-viewmodel", version.ref = "lifecycleViewModel"}
  

Under [plugins] add :

kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

Go to the APP level gradle file and add the following

First of all add under plugins

alias(libs.plugins.kotlin.serialization)

Under sourceSets > androidMain.dependencies :

implementation(libs.ktor.client.okhttp)
implementation(libs.koin.android)
implementation(libs.koin.androidx.compose)

Under sourceSets > commonMain.dependencies :

implementation(libs.ktor.client.core)
implementation(libs.ktor.client.logging)            implementation(libs.ktor.serialization.kotlinx.json)
implementation(libs.ktor.client.content.negotiation)            implementation(libs.ktor.client.encoding)
api(libs.koin.core)
implementation(libs.koin.compose)            implementation(libs.navigation.compose)
implementation(libs.lifecycle.viewmodel)

and then add the IOS part as follows:

iosMain.dependencies {
     implementation(libs.ktor.client.darwin) // added
}

Hit sync now and wait, once finished without errors, let's make sure we keep in mind some key conditions in mind

Upon creating modules we first need to know about the expect/actual implementation

Rules for expected and actual declarations

To define expected and actual declarations, follow these rules:

1. In the common source set, declare a standard Kotlin construct. This can be a function, property, class, interface, enumeration, or annotation.
2. Mark this construct with the expect keyword. This is your expected declaration. These declarations can be used in the common code, but shouldn't include any implementation. Instead, the platform-specific code provides this implementation.
3. In each platform-specific source set, declare the same construct in the same package and mark it with the actual keyword. This is your actual declaration, which typically contains an implementation using platform-specific libraries.

Now let's set what we need for HTTP calls, ViewModels, and Koin initialization

Under common main add the following files, preferably following the same architecture unless you know how to adapt the code based on your needs, the same structure must be added under androidMain and iosMain, and file nomination and path must be identical on all parts

[module] package folder contains the following:

[repository] package folder contains the following:

[source] package folder contains the following:

[models] package folder contains the following:

this data class has been generated using JSON to Kotlin class plugin in Android Studio, you can see the actual data that we will be using Pokémon API

Now let's see what's under the hood for androidMain and iosMain folder

Extra configuration (Android only)

Let's define our Application entry and initialize Koin first

under androidMain > kotlin > com.your.package-name > create a file/class PokeApplication and set-up the following

Add Internet permission and name attribute into AndroidManifest.xml

Hurraaaaaaah!! you made it, start your project, and hopefully, you won't face any issues. if so let's take a look inside our viewModel and display some quick information, nothing much just a list that shows what we got through the Poké API

PS: I didn't mind much about the design or the design pattern or even the architecture the sole reason for this article is to show you how things are done with KMP

I won't be explaining much about the UI or the business logic as I presume that if you are reading this article you know enough about Jetpack Compose principle and Kotlin

You can find the full source code through my GitHub Repository

Hope this can help you through your learning journey as I am still learning

Enjoy!

References:

Expected and actual declarations | Kotlin

Kotlin Help

A flutter example of Android Native Retrofit API calls

In this article, we will discuss Retrofit and Dio API calls and the usage of custom interceptors in a singleton class

Table of content

1. What are APIs?
2. What’s Retrofit
3. What are flutter data classes?
4. Full use case of Retrofit

Important tools

1. Flutter SDK 3.3.0
2. Visual Code or Android Studio
3. A little bit of patience and knowledge :)

What are APIs?

API stands for Application Programming Interface. In the context of APIs, the word Application refers to any software with a distinct function. An interface can be thought of as a contract of service between two applications. This contract defines how the two communicate using requests and responses.

What is Retrofit?

Retrofit is a library that your API into JAVA, Kotlin, and in our case Dart Interfaces

This tool uses code generation for all platforms in our case we will need to import it alongside Retrofit generator and build runner

You can use this as the actual date of this article.

dependencies: 
  retrofit:

dev_dependencies:

What are flutter data classes?

A data class refers to a class that contains only fields, values, and CRUD methods for accessing them (getters and setters)

In Dart data classes can be presented such as the example below:

class OrderItem { 
  final num id; 
  final List<num> pid; 
 
  OrderItem( 
    this.id, 
    this.pid, 
  ); 
 
  OrderItem copyWith({ 
    num? id, 
    List<num>? pid, 
  }) { 
    return OrderItem( 
      id ?? this.id, 
      pid ?? this.pid, 
    ); 
  } 
 
  Map<String, dynamic> toMap() { 
    return <String, dynamic>{ 
      'id': id, 
      'pid': pid, 
    }; 
  } 
 
  factory OrderItem.fromMap(Map<String, dynamic> map) { 
    return OrderItem( 
      map['id'] as num, 
      List<num>.from( 
        (map['pid'] as List<num>), 
      ), 
    ); 
  } 
 
  String toJson() => json.encode(toMap()); 
 
  factory OrderItem.fromJson(String source) => 
      OrderItem.fromMap(json.decode(source) as Map<String,dynamic>); 
 
  @override 
  String toString() => 'OrderItem(id: $id, pid: $pid)'; 
 
  @override 
  bool operator ==(covariant OrderItem other) { 
    if (identical(this, other)) return true; 
 
    return other.id == id && listEquals(other.pid, pid); 
  } 
 
  @override 
  int get hashCode => id.hashCode ^ pid.hashCode; 
}

Note: this is just an example that we won’t be using during this article

Full use case of Retrofit

First of all, we will need our test API or something that will help us simulate what we call a Request and Response, and for that, we will be using the https://jsonplaceholder.typicode.com/

This website will help us test our use case without the need to build or mock data as it accepts multiple Request Methods such as POST, GET, and PUT

If you visit the link https://jsonplaceholder.typicode.com/posts you’ll see what an API response looks like.

Now let’s start by creating our data class for POSTS to facilitate that I’ll be using https://www.dripcoding.com/json-to-dart/. Basically, it’s just pasting a JSON response from one side and copying the data class from the other

Create a Dart class name it as you like and past the right part of your screen inside of it use “COPY DART”.

Now let’s start by creating too different .dart files

• endpoints.dart:

This one will hold all of our endpoints for example posts/, users/, comments/ … and so on

So far our case will be based on posts/ end point

Create another file called in my case api_service.dart, this one will hold all the logic of our API calls as you can see in the screenshot below.

The most important part of this screen is the RestClientApi abstract class it contains all the API calls GET, PUT, and POST and each one of them has a different type of annotation and passed parameter. So far our code has multiple errors but that’s okay it will be fixed by going to your IDE terminal and typing the following command:

Note: add the line part “api_service.g.dart” even if does not exist

flutter pub run build_runner build — delete-conflicting-outputs

Wait for some time... and voila, a file named api_service.g.dart will be automatically generated containing the elements below but please don’t add or delete anything if you submit any modification rerun the later command.

Now ladies and gentlemen let us try our API calls and see the results

Note: I’ll be creating a basic UI that you can use from the repo at the end of this article

You can find the whole example on my GitHub link below

This will be the end of our little example and I hope it wasn’t too much to handle, this is basic stuff that will help with bigger projects, and to assure you this is what I use for my day-by-day, 9-to-5 job as a Mobile Software Engineer

Enjoy the reading, see you soon, and if you have any suggestions for other subjects JAVA, Kotlin, or dart, use the comment section to let me know.

GitHub Repo: https://github.com/oussamaniba/retrofit_medium_example

A quick way of exploiting your pages to the fullest.

Managing users routes and pages can be tedious when you have a lot of features in some parts of your app. Today we will discover an easy way to manage your screens and widgets using a sign-in and sign-up page as an example.

Table of contents.

1- What is Bottom Sheet?
2- What are Dart streams?
3- real use-case with Sign-in, Sign-up and Recover account pages

Demo:

Bottom sheet quick definition

Modal bottom sheets in Flutter display additional content while restricting the user from interacting with the app’s main content. As the name suggests, a bottom sheet is positioned at the bottom of the screen.

Let’s say, for example, you have a photo saved in Google Photos that you want to share with a friend. When you tap the photo and click SHARE, some additional information shows up at the bottom of the screen:

Dart streams quick definition

A Stream is a sequence of asynchronous events. It is like an asynchronous Iterable — where, instead of getting the next event when you ask for it, the stream tells you that there is an event when it is ready.

In other words, streams are a source of asynchronous events delivered sequentially. There are data events, which are sometimes referred to as elements of the stream due to a stream’s similarity to a list, and there are error events, which are notifications of failure. Once all data elements have been emitted, a special event signaling the stream is done will notify any listeners that there is no more.

Use-case of streams alongside Bottom sheets

Let’s start by creating an empty Flutter project using Terminal:

• flutter create example_project

Let’s import a few packages from Pub.dev, we will be using one package named sliding_up_panel

Once done importing go to the main Dart file and clear everything then create these files inside the lib folder even if it’s not necessary, just to separate things:

Inside the controller file, we will set up a few things that will help us achieve the purpose of this post. First, we will add a PanelController as it’s included with the sliding_up_panel package that we imported earlier, we will also need a stream controller as it will help us send data to our StreamBuilder.PanelController panelController = PanelController();StreamController<Widget?> pageController = StreamController<Widget?>.broadcast();

Then let’s add a function that will help us reduce the amount of code used for switching, showing, and hiding dynamic content.Future<void> slidePanelOn(Widget screen) async {
pageController.sink.add(screen);
await panelController.open();
}

Now let’s set up our Root widget that will be responsible for holding and managing the content of the Sign-in, Sign-up, and Recover account pages

They will all have the same logic, as there’s no need to create UI this post is just for educational purposes

Now inside our main Dart file let’s add a StatefulWidget named RootWidget and the content will be as follow

• We need to define a bool isPageOpen to check whether the panel is open or not, so if we tap on the back button the app won’t close rather it’ll only close the bottom sheet with the help of dart’s WillPopScope package
• We need our panel set to min-height 0, max-height to MediaQuery full-size and we don’t need it to be draggable
• Our main screen will be the Sign-in page in the body parameter of RootWidget with two buttons controlling the opening of the panel projecting different screens Sign-up and Recover Account pages
• As for the panel, it’ll contain a StreamBuilder casting <Widget?> as a return type because when we close the panel we don’t need anything to be saved at the bottom of our app for more performance and that’s why we send null value through our StreamController

You can find the project on my Github page here.

Or directly on here.

Hope you enjoy it.