DEV Community: Harsh Bangari Rawat

Master the Prompt: Key Engineering Tactics for Developers in the AI Era

Harsh Bangari Rawat — Fri, 17 Oct 2025 11:24:23 +0000

AI tools like ChatGPT, Claude, and Gemini have become indispensable for developers, but their effectiveness hinges on one key skill: prompt engineering. A well-crafted prompt can generate production-ready code, debug issues, optimize algorithms, and even write tests. A poor prompt? Not so much.
If you're a developer looking to supercharge your productivity, here are 10 must-know prompt engineering hacks that will help you get precise, efficient, and contextual responses from AI.

🔧 1. Be Explicit, Not Implicit

Avoid vague language. Instead of saying:

"Help me with this function."

Say:

"Optimize this Python function for speed. It processes a large list and finds duplicates."

def find_duplicates_basic(lst):
    duplicates = []
    for i in range(len(lst)):
        for j in range(i + 1, len(lst)):
            if lst[i] == lst[j] and lst[i] not in duplicates:
                duplicates.append(lst[i])
    return duplicates

Optimized:

def find_duplicates_optimized(lst):
    seen = set()
    duplicates = set()
    for item in lst:
        if item in seen:
            duplicates.add(item)
        else:
            seen.add(item)
    return list(duplicates)

🔹 Why it works: Clarity reduces ambiguity, leading to better outputs.

🎯 2. Use Role Prompting

Assign the AI a role for more accurate, domain-specific answers.

"You are a senior backend engineer experienced in Node.js and REST APIs. How would you design rate limiting in an Express.js app?"

🔹 Why it works: Roles trigger more relevant and high-quality answers tailored to your intent.

📦 3. Provide Context in Chunks

Large codebases or API structures? Break context into digestible pieces.

"Here is the controller code. Next, I’ll share the model. Then I’ll explain the problem."

🔹 Why it works: Prevents overwhelming the model and ensures it processes your problem correctly.

🔁 4. Use Iterative Prompting

Instead of expecting perfect answers in one go, refine in stages.

"Give a basic version of the algorithm."
"Now improve it for edge cases."
"Now write unit tests."

🔹 Why it works: Breaks down complexity and helps AI stay focused on one task at a time.

🧠 5. Ask for Thought Process

Want to understand why the AI made a decision?

"Walk me through your logic before giving the final SQL query."

🔹 Why it works: Reveals the model’s reasoning, which helps you catch flaws and learn new patterns.

🧪 6. Prompt for Testing

Always ask the model to generate tests for its own output.

"Write unit tests in Jest for this function that filters user input."

🔹 Why it works: Test coverage ensures reliability and saves you time writing boilerplate.

✍️ 7. Structure Prompts Like an Engineer

Use clear sections like:

Problem
Requirements
Input
Output
Constraints

🔹 Why it works: Mimics how devs think and improves interpretability for the model.

🧩 8. Use Few-Shot Examples

Provide 1–2 sample inputs/outputs before asking for more.

Input: 5 → Output: Buzz
Input: 15 → Output: FizzBuzz
Input: 9 → Output:

🔹 Why it works: The model learns patterns from examples better than from abstract rules alone.

🪛 9. Use Tools Like Code Interpreters or Plugins

If using ChatGPT Plus or similar tools, ask it to run or analyze code using the Python/Code Interpreter tool.

"Plot a graph for this time-series data using Python."

🔹 Why it works: Offloads analysis or visualization quickly without switching contexts.

📚 10. Prompt for Alternatives

Don’t settle for the first idea.

"Give me 3 different ways to implement debouncing in JavaScript."

🔹 Why it works: Explores multiple paths, especially useful in architecture decisions or refactoring.

💡 Final Tip: Save Your Best Prompts

Create a prompt library or snippets collection for repeat tasks like:

Writing commit messages
Generating SQL queries
Summarizing pull requests
Writing Dockerfiles or GitHub Actions
Think of it as your AI-powered dev toolkit.

🚀 Conclusion

Prompt engineering is no longer just for prompt engineers. As a developer, learning how to communicate effectively with AI tools is a game-changing productivity skill.
Use these hacks daily, and you’ll write better code, debug faster, and even improve your architectural thinking — all by asking the right questions.

🚀 The Ultimate Algorithms & Data Structures Cheat Sheet Collection

Harsh Bangari Rawat — Tue, 30 Sep 2025 06:17:42 +0000

When preparing for coding interviews, brushing up on fundamentals, or simply strengthening your problem-solving skills, having quick access to high-quality cheat sheets and repositories can save you hours of searching.

Here’s a curated list of the best resources on Big-O notation, algorithms, data structures, and design patterns that every developer should bookmark.

📊 Complexity & Big-O Notation

Big-O Cheat Sheet A visual and practical guide to time & space complexities for common algorithms and data structures. Perfect for quick interview prep.
Algorithms & Data Structures Notes A detailed breakdown of Big-O with explanations and examples.

💻 Technical Interview Prep

Tech Interview Cheat Sheet Covers common interview concepts like arrays, linked lists, recursion, and system design pointers.

🗂️ Data Structures

Data Structures Cheat Sheet (PDF) Printable reference for quick lookups.
C++ Data Structures Notes A deep dive into C++-based data structures.
OOP Design in Java Covers object-oriented principles alongside classic algorithms and data structures.

🔍 Algorithms

Algorithmic Cheat Sheet A concise reference for algorithm categories and use-cases.
Sedgewick & Wayne — Algorithms (4th Edition) A highly recommended standard textbook with companion materials.
VisuAlgo An interactive platform to see how algorithms work (sorting, graphs, trees, etc.).

📚 Bonus — Code Repositories

Java

Python

Prakhar1989 — Algorithms

JavaScript

JavaScript Data Structures

C++

xtaci/algorithms

💡 Final Thoughts
Whether you’re preparing for your next coding interview, revising for exams, or just brushing up your skills, these resources cover everything from Big-O analysis to hands-on code implementations.

👉 Bookmark this post, share it with your peers, and remember:
Continuous learning never stops.

Mobile Development in 2025: 10 Must-Know Trends Shaping the Future

Harsh Bangari Rawat — Tue, 29 Jul 2025 12:41:59 +0000

Here’s a curated list of the most important and latest concepts in mobile app development to know in 2025, whether you're building for Android, iOS, cross-platform, or beyond.

🚀 1. Cross-Platform Frameworks 2.0

Cross-Platform Frameworks mark a new era of mobile development with improved native performance, deeper platform integration, and faster build times. Tools like Flutter, React Native (with Fabric), and Kotlin Multiplatform now offer near-native experiences while reducing code duplication, accelerating development, and enabling seamless deployment across Android, iOS, web, and desktop.

Trend	Description
Flutter 4 (or beyond)	More native integration, better web/desktop performance.
React Native with Fabric & TurboModules	Faster startup, better concurrency.
KMP (Kotlin Multiplatform)	Shared business logic between Android/iOS — gaining serious traction.
SwiftUI + UIKit interop	Apple’s direction: declarative UI with performance boosts.

🧠 2. AI Integration in Mobile Apps

AI integration in mobile apps enables smarter user experiences through features like on-device processing, chatbots, personalization, and image recognition. With tools like Core ML, TensorFlow Lite, and GPT APIs, apps in 2025 are more predictive, context-aware, and interactive than ever.

Use	Examples
On-device AI (Edge ML)	TensorFlow Lite, Core ML for offline features (e.g., image labeling, translation).
Chatbots/LLMs	Embedding assistants like GPT-4o into apps (via API or native model).
Generative AI features	Custom image/audio creation inside apps.
Context-aware UIs	AI suggests layouts, autofills, personalizes user experience.

☁️ 3. Cloud-Native + Serverless Backend

Cloud-native and serverless backends simplify mobile development by offloading infrastructure management. With platforms like Firebase, Supabase, and AWS Lambda, developers can build scalable, event-driven apps faster—handling authentication, databases, and APIs with minimal setup, optimized costs, and seamless real-time data syncing.

Tools	Concepts
Firebase + Supabase + Appwrite	Full backend in the cloud — auth, DB, push, storage.
Cloud Functions / Lambda / Azure Functions	Pay-as-you-go compute.
GraphQL + Edge APIs	Apollo, Hasura; fast global API access.

🔐 4. Security & Privacy-First Development

Security & privacy-first development ensures user data is protected by design. Using practices like biometric auth, passkeys, encryption, and zero-trust architecture, modern apps prioritize data minimization, consent-based tracking, and compliance with global regulations like GDPR and India's DPDP Act.

Concern	Practice
Zero Trust	Authenticate everything — even local sessions.
Biometric & Passkey Auth	Face ID, fingerprint, and passkeys (FIDO2/WebAuthn).
Encrypted local storage	Use SQLite with SQLCipher, or platform-level secure stores.
Data minimization	Collect less, store less — GDPR & DPDP compliance.

📱 5. Progressive Web and Super Apps

Progressive Web Apps (PWAs) and Super Apps redefine mobile experiences by combining speed, offline access, and multi-service functionality. PWAs bridge web and mobile platforms, while Super Apps offer mini-app ecosystems, enabling users to access diverse services within a single unified interface.

Concept	Detail
PWAs 2.0	Now support push notifications, offline mode, installable apps.
Mini-Apps / Super Apps	Popularized by WeChat, PhonePe: modular apps inside an app.
Modular Flutter/RN apps	Feature toggles, dynamic code push (e.g., via CodePush, Flutter’s deferred loading).

🔋 6. Performance + Battery Optimization

Performance and battery optimization are critical in modern mobile development. Developers now leverage efficient rendering, lazy loading, background task scheduling, and platform-specific profiling tools to reduce app bloat, lower CPU/GPU usage, and extend battery life—ensuring smooth, responsive experiences across devices.

Tools	Use
Jetpack Compose / SwiftUI	Declarative UIs are now optimized by compilers.
Jank detection	Monitor dropped frames using `Flutter DevTools` or `Systrace`.
Lazy loading / pagination	Show only what's needed.
Low-power modes	Handle throttled CPU, battery saver gracefully.

🎮 7. Immersive & Emerging Interfaces

Immersive and emerging interfaces include AR, VR, spatial audio, and gesture-based controls, powered by platforms like ARCore, ARKit, and WebXR. These interfaces enable more natural, context-aware user experiences, especially in gaming, education, retail, and virtual collaboration apps.

Type	Tooling
AR/VR	ARKit, ARCore, Flutter Unity Bridge, WebXR
Voice + multimodal input	Google Assistant, SiriKit, custom commands
Wearables + Companion apps	WatchOS, WearOS SDKs; Bluetooth LE integration

🧪 8. Advanced Dev & Testing Tools

Advanced development and testing tools streamline mobile app delivery through automated CI/CD pipelines, real-time debugging, and cloud-based device testing. Tools like Firebase Test Lab, GitHub Actions, and Flipper boost productivity, ensure quality, and reduce time-to-market across platforms and teams.

Area	Tool
Automated UI testing	Detox (RN), Flutter integration tests, Espresso, XCTest
CI/CD pipelines	Codemagic, Bitrise, GitHub Actions
Hot reload & preview UIs	Flutter DevTools, Jetpack Compose Preview, SwiftUI canvas
Code push (cautiously)	Expo Updates, CodePush, or custom OTA logic

🧱 9. Composable Architecture & Clean Code

Composable architecture promotes modular, reusable components that scale well in complex apps. Combined with clean code principles like separation of concerns and unidirectional data flow, it improves maintainability, testability, and developer productivity across platforms.

Concept	Framework
Unidirectional data flow	BLoC, Redux, Provider, Riverpod, MVVM
Domain-Driven Design (DDD)	Clean separation of UI, logic, and infrastructure
Feature modules	Dynamic app delivery and on-demand loading (Android App Bundles, iOS Modules)

🧭 10. Ethical Design & Digital Wellbeing

As technology continues to embed itself deeper into daily life, mobile developers carry more responsibility than ever — not just to innovate, but to do so ethically. Designing with intentionality, respect for user time, privacy, and mental health isn’t just a bonus feature; it’s foundational in 2025. From reducing notification fatigue to enabling meaningful user control and consent, ethical design is no longer optional — it's what separates great apps from the rest.

In the race to build the future, let's remember to build it with empathy.

Dark mode / Accessibility / Localization
Rate limiting & humane notifications
Usage insights (not tracking)
Consent-first UX (esp. with AI/LLMs)

💡 Bonus: Keep an Eye On

Concept	Why It Matters
Edge AI (like on-device LLMs)	Privacy + speed without cloud calls
Hybrid apps with WebView 2.0	Flutter WebView improvements, Capacitor
Custom OS integration (e.g., Android 15 APIs)	Better system-level control
Composable animations & motion design	Fluid UX matters more in 2025

Mobile development is evolving faster than ever — from AI integration to next-gen UI frameworks and platform convergence. Staying current isn’t just about chasing trends; it’s about building smarter, faster, and more sustainable apps for real-world users. Whether you're a beginner exploring Flutter or a seasoned pro mastering Kotlin Multiplatform, having a personalized learning path can save you months of trial and error.

Need help crafting your own roadmap based on your skills and goals? Drop a comment or reach out — let's build what's next, together.

Blob URLs Explained: How They Work and Why They Matter

Harsh Bangari Rawat — Tue, 18 Mar 2025 07:15:46 +0000

In the world of web development, we often encounter situations where we need to handle data directly in the browser without necessarily involving a server.

This is where Blob URLs come in handy. They are a powerful mechanism for working with data on the client-side, offering flexibility and performance benefits.

So, what exactly is a Blob URL?

Imagine a file existing only in your browser's memory. A Blob URL is essentially a temporary link to that file. It's a URL that represents data stored as a "Binary Large Object" (BLOB) within the browser. Think of it as a pointer to the raw data, whether it's an image, video, audio, or any other type of file. These URLs start with blob:.

Why are Blob URLs so useful?

Blob URLs offer several key advantages:

Client-Side Data Handling: They allow you to work with data directly in the browser without needing to upload it to a server.

This is incredibly useful for tasks like:

Previewing files: Letting users see images or videos they've uploaded before submitting a form.
Dynamic content creation: Generating content on the fly, such as creating images from canvas elements.
Offline functionality: Storing data locally so users can access it even without an internet connection.

Performance Boost: By avoiding unnecessary server round trips, Blob URLs can significantly improve the performance of your web applications. Instead of constantly sending data back and forth to the server, you can manipulate it locally.
Reduced Server Load: Offloading data handling to the client-side reduces the load on your server, making your application more scalable.
Enhanced User Experience: Features like instant previews and offline access create a smoother and more responsive user experience.

How do Blob URLs work?

When you create a Blob, the browser takes the data you provide (e.g., from a file upload, a canvas element, or an API response) and stores it in its memory. The browser then generates a unique URL that points to this data. This URL is the Blob URL.

From a File Input (User Upload)

const fileInput = document.getElementById('imageInput'); // Your file input element

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0]; // Get the selected file

  if (file) {
    const blob = new Blob([file], { type: file.type }); // Create the Blob

    // Now you can use the blob
    const blobUrl = URL.createObjectURL(blob); // Create a Blob URL
    const imgElement = document.getElementById('imagePreview');
    imgElement.src = blobUrl;

    // ... do something with the blob or blobUrl ...
  }
});

From a Uint8Array (Binary Data):

If you have the image data as a Uint8Array (e.g., from a fetch request or WebSocket), you can create a Blob from it.

fetch('image.jpg') // Or however you get your Uint8Array
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const uint8Array = new Uint8Array(buffer);
    const blob = new Blob([uint8Array], { type: 'image/jpeg' }); // Important: Set the correct type!

    const blobUrl = URL.createObjectURL(blob);
    const imgElement = document.getElementById('imagePreview');
    imgElement.src = blobUrl;

    // ... use the blob or blobUrl ...
  });

You can then use this Blob URL just like any other URL.
For example, you can set it as the src attribute of a <img> tag to display an image or use it to download the data.

Scenario: Image Preview

Let's say a user uploads an image to your website. Instead of immediately uploading it to your server, you can create a Blob URL from the uploaded file and use it to display a preview of the image.
This allows the user to see the image instantly without any server interaction.

Important Considerations:

Temporary Nature: Blob URLs are temporary. They only exist as long as the page that created them is open. If the user closes the page or refreshes it, the Blob URL becomes invalid.

Scope: Blob URLs are only accessible within the browser context that created them. They cannot be shared across different browser tabs or websites.

Memory Management: Since Blob URLs represent data stored in memory, it's crucial to manage them carefully. When you're finished with a Blob URL, you should release the associated memory using URL.revokeObjectURL(). This prevents memory leaks.

In Conclusion:

Blob URLs are a powerful tool for client-side data manipulation in web development. They provide a way to work with data efficiently and enhance the user experience. By understanding how they work and their limitations, you can leverage them to build more responsive and feature-rich web applications.
Just remember to handle memory management and be mindful of their temporary nature.

Mastering 6 Powerful Features in Dart

Harsh Bangari Rawat — Mon, 11 Nov 2024 06:18:04 +0000

Dart, Google's open-source programming language, has gained significant popularity due to its versatility, performance, and ease of use. This blog post will delve into six key features that make Dart a compelling choice for developers:

1. Strong Typing and Null Safety

Strong Typing: Dart is a strongly typed language, requiring explicit declaration of variable types. This helps prevent runtime errors and improves code readability.
Null Safety: Dart's null safety feature ensures that variables cannot be assigned null values unless explicitly marked as nullable. This eliminates the risk of null pointer exceptions, a common source of bugs.

// Strongly typed variable declaration
int age = 30;

// Null safety example
String? name; // Declaring a nullable variable
name ??= "Amit Mehra"; // Assigning a default value if null

2. Asynchronous Programming with Futures and Async/Await

Futures: Represent the eventual completion of an asynchronous operation, returning a value or an error.
Async/Await: Simplify asynchronous code, making it look more synchronous. async functions return a Future, and await can be used inside them to pause execution until the Future completes.

import 'dart:async';

Future<String> fetchData() async {
  // Simulate asynchronous operation
  await Future.delayed(Duration(seconds: 2));
  return "Data fetched successfully";
}

void main() async {
  String data = await fetchData();
  print(data);   

}

3. Dart's Isolate Model

Isolate: A separate thread of execution that runs in its own memory space. This allows for concurrent programming without the risk of data races.
Send Port: Used to communicate between isolates, sending and receiving messages.

import 'dart:isolate';

void main() async {
  // Create a new isolate
  Isolate isolate = await Isolate.spawn(heavyTask);

  // Send a message to the isolate
  isolate.sendPort.send("Start processing");
}

void heavyTask(SendPort sendPort) {
  // Perform heavy computations
  sendPort.send("Task completed");
}

4. Generics

Type Parameters: Allow you to create reusable code that can work with different data types.
Benefits: Improved type safety, code reusability, and flexibility.

class Pair<T> {
  final T first;
  final T second;

  Pair(this.first, this.second);
}

Pair<int> intPair = Pair(1, 2);
Pair<String> stringPair = Pair("Hello", "Dart");

5. Metaprogramming
Metaprogramming refers to the ability to write code that can generate, inspect, or modify other code at runtime. It's a powerful technique that can be used to create more flexible, dynamic, and efficient applications.

Mirrors: Provide a powerful mechanism for introspection, allowing you to examine the structure of your code at runtime.
Annotations: Custom tags that can be added to code elements to provide metadata.

import 'dart:mirrors';

class Person {
  @required
  String name;

  @required
  int age;
}

void main() {
  ClassMirror personClass = reflectType(Person);
  print(personClass.declarations);
}

6. Dart's Package Ecosystem

Pub: A package manager for Dart, providing a vast repository of libraries and tools.
Popular Packages: flutter, http, path, json_serializable, and many more.

By mastering these six powerful features, you can write efficient, maintainable, and scalable Dart applications.

Protecting Algorithms in Dart: A Multi-Layered Approach

Harsh Bangari Rawat — Mon, 28 Oct 2024 09:27:23 +0000

While it's impossible to completely obfuscate your algorithms, you can significantly increase the difficulty for others to reverse engineer them. Here are some effective strategies:

1. Obfuscation:

Minification: Reduce code size and readability by removing unnecessary characters.
Renaming: Replace meaningful variable and function names with meaningless ones.
Code Transformation: Apply techniques like control flow obfuscation to make the code harder to understand.

// Before obfuscation
int calculateArea(int length, int width) {
  return length * width;
}

// After obfuscation
int a(int b, int c) {
  return b * c;
}

2. Encryption:

Encrypt Sensitive Parts: Encrypt critical parts of your algorithm, such as secret keys or core logic.
Secure Key Storage: Store encryption keys securely, either locally or remotely.
Robust Encryption Algorithms: Use strong encryption algorithms like AES or RSA.

// Before obfuscation
String secretKey = "mySecretKey";

// After obfuscation
String secretKey = decrypt("encryptedSecretKey");

3. API-Based Approach:

Server-Side Logic: Offload the core algorithm to a server-side API.
Secure Communication: Use HTTPS to protect data transmission.
Rate Limiting: Implement rate limiting to prevent abuse.

Server-Side (NodeJs):

const express = require('express');
const app = express();

app.get('/calculateArea', (req, res) => {
  const length = req.query.length;
  const width = req.query.width;

  const area = calculateArea(length, width); // Your core algorithm

  res.json({ area });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Client-Side (Dart):

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<int> calculateArea(int length, int width) async {
  final response = await http.get(Uri.parse('http://localhost:3000/calculateArea?length=$length&width=$width'));

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    return data['area'];
  } else {
    throw Exception('Failed to calculate area');
  }
}

4. Native Module Integration:

Platform-Specific Implementation: Implement critical parts of the algorithm in native code (Java/Kotlin for Android, Objective-C/Swift for iOS).
Reduced Exposure: This makes it harder to reverse engineer the core logic.

Android: Use platform_channel package to establish communication between Dart and the native module.

Java Native Module

public class NativeCalculator {
  public static int calculateArea(int length, int width) {
    return length * width;
  }
}

Dart Code

import 'package:flutter/services.dart';

class NativeCalculatorPlugin {
  static const MethodChannel _channel = MethodChannel('native_calculator');

  static Future<int> calculateArea(int length, int width) async {
    final result = await _channel.invokeMethod('calculateArea', {'length': length, 'width': width});
    return result;
  }
}

iOS:
Use the flutter_plugin package to establish communication between Dart and the native module.

Swift Framework

import Foundation

public class NativeCalculator {
    public static func calculateArea(length: Int, width: Int) -> Int {
        return length * width
    }
}

Dart Code

import 'package:flutter/services.dart';

class NativeCalculatorPlugin {
  static const MethodChannel _channel = MethodChannel('native_calculator');

  static Future<int> calculateArea(int length, int width) async {
    final result = await _channel.invokeMethod('calculateArea', {'length': length, 'width': width});
    return result;
  }
}

5. Regular Updates and Security Audits:

Stay Updated: Keep your dependencies and libraries up-to-date to address vulnerabilities.
Security Audits: Conduct regular security audits to identify potential weaknesses.

Additional Considerations:

Avoid Exposing Secrets: Never expose sensitive information like API keys or encryption keys in your source code.
Secure Communication: Use HTTPS to protect data transmission.
Input Validation: Validate user input to prevent malicious attacks.
Error Handling: Handle errors gracefully to avoid exposing sensitive information.
Regular Updates: Keep your code and libraries up-to-date.
Third-Party Libraries: Use reputable libraries and carefully review their security practices.
Code Reviews: Conduct regular code reviews to identify potential security vulnerabilities.

Remember, no single technique is foolproof. A layered approach, combining multiple techniques, offers the best protection for your algorithms.

Feel free to ask any questions or suggest a topic for further discussion.

Stay Safe and Happy Coding! 💻

Part 2: Unit Testing in Flutter

Harsh Bangari Rawat — Wed, 28 Aug 2024 11:03:18 +0000

Unit testing is a crucial practice to ensure the correctness and reliability of your application's logic. While Flutter provides the testWidget() method for testing Flutter widgets Part 1, there are many scenarios where you'll need to test pure Dart code, such as business logic, data models, or utility functions. This blog post will delve into the test() method, which is specifically designed for testing pure Dart code in Flutter.

Understanding test()

The test() method is part of Flutter's testing framework and is used to create test cases for pure Dart code. It allows you to isolate your code from Flutter's widget tree and focus solely on testing its functionality.

Key Features

Isolation: Tests created using test() are independent of Flutter's widget tree, ensuring that they don't rely on the state of other components.
Flexibility: You can test any Dart code, regardless of whether it's directly related to Flutter or not.
Simplicity: The syntax for creating test cases using test() is straightforward and easy to understand.

Creating a Test Case

To create a test case using test(), follow these steps:

1. Import the flutter_test package:

import 'package:flutter_test/flutter_test.dart';

2. Define a test group: Use the group() method to group related tests together.
3. Create a test case: Use the test() method to define an individual test case.
4. Write test assertions: Use assertions like expect() to verify the behavior of your code.

calculator.dart

class Calculator {
  double add(double a, double b) {
//either a or b is NaN(Not a Number), the result of the operation will also be NaN.
    if (a.isNaN || b.isNaN) {
      return double.nan;
    }
    return a + b;
  }

  double subtract(double a, double b) {
    return a - b;
  }

  double multiply(double a, double b) {
    return a * b;
  }

  double divide(double a, double b) {
    if (b == 0) {
      throw ArgumentError('Cannot divide by zero.');
    }
    return a / b;
  }
}

widget_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_samples/test_widget/calculator.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  group('Calculator tests', () {
    test('Addition should work correctly', () {
      final calculator = Calculator();
      expect(calculator.add(2, 3), equals(5));
      expect(calculator.add(double.nan, 3), isNaN);
    });

    test('Subtraction should work correctly', () {
      final calculator = Calculator();
      expect(calculator.subtract(5, 2), equals(3));
    });
    test('Multiplication should work correctly', () {
      final calculator = Calculator();
      expect(calculator.multiply(5, 2), equals(10));
    });
    test('Division should work correctly', () {
      final calculator = Calculator();
      expect(calculator.divide(5, 2), equals(2.5));
      expect(() => calculator.divide(5, 0), throwsA(isA<ArgumentError>()));
    });

  });


}

In this example, we're testing a Calculator class. We create a test group named "Calculator tests" and define four test cases: to verify addition, subtraction, multiplication, and division. The expect() method is used to assert that the results of the calculations are as expected.

In Addition, we check for NaN in both a and b. If either is NaN(Not a Number), the result is set to double.nan.

In Divison, we check the result of the operation. If the divisor b==0, an ArgumentError is thrown with an appropriate message.

Best Practices for test():

Keep tests isolated: Ensure that each test is independent and doesn't rely on the state of other tests.
Use clear and concise names: Name your tests and test groups descriptively to improve readability.
Test edge cases: Consider scenarios like null values, empty inputs, and boundary conditions.
Use mocking and dependency injection: Isolate your code from external dependencies to simplify testing.
Write tests before code (TDD): Consider Test-Driven Development (TDD) to guide your development process.

Source Code: Github

Conclusion

The test() method in Flutter is a powerful tool for testing pure Dart code. By following the best practices outlined in this guide, you can write effective unit tests that help you ensure the quality and reliability of your Flutter applications.

Part 1: Unit Testing in Flutter: Your App's Unsung Hero

Harsh Bangari Rawat — Tue, 27 Aug 2024 07:26:21 +0000

Introduction

In the fast-paced world of app development, delivering high-quality software is paramount. While visual appeal and user experience are often in the spotlight, a robust testing strategy is equally crucial. Among the various testing levels, unit testing stands out as the foundation for building reliable and maintainable Flutter apps.

What is Unit Testing?

Unit testing involves testing individual components of your code in isolation. In Flutter, this means testing individual widgets, functions, or classes. By focusing on small, isolated units, you can quickly identify and fix bugs, ensuring your app's overall stability.

Why is Unit Testing Important?

Early Bug Detection: Catch issues early in the development cycle, preventing them from cascading into more complex problems. Improved Code Quality: Writing testable code often leads to cleaner, more modular code.
Faster Development: Regression testing becomes more efficient with a comprehensive unit test suite.
Increased Confidence: A solid unit test suite gives developers the confidence to make changes without fear of breaking existing functionality.

Getting Started with Unit Testing in Flutter

Flutter provides excellent support for unit testing through the test package. Here's a basic outline of the process:

1. Set Up a Test Environment:

Create a test directory in your Flutter project.
Import the necessary packages, including package:flutter_test.

2. Write Test Cases:

Create test files with names ending in _test.dart.
Use test() and expect() functions to define and verify test cases.

3. Run Tests:

Use the flutter test command to execute your test suite.

greeting_widget.dart

import 'package:flutter/widgets.dart';

class GreetingWidget extends StatelessWidget {
  final String name;

  const GreetingWidget({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('Welcome, $name!');
  }
}

Unit Testing a Greeting Widget

widget_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_samples/greeting_widget.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('GreetingWidget displays correct text', (WidgetTester tester) async {
    // Create the widget
    await tester.pumpWidget(
      MaterialApp(
        home: GreetingWidget(name: 'Amit Kumar'),
      ),
    );

    // Find the text widget and verify it's content
    final textFinder = find.text('Welcome, Amit Kumar!');
    expect(textFinder, findsOneWidget);
  });
}

Output:

Source Code: Github

Conclusion

Unit testing is an indispensable practice for building robust and reliable Flutter apps. By investing time in writing comprehensive unit tests, you'll save time and effort in the long run, while ensuring the quality of your code. Remember, a well-tested app is a happy app!

Avoiding Common useState() Mistakes in React

Harsh Bangari Rawat — Mon, 01 Jul 2024 08:46:11 +0000

React's useState hook is a powerful tool for managing component state, but even the most seasoned developers can fall prey to common pitfalls.

Here, we'll explore these mistakes and equip you with the knowledge to craft robust and performant React applications.

1. Mutating State Directly - A Cardinal Sin

React relies on immutability for state updates. This means you should never directly modify the state object returned by useState. Instead, use the setter function provided to create a new state object.

Avoid This ❌

const [count, setCount] = useState(0);

const handleClick = () => {
  count++; // Wrong! This mutates state directly
}

Do This ✅

const handleClick = () => {
  setCount(count + 1); // Create a new state object with updated value
}

2. Forgetting Prior State - Keeping Track of Changes

When updating state, it's crucial to consider the previous state value. React updates occur asynchronously, so directly referencing the current state within the update function might lead to unexpected behavior.

Avoid This ❌

const [todos, setTodos] = useState([]);

const handleAddTodo = (text) => {
  // This might miss newly added todos if called rapidly
  setTodos([...todos, text]); 
}

Do This ✅

const handleAddTodo = (text) => {
  setTodos((prevTodos) => [...prevTodos, text]); // Use the previous state
}

3. Overusing State for Derived Values - When Less is More

useState is ideal for managing simple state, but for complex derived values, consider alternatives like useMemo or custom memoization functions. Overusing state for derived values can lead to unnecessary re-renders and performance issues.

Avoid This ❌

const [todos, setTodos] = useState([]);

const completedTodos = todos.filter((todo) => todo.completed); // Derived value

const renderTodos = () => {
  return (
    <ul>
      {completedTodos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

If a new todo is added (setTodos([...todos, newTodo])), even if it's not completed, both todos and completedTodos will be updated, triggering a re-render of the renderTodos function, even though only the incomplete list needs to be updated.

This unnecessary re-render can be avoided by using techniques like useMemo.

Do This ✅

import { useMemo } from 'react';

const [todos, setTodos] = useState([]);

const completedTodos = useMemo(() => todos.filter((todo) => todo.completed), [todos]); // Memoize based on todos

const renderTodos = () => {
  return (
    <ul>
      {completedTodos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

useMemo ensures completedTodos is only recalculated when the todos array actually changes (based on the dependency array [todos]).

4. Neglecting Optional Chaining - Avoiding Nullish Errors

When dealing with potential null or undefined values within your state object, leverage optional chaining (?.) to prevent errors. This ensures the graceful handling of missing data.

Avoid This ❌


const user = { name: "John" };
const [currentUser, setCurrentUser] = useState(user);

const displayUserName = () => {
  return currentUser.name; // Might throw an error if currentUser is null
}

Do This ✅

const displayUserName = () => {
  return currentUser?.name; // Safe access using optional chaining
}

5. Managing Multiple Inputs - A Formidable Challenge

Handling forms with multiple input fields can get tricky. Consider using an object or an array within your state to manage individual field values. This allows for easier updates and avoids creating separate state variables for each field.

Avoid This ❌

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');

const handleChange = (event) => {
  if (event.target.name === 'name') {
    setName(event.target.value);
  } else if (event.target.name === 'email') {
    setEmail(event.target.value);
  } else if (event.target.name === 'message') {
    setMessage(setMessage);
  }
};

Code Repetition: Updating each field requires separate logic within the handleChange function, making the code repetitive and error-prone.
State Management Complexity: As the number of fields increases, managing numerous state variables and their corresponding setters becomes cumbersome.

Do This ✅

const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });

  const handleChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" value={formData.name} onChange={handleChange} />
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} />
      <label htmlFor="message">Message:</label>
      <textarea id="message" name="message" value={formData.message} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

Concise State Management: All form data is stored in a single place, simplifying state management and updates.
Cleaner Update Logic: The handleChange function becomes more concise, using the spread operator (...formData) to update a specific field within the state object.

Remember: When dealing with complex forms with nested structures or conditional logic, consider using libraries like Formik or React Hook Form to streamline form validation and state management.

Bonus Tip: When in Doubt, Use useReducer

For complex state management scenarios with intricate update logic, explore useReducer. It provides a more predictable way to handle state updates, especially when dealing with nested state structures.

By following these guidelines and adopting best practices, you'll write cleaner, more maintainable React components that effectively leverage the power of useState. Remember, a well-managed state is the heart of a responsive and performant React application.

Want to stay up-to-date on the latest Tips and Tricks? Like this post and follow us for more content like this!

Happy Coding!!!

Flutter's Essential Toolkit: Top Tools for Every Developer

Harsh Bangari Rawat — Tue, 25 Jun 2024 13:01:24 +0000

Flutter has taken the mobile app development world by storm. With its hot reload functionality, rich widget library, and ability to build beautiful cross-platform apps, it's no wonder developers are flocking to this framework. But even the most skilled developer needs the right tools in their belt to be truly productive.

In this blog, we'll explore the essential toolkit for every Flutter developer, from code editors to back-end integrations. Whether you're a seasoned pro or just starting your Flutter journey, these tools will help you streamline your workflow and build amazing apps.

1. Building the Foundation: Code Editors

Visual Studio Code (VS Code) : This free, open-source editor reigns supreme for many Flutter developers. It boasts features like syntax highlighting, code completion, debugging capabilities, and a vast marketplace of extensions to tailor your development experience.
Android Studio : While primarily focused on Android development, Android Studio offers excellent Flutter support with its Flutter plugin. This plugin provides features like hot reload, Android-specific debugging tools, and a layout editor for designing UIs.

2. Design to Code Bridge:

Supernova : This innovative tool bridges the gap between designers and developers. Simply import your design files from Figma or Sketch, and Supernova generates production-ready Flutter code, saving you tons of time and effort.

3. Back-End Powerhouse:

Firebase : Google's back-end-as-a-service (BaaS) platform integrates seamlessly with Flutter. Firebase offers a variety of services to empower your app, including user authentication, database storage (Cloud Firestore), cloud storage, analytics, and crashlytics for error reporting.
Parse :
Parse Server is the open-source foundation that Back4App builds upon. You can self-host Parse Server on your own infrastructure, giving you complete control over your backend. However, this requires more development and server management expertise.
parse-client
GraphQL :
Back4app is a backend service of choice because of its ease of use, optimization, and schema definition features that are provided on top of the already awesome databases.
graphql-client

4. Keeping it Running Smoothly:

DartPad : This web-based tool lets you write and run Dart code snippets on the fly. It's perfect for prototyping, experimenting with small code pieces, or learning the Dart language without needing a full development environment set up.

5. Beyond the Essentials:

Beyond these core tools, there's a vast ecosystem of third-party packages available on the pub.dev package manager. These packages offer a wide range of functionalities, from state management (BLoC, Provider) to networking (http, Dio) and advanced UI elements. Explore this rich library to find the tools that perfectly suit your project's needs.

Conclusion

This essential toolkit equips you to conquer the world of Flutter development. Remember, the best tools depend on your specific workflow and project requirements. So, experiment, explore, and find the perfect combination to unleash your Flutter app development potential!

Happy coding!

Building a Progressive Web App (PWA) with Flutter

Harsh Bangari Rawat — Mon, 24 Jun 2024 10:28:19 +0000

Imagine a world where users can enjoy app-like experiences without clogging their phones with endless downloads. That's the power of Progressive Web Apps (PWAs). For startups and businesses entering the digital space, PWAs offer a compelling alternative to traditional app development. Ditch the bulky app downloads and reach a wider audience with a lightning-fast, web-based solution.

Benefits of PWAs (Focus on User Benefits):

Seamless User Experience: PWAs deliver app-like functionality directly from the web, with features like offline access and push notifications. Users get the best of both worlds: web accessibility and app-like convenience.
Increased User Base: Eliminate the download barrier! PWAs work across devices and don't require app store approval, expanding your reach to a wider audience.
Reduced Development Costs: Build once, deploy everywhere. PWAs share a codebase for web and mobile, saving you time and resources compared to developing separate native apps.

Technology Stack for PWA Development:

This article will guide you through the ideal technology stack for PWA development, including frameworks like Flutter that streamline the process.

What You'll Learn:

Understanding PWAs: We'll delve into the core concepts and benefits of PWAs.
Tech Stack for Success: Discover the best tools and frameworks for building efficient PWAs.
Development and Launch Steps: Learn a step-by-step approach to developing and deploying your PWA.

What is a Progressive Web Application (PWA)?

PWAs, or Progressive Web Apps, are a revolutionary approach to building applications. They bridge the gap between traditional websites and native mobile apps, offering users an app-like experience accessible directly through the web browser.

Here's what makes PWAs so exciting:

Install-Free Experience: No need to clog up phone storage! Users can access PWAs directly from the web, eliminating the app store download process.
Offline Functionality: PWAs can work even when there's no internet connection. They can store essential data and functionalities for users to access later.
Native-like Feel: PWAs offer features like push notifications and home screen icons, providing an experience that rivals native apps.
Wider Reach: PWAs work seamlessly across different devices (desktop, mobile, tablets) without requiring separate development for each platform.
Faster Development: Building a PWA often takes less time and resources compared to developing native apps for various platforms.

Before diving in, here's what you'll need:

Flutter SDK: The core framework for building PWAs.
Chrome Browser: Essential for debugging your web app.
IDE: Choose your preferred development environment (VS Code, Android Studio, or IntelliJ IDEA).
Plugins: Install Flutter & Dart Plugins within your chosen IDE.

You need to begin by installing the Flutter SDK and Chrome in your system to start over. Although Flutter offers four channels i.e., master, beta, dev, and stable. But to develop a progressive web app with Flutter you can only use master, beta, and stable. So, here we have used a stable version, you can also use any of these three.



 flutter channel stable

To upgrade to the latest version of the stable



 flutter upgrade

Create a Futter project



 flutter create. hospital_pwa

Important Note: The command requires a period (".") at the end to enable web support correctly.

Run and Test on Chrome:
After enabling web support and building your app's HTML and responsiveness, launch it directly in Chrome for testing.



flutter run -d chrome

Build your Project

To build a web version of your Flutter application.



flutter build web

The flutter build web command generates the web version of your app.

Once you've built your PWA using flutter build web, it's time to make it accessible to the world! Here's a breakdown of the deployment and launch process:

1. Choose a Hosting Platform:

Select a web hosting platform to serve your PWA's static files. Popular options include:

Firebase Hosting: Offers a free tier and easy integration with other Firebase services. firebase
Netlify: Streamlined deployment process and features like automatic HTTPS and CDN. netlify
Vercel: Performance-focused platform with global edge network and serverless functions (optional).vercel
Static website hosting: Any web server that supports static content hosting can be used.

2. Deployment Process:

Each platform has its deployment instructions. Generally, you'll need to:

Connect your hosting account to your project.
Upload the contents of the build/web folder generated by flutter build web.
Configure custom domains (optional): You can connect a custom domain name to your PWA for a more professional look.

3. Testing and Launch:

Test your PWA thoroughly in different browsers and devices.
Once everything is functioning as expected, launch your PWA!
Promote your PWA: Share the link to your PWA on social media, your website, or app stores (if applicable for PWA discovery).

Congratulations! You've explored the exciting world of Progressive Web Apps (PWAs) and how Flutter empowers you to build them effectively. By leveraging Flutter's capabilities, you can create fast, reliable, and app-like web experiences that work seamlessly across devices.

Don't forget to like and comment your thoughts for more! Stay tuned for further insights and tutorials in Flutter.

Happy Coding!!!

Building a Custom Flutter Widget from Scratch

Harsh Bangari Rawat — Fri, 21 Jun 2024 16:38:57 +0000

Flutter's magic lies in its extensive widget library. But what if you need a UI element that doesn't quite fit the mold? That's where custom widgets come in! Buckle up, Flutter developers, as we embark on a journey to build a custom widget from scratch.

Why Custom Widgets?

Custom widgets offer a treasure trove of benefits:

Reusability: Write your widget once, use it everywhere! This saves code, promotes consistency, and streamlines development.
Encapsulation: Package functionality and appearance into a neat unit, keeping your code clean and organized.
Customization: Tailor your widget's behavior and appearance to precisely meet your needs.

Let's Build a Star Rating Widget!

Imagine a widget that displays a row of stars, allowing users to rate something. Here's how we'll break it down:

1. Setting Up:

Create a new Flutter project and a dedicated Dart file for your widget (e.g., custom_rating_bar.dart).
Import necessary packages like flutter and material.

2. The CustomStarRating Class:

Define a class named CustomRatingBar that extends StatelessWidget.

3. Star Count and Rating Properties:

Add properties to the CustomRatingBar class:
starCount: An integer representing the total number of stars.
rating: A double representing the current user rating (optional).
filledColor: Color representing the filled color for the star.
unfilledColor: Color representing the unfilled color for the star.

4. Building the Stars:

Override the build method of the CustomRatingBar class.
Use a Row widget to display the stars horizontally.
Loop through a list based on starCount.
Inside the loop, use an Icon for each star.
Customize the Icon displayed based on the current rating (filled star for selected, unfilled star for unselected).

5. Handling User Interaction:

Set the onTap callback of the GestureDetector to update the rating property.
Consider emitting an event (using a ValueNotifier or similar) to notify parent widgets about rating changes.

6. Adding Flair (Optional):

Style your stars using Icon properties like color and size.
Implement custom animations for star selection using AnimatedIcon.

Putting it All Together:

With all the pieces in place, use the CustomRatingBar widget in your app's layout:

CustomRatingBar(starCount: 5, rating: 1.0,
                filledColor: Colors.amber,
                unfilledColor: Colors.grey,
                onRatingChanged: () {})

custom_rating_bar.dart

import 'package:flutter/material.dart';

class CustomRatingBar extends StatefulWidget {
  final double rating;
  final int starCount;
  final Function onRatingChanged;
  final Color filledColor;
  final Color unfilledColor;

  const CustomRatingBar({
    super.key,
    required this.rating,
    required this.starCount,
    required this.onRatingChanged,
    required this.unfilledColor,
    required this.filledColor,
  });

  @override
  State<CustomRatingBar> createState() => _CustomRatingBarState();
}

class _CustomRatingBarState extends State<CustomRatingBar> {
  double _currentRating = 0.0;

  @override
  void initState() {
    super.initState();
    _currentRating = widget.rating - 1;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(
        widget.starCount,
        (index) => GestureDetector(
          onTap: () => _onStarTap(index.toDouble()),
          child: Icon(
            Icons.star,
            size: 30.0,
            color: _getColor(index),
          ),
        ),
      ),
    );
  }

  Color _getColor(int index) {
    if (index <= _currentRating) {
      return widget.filledColor;
    } else {
      return widget.unfilledColor;
    }
  }

  void _onStarTap(double newRating) {
    if (_currentRating == newRating) {
      newRating--;
    }
    setState(() {
      _currentRating = newRating;
      // widget.onRatingChanged(newRating);
    });
  }
}

Conclusion

This blog demonstrates a basic implementation of a custom rating bar in Flutter. It offers features like:

Star Count: You can easily adjust the number of stars displayed.
Rating: Users can tap on stars to provide their rating.
Colors: Define the desired colors and icons for filled, empty, and half-filled states (if applicable).

Further Enhancement Scopes

Animated Selection: The selected stars smoothly animate with a scaling effect.
Half Rating Support: Modify the function to include logic for displaying half-filled stars.

GitHub Code

Happy Coding!!! 🧑🏻‍💻