Forem: Sudhanshu Kumar Yadav

Deferred Deep Linking: How it works internally 🕵️

Sudhanshu Kumar Yadav — Mon, 19 Aug 2024 15:03:12 +0000

As a senior professional, implementing deferred deep linking in numerous applications, I will slice the internal mechanisms operating under the hood to make this functionality possible in both Android and iOS. We will look through the system APIs and processes followed by the attribution services such as Branch or AppsFlyer that make this very capability of deferred deep linking possible.

Android Internals

Key sections of how Deferred Deep Linking is implemented within Android are:

Install Referrer API: This API is critical to the Deferred Deep Linking flow. It allows the app to query information regarding the referrer upon installing a new app from the Play store.

Key API: com.android.installreferrer.api.InstallReferrerClient

How it works:

val client = InstallReferrerClient.newBuilder(context).build()
client.startConnection(object : InstallReferrerStateListener {
    override fun onInstallReferrerSetupFinished(responseCode: Int) {
        when (responseCode) {
InstallReferrerClient.InstallReferrerResponse.OK -> {
                val response = referrerClient.installReferrer
                val referrerUrl = response.installReferrer
// Process the referrer URL
            }
            // Handle other response codes
        }
    }
    override fun onInstallReferrerServiceDisconnected() {
// Handle disconnection
    }
})

The structure of the information is embedded in the referrer URL.
The referrer URL can be well formed using some encoded information for a deep link.
Attribution tools can decode this information.

Content Providers: Usually, Attribution SDKs use Content Providers to save information and read it between app starts:

class DeepLinkProvider : ContentProvider() {
    override fun query(uri: Uri, projection: Array<String>?, selection: String?,
selectionArgs: Array<String>?, sortOrder: String?): Cursor? {
        // Implement query to retrieve stored deep link data
    }
    // Implement other ContentProvider methods
}

INSTALL_REFERRER Broadcast: Android, upon app installation, fires a broadcast intent called INSTALL_REFERRER. We can intercept this broadcast and retrieve information about the installation.

class InstallReferrerReceiver : BroadcastReceiver() {
    override fun onReceive(context: Context, intent: Intent) {
        if (intent.action == "com.android.vending.INSTALL_REFERRER") {
            val referrerString = intent.getStringExtra("referrer")
// Process referrer string
        }
    }

}

iOS Internals

On iOS, the process relies on some features of the system:

Universal Links: iOS works with Universal Links which build on Associated Domains Entitlement. It enables claiming the ownership of certain web domains an app owns.

Key API: UIApplicationDelegate methods

func application(_ application: UIApplication,
continue userActivity: NSUserActivity,
                 restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if let incomingURL = userActivity.webpageURL {
        // Process the incoming URL
return true
    }
    return false
}

SKStoreProductViewController: The majority of attribution services take advantage of SKStoreProductViewController to send users to the App Store but retain context in deferred scenarios.

import StoreKit

let storeViewController = SKStoreProductViewController()
storeViewController.loadProduct(withParameters: [SKStoreProductParameterITunesItemIdentifier: appId]) { success, error in
    if success {
        self.present(storeViewController, animated: true, nil)
    }
}

App Clip Experiences While this isn't directly relevant to deferred deep linking, because App Clips allow functionality to be offered even before complete installation, that functionality can be used to provide a much more seamless d experience.

Key API: NSUserActivity

The Info.plist :

if let userActivity = userActivity {
   // Handle the user activity, which might contain deep link info  handleUserActivity(userActivity)
}

KeyChain and UserDefaults These are the storage mechanisms used in iOS for the saving of deep link data for launches and installations.

import  Security

func storeDeepLinkData(_ data: Data) {
    let query: [String: Any] = [
        kSecClass as String: kSecClassGenericPassword,
        kSecAttrAccount as String: "DeepLinkData",
        kSecValueData as String: data
    ]
SecItemAdd(query as CFDictionary, nil)
}

Attribution Service Integration

Platforms like Branch and AppsFlyer take advantage of these platform-specific mechanisms even further:

They utilize the Install Referrer API and broadcast receivers in Android and the Universal Links iOS to grasp install and deep link data.
They apply server-side storage to maintain deep link data sandwiched between the initial click and app open.
They offer SDKs that take care of this plumped up complexity, offering the same developers a smooth unified API.

Key Considerations

Timing and Race Conditions: Both platforms require stable handling of situations in which app initialization and deep link data resolution may occur in a different order.
Privacy and Data Retention: With increased scrutiny in this area, responsible data handling for users' data in line with regulation, and not least GDPR and CCPA.

This is because of its complex nature, which would require thorough testing under all possible scenarios: from a fresh install, reopening, and time delay.

Conclusion

Deferred deep linking cannot simply be explained as advanced functionality, implemented over a mix of APIs native to the OS, infrastructure necessary for attribution services, and of course, implemented meticulously. Such insight helps us be more resilient and reduces the resources that deep linking actually brings to bear into our apps—user acquisition and engagement.

Loop Labels: The Unsung Heroes

Sudhanshu Kumar Yadav — Thu, 01 Jun 2023 19:37:50 +0000

Picture this: you're a maestro conducting an orchestra of nested loops. Each instrument has its own loop, its own rhythm, but sometimes, the tuba needs to take a pause. That's where the power of Dart's loop labelling enters stage right. It's the equivalent of a conductor's baton, directing which section needs to continue and which needs a breather.

Loop labels are like secret agents. They're often overlooked, but when you need them, they swoop in and save the day. And in Dart, they can be your best friend in the wild, wild west of nested loops.

Imagine you're in charge of a system for a school district. You need to search across multiple schools, each with multiple classes and students, to find a particular student based on their name. Suppose that a student could be temporarily marked as inactive in a class if they are absent. We will check the status of the student and act accordingly:

If we find the student and they are enrolled and active, we'll break all loops as we're done with our search.
If we find the student and they are enrolled but inactive, we'll break the current student loop and continue with the next student in the same class.
If we find the student but they're not enrolled, we'll break the current class loop and continue with the next class or school.

void main() {
  var district = {
    'School A': {
      'Class 1': [{'name': 'Alice', 'enrolled': true, 'active': true}, {'name': 'Bob', 'enrolled': false, 'active': false}, {'name': 'Charlie', 'enrolled': true, 'active': true}],
      'Class 2': [{'name': 'Daniel', 'enrolled': true, 'active': true}, {'name': 'Eva', 'enrolled': true, 'active': true}, {'name': 'Frank', 'enrolled': false, 'active': true}],
    },
    'School B': {
      'Class 1': [{'name': 'Grace', 'enrolled': true, 'active': true}, {'name': 'Hannah', 'enrolled': true, 'active': true}, {'name': 'Ian', 'enrolled': true, 'active': true}],
      'Class 2': [{'name': 'Frank', 'enrolled': true, 'active': false}, {'name': 'Katie', 'enrolled': true, 'active': true}, {'name': 'Laura', 'enrolled': true, 'active': true}],
    },
    // Imagine there are many more schools and classes
  };

  var searchStudent = 'Frank';

  schoolLoop: for (var school in district.keys) {
    classLoop: for (var className in district[school].keys) {
      studentLoop: for (var student in district[school][className]) {
        if (student['name'] == searchStudent) {
          if (student['enrolled']) {
            if (student['active']) {
              print('Found $searchStudent active and enrolled in $className of $school!');
              break schoolLoop;
            } else {
              print('Found $searchStudent enrolled but inactive in $className of $school.');
              break studentLoop;
            }
          } else {
            print('Found $searchStudent not currently enrolled in $className of $school.');
            break classLoop;
          }
        }
      }
    }
  }
}

This is a neat trick that can save computing power and make your programs more efficient. In real-life scenarios, you might have more complex conditions, more nested loops, or other operations, but the principle remains the same. By judiciously using loop labels in Dart, you can write cleaner, more efficient, and more readable code.

Wrapping It Up

Labels, in essence, give you the power to break free from not just one loop, but a whole set of them. It's like having a golden ticket that lets you exit the amusement park whenever you want. No need to take the monorail all the way around just to reach the exit!

But remember, with great power comes great responsibility. Don't go breaking loops willy-nilly. Only do so when it's truly needed.

Do you know the patterns?

Sudhanshu Kumar Yadav — Tue, 23 May 2023 20:01:35 +0000

Hello fellow Dartisans! I hope you're ready for an exciting journey into the heart of Dart 3.0. Released on 10th May 2023, this version introduced a flock of major language features: Patterns, Records, and Class Modifiers. So buckle up, because we're about to dive in and explore these features with some fun examples.

Patterns

Patterns, in Dart, serve as a new category of grammar. They allow you to match and destructure values, enabling the extraction of parts of an object's data in an easy and intuitive way. Let's see some of the examples I have been trying out since my B'day.

Extracting Information from a List

var numList = [1, 2, 3];
var [a, b, c] = numList;
print(a + b + c); // Prints 6

Here we're using a list pattern to destructure the three elements from numList and assign them to new variables a, b, and c.

Swapping Variables

var (a, b) = ('left', 'right');
(b, a) = (a, b); // Swap.
print('$a $b'); // Prints "right left"

In this case, a pattern is used to swap the values of two variables without declaring a third temporary one.

Destructuring Map Entries

Map<String, int> hist = {
  'a': 23,
  'b': 100,
};

for (var MapEntry(:key, value: count) in hist.entries) {
  print('$key occurred $count times');
}

Here, an object pattern is used in a for-in loop to destructure the MapEntry objects that a <Map>.entries call returns, effectively iterating over the entries of a map.

Validating and Extracting JSON Data

var json = {
  'user': ['Lily', 13]
};
if (json case {'user': [String name, int age]}) {
  print('User $name is $age years old');
}

In this example, a case pattern is used to validate and destructure a JSON object. If the object has the expected structure, the pattern destructures it into local variables, providing a declarative and less verbose way of handling JSON data.

Flutter on Top: Elevate Your App to the macOS Status Bar

Sudhanshu Kumar Yadav — Tue, 16 May 2023 20:08:46 +0000

Hello, fellow Flutter enthusiasts! 🎉

Today, we're going to dive into something truly magical. We're going to take a Flutter app and make it run in the macOS status bar. Yes, you read that right! We're going to take our Flutter prowess to the next level and make our apps even more accessible and user-friendly. So, buckle up, and let's get started! 🚀

Flutter Meets macOS Status Bar

First things first, let's talk about why you might want to run your Flutter app in the macOS status bar. The status bar is that nifty little area at the top of your screen that houses useful information and quick access to system functions. It's always visible, making it a prime real estate for apps that users need to access frequently.

Imagine having a mini weather app, a quick note-taking app, or a system monitor right there in the status bar. Sounds cool, right? Well, with Flutter, we can make it happen!

The Magic Begins

To get started, we need to set up our Flutter project. If you're new to Flutter, check out the official Flutter installation guide.

flutter create flutter_statusbar_app
cd flutter_statusbar_app

Now, we're going to dig a lil deeper in our brewed flutter project, head to flutter_statusbar_app/macos/Runner/AppDelegate.swift file. You need to change it a bit with the below code:

import Cocoa
import FlutterMacOS

@NSApplicationMain
class AppDelegate: FlutterAppDelegate {
  // Instance of the status bar controller
  var statusBarController: StatusBarController?

  // Instance of the popover that will display the Flutter UI
  var flutterUIPopover = NSPopover.init()

  // Initializer for the AppDelegate class
  override init() {
    // Set the popover behavior to transient, meaning it will close when the user clicks outside of it
    flutterUIPopover.behavior = NSPopover.Behavior.transient
  }

  // Function to determine whether the application should terminate when the last window is closed
  override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
    // Return false to keep the application running even if all windows are closed
    return false
  }

  // Function called when the application has finished launching
  override func applicationDidFinishLaunching(_ aNotification: Notification) {
    // Get the FlutterViewController from the main Flutter window
    let flutterViewController: FlutterViewController =
      mainFlutterWindow?.contentViewController as! FlutterViewController

    // Set the size of the popover
    flutterUIPopover.contentSize = NSSize(width: 360, height: 360) // Change this to your desired size

    // Set the content view controller for the popover to the FlutterViewController
    flutterUIPopover.contentViewController = flutterViewController

    // Initialize the status bar controller with the popover
    statusBarController = StatusBarController.init(flutterUIPopover)

    // Close the default Flutter window as the Flutter UI will be displayed in the popover
    mainFlutterWindow.close()

    // Call the superclass's applicationDidFinishLaunching function to perform any additional setup
    super.applicationDidFinishLaunching(aNotification)
  }
}

Let's break it down:

Import Statements: The import Cocoa and import FlutterMacOS statements are importing the necessary libraries for the macOS application and Flutter.
AppDelegate Class: The AppDelegate class is a subclass of FlutterAppDelegate. This class is the entry point of the application and handles application-level events.
Variables: The statusBar variable is an instance of StatusBarController (not shown in this code snippet), which presumably manages the status bar item. The popover variable is an instance of NSPopover, which is a macOS UI component that displays content in a separate hovering window.
init() Function: The init() function is the initializer for the AppDelegate class. Here, it sets the popover behavior to NSPopover.Behavior.transient, which means the popover will close when the user clicks outside of it.
applicationShouldTerminateAfterLastWindowClosed(_:) Function: This function determines whether the application should terminate when the last window is closed. It returns false, meaning the application will keep running even if all windows are closed.
applicationDidFinishLaunching(_:) Function: This function is called when the application has finished launching. It does several things:

It gets the FlutterViewController from the mainFlutterWindow, which is the main window of the Flutter application.
It sets the size of the popover and assigns its contentViewController to the FlutterViewController. This means the Flutter UI will be displayed in the popover.
It initializes the statusBar with the popover, presumably creating a status bar item that shows the popover when clicked.
It closes the mainFlutterWindow, as the Flutter UI will be displayed in the popover instead of the main window.
It calls super.applicationDidFinishLaunching(aNotification), which calls the same function in the superclass (FlutterAppDelegate), performing any additional necessary setup.

Now let's move to creating the StatusBarController.swift file:

For this open your macos folder in Xcode. Goto file at the top: File -> New -> File -> Choose Swift File

N.B.: don't try to use shortcut and create this file from other code editor like VSCode.

add the following magical code in the created file

import AppKit

class StatusBarController {
    // Instance of the status bar
    private var appStatusBar: NSStatusBar

    // Instance of the status bar item
    private var statusBarMenuItem: NSStatusItem

    // Instance of the popover that will display the Flutter UI
    private var flutterUIPopover: NSPopover

    // Initializer for the StatusBarController class
    init(_ popover: NSPopover) {
        self.flutterUIPopover = popover
        appStatusBar = NSStatusBar.init()
        statusBarMenuItem = appStatusBar.statusItem(withLength: 28.0)

        // Configure the status bar item's button
        if let statusBarMenuButton = statusBarMenuItem.button {
            // Set the button's image
            statusBarMenuButton.image = #imageLiteral(resourceName: "AppIcon") // Change this to your desired image
            statusBarMenuButton.image?.size = NSSize(width: 18.0, height: 18.0)
            statusBarMenuButton.image?.isTemplate = true

            // Set the button's action to toggle the popover when clicked
            statusBarMenuButton.action = #selector(togglePopover(sender:))
            statusBarMenuButton.target = self
        }
    }

    // Function to toggle the popover when the status bar item's button is clicked
    @objc func togglePopover(sender: AnyObject) {
        if(flutterUIPopover.isShown) {
            hidePopover(sender)
        }
        else {
            showPopover(sender)
        }
    }

    // Function to show the popover
    func showPopover(_ sender: AnyObject) {
        if let statusBarMenuButton = statusBarMenuItem.button {
            flutterUIPopover.show(relativeTo: statusBarMenuButton.bounds, of: statusBarMenuButton, preferredEdge: NSRectEdge.maxY)
        }
    }

    // Function to hide the popover
    func hidePopover(_ sender: AnyObject) {
        flutterUIPopover.performClose(sender)
    }
}

Don't worry, we will break down this code blob too if it doesn't look familiar:

This Swift code defines a class StatusBarController that manages a status bar item for a macOS application. The status bar item is associated with a popover, which is a UI element that displays content in a separate window that appears above other content onscreen.

Import Statement: import AppKit imports the necessary library for working with the macOS user interface.
Class Definition: class StatusBarController defines the class. It has four properties: statusBar, statusItem, popover, and statusBarButton.
Initializer: The init(_ popover: NSPopover) function is the initializer for the class. It takes an NSPopover as an argument and sets up the status bar and status bar item. The status bar item's button is configured with an image and an action that toggles the popover when clicked.
togglePopover(sender: AnyObject) Function: This function is called when the status bar item's button is clicked. It checks if the popover is shown and calls either showPopover(_:) or hidePopover(_:) accordingly.
showPopover(_ sender: AnyObject) Function: This function shows the popover. It positions the popover relative to the status bar item's button.
hidePopover(_ sender: AnyObject) Function: This function hides the popover.

In summary, this class manages a status bar item that, when clicked, toggles a popover. The popover is positioned relative to the status bar item's button.

That's all for the native side, moving to dart side 🎯

Run your main.dart as macOS desktop target selected using;

flutter run -d macos

if you can't see macOS as an option in your available device list;
run this command once

flutter config --enable-macos-desktop

And voila! You've just created a Flutter app that runs in the macOS status bar! 🎉

Wrapping Up

Running a Flutter app in the macOS status bar opens up a world of possibilities. It allows you to create apps that are always accessible and provide real-time information or quick functionality. So go ahead, experiment, and create something amazing!

Checkout the repo for the complete project

Flutter's Hidden Treasures: Unearthing Rare Widgets and Their Use Cases 🗝️

Sudhanshu Kumar Yadav — Sat, 06 May 2023 14:34:38 +0000

Unlocking the secrets of lesser-known Flutter widgets and how to use them!

Ahoy, Flutter adventurers! 👋

Are you ready to embark on a thrilling adventure to uncover the hidden treasures of the Flutter widget universe? You've come to the right place! 🗺️ Join me as we shine a light on some of the rarely used widgets that might just turn out to be the secret weapons in your Flutter arsenal, today we will not only uncover hidden widget treasures but also explore their fascinating use cases! 🔍

1. IntrinsicWidth & IntrinsicHeight: Masters of Dimensions 📏

Use Case:
Suppose you're building a news app, and you have an article widget that displays a varying amount of text. To ensure that the widget sizes itself based on the content, you can use IntrinsicWidth and IntrinsicHeight:

IntrinsicHeight(
  child: IntrinsicWidth(
    child: Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.blue)),
      child: Text(
        'Breaking news: Flutter is awesome!',
        style: TextStyle(fontSize: 24),
      ),
    ),
  ),
)

2. Flow: The Artful Dodger 🎨

Use Case:
Imagine you're designing a photo editing app, and you want to create a custom layout for a set of filter icons that follow a curved path. You can use Flow and a custom FlowDelegate to achieve this:

class CurvedPathFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    final double radius = 100;
    final double iconSize = 50;
    for (int i = 0; i < context.childCount; i++) {
      final double theta = (i / (context.childCount - 1)) * pi;
      final double x = radius * (1 + cos(theta)) - iconSize / 2;
      final double y = radius * (1 + sin(theta)) - iconSize / 2;
      context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
    }
  }

  @override
  bool shouldRepaint(CurvedPathFlowDelegate oldDelegate) => false;
}

Flow(
  delegate: CurvedPathFlowDelegate(),
  children: [
    Icon(Icons.filter_1, size: 50),
    Icon(Icons.filter_2, size: 50),
    Icon(Icons.filter_3, size: 50),
  ],
)

3. InteractiveViewer: The Pan and Zoom Prodigy 🔍

Use Case:
Let's say you're building a maps app, and you want to allow users to zoom in and pan around a map image. You can use InteractiveViewer to achieve this functionality:

InteractiveViewer(
  minScale: 0.1,
  maxScale: 4,
  child: Image.network('https://example.com/map_image.jpg'),
)

4. DraggableScrollableSheet: The Shape-Shifting Scroller 📜

Use Case:
Imagine you're creating a ride-hailing app, and you want to display a draggable panel that reveals more information about a selected driver when expanded. You can use DraggableScrollableSheet to create this effect:

DraggableScrollableSheet(
  initialChildSize: 0.3,
  minChildSize: 0.2,
  maxChildSize: 0.6,
  builder: (BuildContext context, ScrollController scrollController) {
    return SingleChildScrollView(
      controller: scrollController,
      child: Column(
        children: [
          Icon(Icons.drag_handle),
          ListTile(
            title: "Text('Driver Name'),"
            subtitle: "Text('4.8 ★'),"
          ),
          // Add more information about the driver here.
        ],
      ),
    );
  },
)

5. Placeholder: The Invisible Chameleon 🦎

Use Case:
Suppose you're building a social media app and are still working on the user profile section. Instead of displaying empty space, you can use a Placeholder widget to indicate where the profile picture will be placed:

Placeholder(
  fallbackWidth: 100,
  fallbackHeight: 100,,
  strokeWidth: 2,
  color: Colors.grey,
)

6. FractionallySizedBox: The Relative Sizer 🧙‍♂️

FractionallySizedBox is a magical widget that can resize its child based on a fraction of the parent's size. This wizardry allows you to create responsive layouts that gracefully adapt to different screen sizes and orientations.

Use Case:
Imagine you're building a responsive dashboard, andyou want a widget to always take up 70% of the screen width, regardless of the device's screen size. You can achieve this with a FractionallySizedBox:

FractionallySizedBox(
  widthFactor: 0.7,
  child: DashboardWidget(),
)

7. ValueListenableBuilder: The Reactive Listener 🦻

ValueListenableBuilder is like an attentive listener, always ready to react to changes in its ValueListenable source. With this widget, you can efficiently rebuild only the parts of your UI that depend on a specific value, instead of rebuilding the entire widget tree.

Use Case:
Suppose you have a counter app, and you want to display the current count without rebuilding the entire UI when the value changes. You can use a ValueListenableBuilder to accomplish this and a great way to build the counter app without the Stateful Widget:

final ValueNotifier<int> counter = ValueNotifier<int>(0);

ValueListenableBuilder(
  valueListenable: counter,
  builder: (BuildContext context, int value, Widget? child) {
    return Text('Counter: $value');
  },
)

And that's a wrap, Flutter explorers! 🎉 We've embarked on an adventure through the lesser-known corners of the Flutter widget world, uncovering hidden gems and their fascinating use cases. Armed with this newfound knowledge, you can now create even more stunning and versatile user interfaces for your apps.

Remember, the key to mastering Flutter lies in exploring and experimenting with different widgets. Don't be afraid to step out of your comfort zone and dive into the world of rare and unique widgets. Happy coding, and until our next adventure! 🚀💻

Flutter's Hidden Gems 💎: Unearthing Lesser-Known Facts

Sudhanshu Kumar Yadav — Sat, 06 May 2023 13:54:32 +0000

Greetings, ~~fellow~~ flutter developers! 👋

Today, we embark on an exciting journey to explore the uncharted territories of the Flutter framework. Flutter has taken the development world by storm, and as it turns out, there are hidden gems 💎 waiting to be discovered! Fasten your seatbelt and join me as we dig deep into the lesser-known facts about Flutter. 🔍

1. The Skia Connection

Did you know that Flutter's powerful rendering engine is actually powered by Skia, the same graphics library used by Chrome and Android? 🤯 That's right! This secret sauce is what enables Flutter to paint beautiful UIs on your screens with unparalleled performance. So the next time you're admiring your smooth, pixel-perfect Flutter app, remember to give a shoutout to Skia! 🙌

2. The Hummingbird Connection

Flutter's journey to the web is an interesting tale, reminiscent of a spy movie. In its initial days, the project was codenamed "Hummingbird." 🐦 Now, the project has blossomed into a full-fledged framework, Flutter for Web, allowing developers to create stunning web apps using the same Flutter magic! Talk about a transformation! 🦋

3. The Hidden Widgets

Flutter is known for its extensive widget catalog, but there are a few widgets that like to play hide-and-seek! For example, the LimitedBox widget limits its maximum size only when it's confined in a tight space. Perfect for those situations where you need a widget to know its boundaries, quite literally. 📏 Don't let these elusive widgets escape your notice! 😉

4. A Trip Down Memory Lane with Hot Reload

If you love Flutter's Hot Reload feature (and who doesn't?), you'll be intrigued to know that it's inspired by React Native's "Hot Module Replacement." But Flutter's team took it a step further, making it lightning-fast! ⚡️ Now you can witness your code changes come to life in real-time, making you feel like a wizard casting UI spells. 🧙‍♂️

5. The Flutter Time Machine

Did you know that the first version of Flutter was actually called "Sky"? ☁️ Flutter's initial version was focused on providing a 120 FPS rendering experience for Android apps. But the Flutter we know today has evolved into a versatile, multi-platform powerhouse! 🚀

6. A Little Love for the Lesser-Known Dart

Flutter's best-kept secret might be its language, Dart. While Dart might not have the same spotlight as some of its counterparts, it's an incredibly powerful and versatile language. With features like sound null safety and ahead-of-time (AOT) compilation, Dart plays an essential role in Flutter's awesomeness. Don't forget to show Dart some love, too! ❤️

And there you have it, fellow explorers! 🌍 We've unveiled some of the hidden gems and lesser-known facts about the fantastic Flutter framework. May this knowledge add a sparkle to your Flutter journey as you continue to build stunning apps with newfound wisdom! 🌟

Keep on Fluttering, and until next time, happy coding! 💻

🏰 Building the Perfect Sandcastle: A 5-Year-Old's Guide to Clean Architecture 🏰

Sudhanshu Kumar Yadav — Fri, 05 May 2023 08:47:17 +0000

Hey there, little architects!

🌟 Have you ever built a sandcastle on the beach? 🏖️
It takes time, patience, and the right techniques to create the perfect sandcastle. But did you know that building a sandcastle is a lot like building software? 🤯 Today, we're going to learn about "Clean Architecture" as if we're building a sandcastle, making it super fun and easy to understand! 🎉

So, let's grab our buckets and shovels and start building! 🏰

Our Sandcastle: The Perfect Layers 🌈

When we build a sandcastle, we need to make sure it has a strong foundation, so it doesn't fall apart. 🏗️ Similarly, in Clean Architecture, we create layers to make our software strong and easy to maintain. Let's look at the layers in our sandcastle:

The Moat (Entities): 🌊 The moat is the water surrounding our sandcastle. It protects our castle from intruders, just like "Entities" protect our software's core rules and logic. Entities are the most important part of our software, and they don't change much.
The Walls (Use Cases): 🏰 The walls of our sandcastle keep everything inside safe and organised. In Clean Architecture, we have "Use Cases" that keep our software's business logic safe and organised. Use Cases are like little workers that follow instructions to get things done.
The Watchtowers (Gateways): 👀 The watchtowers help us see what's happening outside our sandcastle. In software, "Gateways" are like watchtowers, as they help us communicate with the outside world, like databases or the internet. They're our little messengers! 📬
The Flags (Presenters): 🚩 The flags on our sandcastle show everyone who we are and what we do. In Clean Architecture, "Presenters" are like flags, as they show the world what our software can do. Presenters take the results from our Use Cases and display them in a pretty way for users to see. 🌟

Our Little Helpers: The Building Blocks 🧱

Now that we have our layers, we need to connect them with some little helpers. In software, we call these helpers "dependencies." They're like the bridges and tunnels that connect different parts of our sandcastle. 🌉

The Bridges (Dependency Inversion): 🌉 The bridges help us move between layers in our sandcastle. In Clean Architecture, we use "Dependency Inversion" to make our layers work together. This means that the lower layers depend on the higher layers, not the other way around. It keeps our sandcastle strong and flexible! 💪
The Tunnels (Dependency Injection): 🚇 The tunnels help our little workers move between layers without anyone noticing. In software, we use "Dependency Injection" to give our layers the helpers they need to work together. It's like a secret passageway for our code! 🕵️‍♀️

Wrapping Up: A Beautiful Sandcastle 🏰

And that's it, little architects! 🎉 We've just built a beautiful sandcastle using the principles of Clean Architecture. By using layers, helpers, and the right techniques, we can make our software strong, flexible, and easy to maintain, just like a perfect sandcastle! 🌟

So the next time you're building a sandcastle on the beach, remember that you're also practicing the art of Clean Architecture! 🏖️ With the right layers, little helpers, and techniques, you can create amazing software just like you create amazing sandcastles. 🎨

Now go on and impress your friends, family, and even your favorite stuffed animals with your newfound knowledge of Clean Architecture! 🐻 Keep building, little architects, and never stop exploring the wonderful world of software development! 🚀

Remember, practice makes perfect, and every sandcastle you build will make you a better architect in the world of software! 🏆 Happy building! 🏰✨

Give Your Flutter Apps a Performance Pump 💪 with Deferred Imports

Sudhanshu Kumar Yadav — Fri, 05 May 2023 08:01:00 +0000

Hello, fellow Flutter/Dart enthusiasts! If you're looking to give your apps a performance boost, then you're in for a treat! Today, we're going to explore the magic of deferred imports in Dart. By the end of this post, you'll learn how to lazy-load libraries, which can significantly improve the initial startup time of your apps.

So buckle up and let's dive right in!

The Power of Deferred Imports

Imagine you're working on a fantastic Dart application that requires a heavy library (like an image processing library). Now, loading this library can slow down your app's startup time, and we don't want that, right? That's where deferred imports come to our rescue!

In Dart, the deferred keyword allows you to lazy-load a library, meaning it's only loaded when it's actually needed. Combine this with the as keyword to create an alias for the imported library, and you're all set! Here's an example:

import 'package:heavy_library/heavy_library.dart' deferred as heavyLibrary;

A Step-by-Step Guide to Deferred Imports

Once you've declared the import using the deferred keyword, you'll need to load the library explicitly before using its members. You do this by calling the loadLibrary() function on the alias. Let's walk through a complete example:

First, let's import our required libraries. We'll import dart:async for working with Future, and our heavy library using the deferred keyword:

import 'dart:async';
import 'package:heavy_library/heavy_library.dart' deferred as heavyLibrary;

Now, create a main function that will act as the entry point for our application:

Future<void> main() async {
  print('Application started.');

  // Perform some operations before loading the heavy library.
  await Future.delayed(Duration(seconds: 2));

  // Load the heavy library.
  await heavyLibrary.loadLibrary();
  print('Heavy library loaded.');

  // Use the heavy library.
  heavyLibrary.heavyFunction();
  print('Heavy function executed.');
}

In this example, the heavy_library package is imported using the deferred keyword and aliased as heavyLibrary. The main function of the application performs some operations before loading the heavy library using await heavyLibrary.loadLibrary(). Once the library is loaded, you can call its members, like heavyLibrary.heavyFunction() in this example.

And that's it! You've just mastered the art of deferred imports in Dart!

Wrapping Up

Now that you know how to use deferred imports in Dart, you can boost the performance of your apps by only loading heavy libraries when they're truly needed. This can be a game-changer, especially for large applications with numerous dependencies.

So go on, give your Dart apps a performance boost, and keep coding! 🚀

Credit for this post: Reham Ali's LinkedIn Post 🤌

Flutter + Firebase Messaging: A Match Made in App Heaven for Newbie Developers!

Sudhanshu Kumar Yadav — Fri, 05 May 2023 07:33:24 +0000

Welcome, dear novice app developer! If you're looking to add some pizzazz to your Flutter app with real-time notifications, you're in the right place! We'll show you how to set up Firebase Messaging in your Flutter app with ease. So, buckle up and let's get this party started! 🎉

What's Firebase Messaging, you ask?

Firebase Cloud Messaging (FCM) is a free messaging service provided by Google that allows you to send notifications and data messages to your users' devices. It's the perfect solution for adding real-time communication to your app without breaking a sweat! 💪

Step 1: Set Up Firebase in Your Flutter Project

Before diving into code, you'll need to create a Firebase project and connect it with your Flutter app. Follow the official FlutterFire documentation for step-by-step instructions.

Step 2: Add Firebase Messaging Dependency

Add the firebase_messaging package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  firebase_messaging: ^11.0.0

Then, run flutter pub get to install the package.

Step 3: Configure Firebase Messaging

In your main.dart, import the required packages and initialize Firebase:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Step 4: Request Permission for Notifications

Add the following code snippet inside your MyApp widget's build method to request notification permission:

FirebaseMessaging.instance.requestPermission(
  alert: true,
  badge: true,
  sound: true,
);

Step 5: Register Device Token

You'll need a unique device token to send notifications to a specific device. To obtain it, add the following code snippet in your main function:

void main() async {
  // ... existing code
  FirebaseMessaging.onBackgroundMessage(_backgroundMessageHandler);
  FirebaseMessaging.instance.getToken().then((token) {
    print('Device Token: $token');
  });
  runApp(MyApp());
}

Future<void> _backgroundMessageHandler(RemoteMessage message) async {
  print('A background message arrived: ${message.messageId}');
}

Save the printed token. You'll use it to send notifications via FCM.

Step 6: Handle Incoming Notifications

Let's handle notifications when the app is in the foreground:

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('A foreground message arrived: ${message.messageId}');
  // You can add custom logic here, like displaying a snackbar or dialog.
});

Voilà! 🎉 Your app is now set up to receive notifications from FCM!

Sending Test Notifications

To test your shiny new notification system, use the following cURL command, replacing <YOUR-FCM-SERVER-KEY> with your FCM server key and <YOUR-DEVICE-TOKEN> with the printed device token:

curl -X POST \
  https://fcm.googleapis.com/fcm/send \
  -H 'Authorization: key=<YOUR-FCM-SERVER-KEY>' \
  -H 'Content-Type: application/json' \
  -d '{
        "to": "<YOUR-DEVICE-TOKEN>",
        "notification": {
          "title": "Test Notification",
          "body": "This is a test notification from FCM"
        }
     }'

Code like a child 👶🏻, build like a pro🧑🏻‍🔧: Unleash the magic of SOLID!

Sudhanshu Kumar Yadav — Thu, 04 May 2023 18:35:20 +0000

🚀🌟 Hey there 👋🏻, dev-nuggets and future coding prodigies!

Today, I want to talk about the magical world of SOLID principles! Imagine if our code was like a LEGO castle where each piece is designed to fit perfectly with the others. That's what SOLID helps us achieve! 🏰✨

🎨 Picture this: You're 5 years old, and you've just built the most amazing castle using your favourite LEGO bricks. Now, imagine that each of those LEGO bricks is a piece of code in your app. SOLID principles are like the magic instructions that help us build apps with LEGO bricks that click together perfectly every time! 🧙‍♂️🧩

🌈 Here's a quick, colourful guide to SOLID for our little coding wizards:

🦸‍♂️ Single Responsibility Principle (SRP): Each LEGO brick (code piece) has a unique job, just like superheroes! We don't want Captain America to cook pizza when he's saving the world, right? 🍕🌍
🎁 Open/Closed Principle (OCP): Think of your code like a surprise gift for someone. You can wrap it in new, exciting paper (extend), but you shouldn't have to open it up and mess with the toy inside (modify) to make it more fun! 🧸🎉
🦉 Liskov Substitution Principle (LSP): When you play with LEGOs, you can swap out a red brick for a blue one, and it still fits! That's what LSP is all about—making sure our code pieces can be swapped without breaking our castle! 🟥🔵
🤝 Interface Segregation Principle (ISP): Imagine having a LEGO instruction book for each part of your castle. It's way easier to follow smaller, focused guides than one big, confusing manual. ISP helps us break down our code into simpler interfaces! 📚🏰
🧪 Dependency Inversion Principle (DIP): When building our LEGO castle, we want to rely on the shape of the bricks, not their colour. DIP reminds us to depend on abstractions (shape) rather than specifics (colour), making our code more flexible! 🌈🧱

🚀 So, my fellow coding enthusiasts, let's build our code castles with SOLID principles, and create apps that are as magical and fun as our favourite LEGO sets! And remember, even if you're not 5 years old, it's never too late to learn something new! 🎓✨