Forem: Irfan Adisukma

Great Code Starts with Great Planning

Irfan Adisukma — Mon, 24 Feb 2025 07:47:58 +0000

Every developer dreams of writing clean, efficient, and impactful code. But what many overlook is the critical step that comes before the first line of code is even written: planning. Without a clear roadmap, projects can quickly spiral into chaos, leading to wasted time, frustration, and subpar results. Taking the time to carefully plan your approach not only sets a solid foundation but also makes the coding process smoother and more productive. In this article, we'll explore why planning is the cornerstone of successful development and how it can elevate your coding projects to new heights.

The Journey of a Beginner Developer

The internet is full of technical tutorials and advice on how to code effectively. But let’s take a step back and look at the bigger picture. No matter how many mistakes you make or how often things don’t go as planned, persistence is key. The journey of a developer comes with challenges, but it’s also incredibly rewarding. Stay committed, keep learning, and trust that your efforts will pay off over time. The code you write today has the potential to make a real impact.

It’s normal to feel discouraged sometimes, even the most experienced ones, has faced similar struggles. If you're feeling stuck, remember that it's just part of the learning process. Even I come across difficult topics that feel overwhelming at times, but with consistent effort, improvement always follows. Keep going, you’re making progress every day.

The Beginner Stage

As a beginner, it often feels like you're on an emotional rollercoaster. Some days, you’re unstoppable, completely focused on coding, excited about your progress, and confident that you’ve found your passion. On other days, the challenges feel too difficult.
A tricky concept or a bug that’s hard to fix might make you question your path, thinking, “Is this really what I want to do for the rest of my life?” It’s frustrating, and it’s easy to feel like the struggle is holding you back.

Navigating the Highs and Lows

This stage is tough, but it’s also crucial. It’s a phase where you’ll inevitably make mistakes and lots of them. There are many reasons for this. Perhaps you’re rushing to land your first job in tech, or maybe you’ve taken on low budget projects just to make ends meet. These pressures can lead to poor decisions, overly optimistic timelines, and code that isn’t as clean or efficient as you’d like. But here’s the truth, this is normal. Every seasoned developer you admire has been through this phase. It’s a rite of passage that helps you grow. You may feel like you’re just stumbling along, but every misstep teaches you something valuable. If you keep pushing forward, you’ll find your rhythm and reach the next level of your journey.

I can confidently tell you this, it’s all worth it. The struggles, the late nights, and even the failed projects they all contribute to your development as a programmer. So, keep coding. Keep learning. The only way to improve is to persevere.

Finding Strength in the Beginner Stage

While this stage might feel overwhelming, it’s also one of the most transformative phases of your journey. It’s here that you develop qualities that will serve you for the rest of your career. Among the most important are:

Willpower: The determination to keep going, even when the odds feel stacked against you.
Curiosity: An insatiable hunger to learn more and explore uncharted territories in programming.
Ambition: The drive to push past your limits and achieve your goals.
Resilience: The courage to embrace failures and use them as stepping stones toward success. Humility: The willingness to accept feedback, no matter how critical, and use it to improve.

These traits are your superpowers during this stage. Use them to fuel your growth. Let your ambition and curiosity guide you to new knowledge. Push yourself to take on challenges that seem just beyond your reach. And when you stumble, remember that mistakes are simply opportunities to learn.

At this stage, it’s also important to focus on the bigger picture. Yes, you and I have goals whether that’s building better apps, landing a dream job, or contributing to impactful projects. But our purpose as developers goes beyond personal achievements. With every line of code, we have the opportunity to add value to the world. By solving problems, simplifying processes, and sharing our knowledge, we can create meaningful change.

Plan First, Code Later

A great real world example of the "Plan First, Code Later" approach is how Instagram was initially developed.

In 2010, Instagram (then called "Burbn") was just an idea in the minds of its founders, Kevin Systrom and Mike Krieger. Instead of jumping straight into coding, they followed a structured planning approach before writing a single line of code.

Case Study: Instagram's Early Development

Background
In 2010, Instagram (then called "Burbn") was just an idea in the minds of its founders, Kevin Systrom and Mike Krieger. Instead of jumping straight into coding, they followed a structured planning approach before writing a single line of code.

Step 1: Analyzing Product Requirements
Initially, Burbn was a location based check-in app with a photo sharing feature. After conducting market research and analyzing user feedback, the team realized that users were mainly interested in the photo-sharing feature rather than the check-ins.

Lesson: Instead of coding an unnecessary check-in system, they refined their product requirements and pivoted towards a dedicated photo sharing app.

Step 2: System Architecture & Scalability Planning
Before coding, the team planned how the backend should handle millions of photos and user interactions. They chose AWS for hosting and used Django as their backend framework for rapid development while ensuring scalability.

Lesson: Without proper planning, they could have picked a technology stack that wouldn't scale effectively.

Step 3: UX/UI Planning Before Development
They designed a simple and intuitive user interface before writing any code. They focused on a minimalist approach, reducing clutter and unnecessary features, leading to an easy to use app.

Lesson: By planning the UI/UX beforehand, they avoided the need for major redesigns after coding.

Outcome
Because of their careful planning and iterative approach, Instagram launched with a lightweight, focused, and scalable system. Within two months, it gained 1 million users, proving the power of planning before coding.

Source: strategizeyourcareer

In programming, clarity in requirements, design, and implementation plays a crucial role in minimizing the number of fixes or bugs. Let's break this down:

Clarify Early → Fewer Fixes Later
When requirements are well defined, developers know exactly what to build. This prevents misunderstandings and unnecessary revisions.
A clear design ensures that architectural decisions are sound from the start, reducing structural issues later.
Writing clean and well documented code makes debugging and future maintenance easier, reducing the chances of introducing new bugs when fixing existing ones.
Lack of Clarity → More Fixes Needed
If requirements are vague, developers might make incorrect assumptions, leading to features that don’t match expectations.
A poorly designed system can cause scalability and maintainability problems, requiring constant refactoring.
Ambiguous or unstructured code can lead to hard to find bugs, increasing debugging time and causing more regressions.

As a beginner, you’ve likely experienced the highs and lows of learning to code. The excitement of progress mixed with the frustration of setbacks is part of the process. But here’s something that can make this stage more manageable: developing a strong foundation in planning before you dive into coding.

Let's take an example of "Plan First, Code Later" in a real coding scenario using Flutter

Before Planning (Jumping Straight into Code)

class UserListScreen extends StatefulWidget {
  @override
  _UserListScreenState createState() => _UserListScreenState();
}

class _UserListScreenState extends State<UserListScreen> {
  List<dynamic> users = [];

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  Future<void> fetchUsers() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
    if (response.statusCode == 200) {
      setState(() {
        users = json.decode(response.body);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Users')),
      body: users.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(users[index]['name']),
                  subtitle: Text(users[index]['email']),
                );
              },
            ),
    );
  }
}

Problems with This Approach

Mixes UI and Business Logic: The fetchUsers() function is inside the UI, making it hard to test and maintain.
Tight Coupling: If the API changes, we must modify the UI code as well.
No Error Handling: What if the API fails? There’s no proper error message.
Not Scalable: If we add caching or other data sources (like a database), we will need major rewrites.

After Planning (More Effective & Maintainable Code)

Step 1: Define a Model (User.dart)

class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }
}

Step 2: Separate Data Layer (UserService.dart)

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

class UserService {
  Future<List<User>> fetchUsers() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

    if (response.statusCode == 200) {
      List<dynamic> data = json.decode(response.body);
      return data.map((json) => User.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load users');
    }
  }
}

Step 3: Use State Management (UserProvider.dart)

import 'package:flutter/material.dart';
import 'user_service.dart';
import 'user.dart';

class UserProvider extends ChangeNotifier {
  final UserService _userService = UserService();
  List<User> _users = [];
  bool _isLoading = true;
  String? _error;

  List<User> get users => _users;
  bool get isLoading => _isLoading;
  String? get error => _error;

  UserProvider() {
    fetchUsers();
  }

  Future<void> fetchUsers() async {
    try {
      _isLoading = true;
      notifyListeners();

      _users = await _userService.fetchUsers();
      _error = null;
    } catch (e) {
      _error = e.toString();
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }
}

Step 4: UI with Separation of Concerns (UserListScreen.dart)

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'user_provider.dart';

class UserListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Users')),
      body: Consumer<UserProvider>(
        builder: (context, userProvider, child) {
          if (userProvider.isLoading) {
            return Center(child: CircularProgressIndicator());
          }

          if (userProvider.error != null) {
            return Center(child: Text('Error: ${userProvider.error}'));
          }

          return ListView.builder(
            itemCount: userProvider.users.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(userProvider.users[index].name),
                subtitle: Text(userProvider.users[index].email),
              );
            },
          );
        },
      ),
    );
  }
}

Step 5: Setup in main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'user_provider.dart';
import 'user_list_screen.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserProvider()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserListScreen(),
    );
  }
}

Benefits of This Planned Approach

Separation of Concerns – Business logic, API calls, and UI are separate.
Scalability – Easy to add caching, local storage, or database.
Better Error Handling – Provides clear error messages.
Easier Testing – Can unit test the UserService without involving UI.
Less Boilerplate in UI – The UI is now focused only on presentation.

When starting a new project or feature, it’s tempting to jump straight into coding because it feels productive. However, skipping the planning phase often leads to inefficiencies, unnecessary mistakes, and wasted effort. Taking the time to plan ensures a smoother development process and helps create cleaner, more maintainable code.

Planning doesn’t always mean lengthy documentation. For small tasks, it might be as simple as confirming requirements: “You want the button text changed to blue, right?” For larger projects, it involves defining specifications, gathering feedback, and securing approval. Without this step, you risk solving the wrong problem or overlooking key considerations.

Writing code too soon can also make it harder to communicate ideas, especially with non technical colleagues. Conversations, diagrams, and brainstorming sessions are often faster ways to clarify concepts than jumping into code. While coding can sometimes help explore a problem, any early code should be treated as a rough draft rather than a final solution.

Even informal planning breaking down a task into steps or considering potential challenges can help avoid issues later. By thinking ahead, you can refine your approach before writing code, ultimately saving time and reducing frustration.

Good planning doesn’t slow you down; it helps you move faster by preventing costly mistakes and ensuring you build the right solution from the start.

Thank you for reading this article! I hope it helps you understand the importance of planning before coding and how it can lead to better, more efficient development. Happy coding! 🚀

References:
letterstoanewdeveloper
Michael Rothrock
Instagram Was First Called 'Burbn'

Flutter Image Compression: Ensuring High Quality

Irfan Adisukma — Thu, 14 Nov 2024 06:05:58 +0000

In today's digital age, we often find ourselves taking countless photos and capturing memories on our devices. As developers, we want to make sure these images are not just beautiful but also efficient when it comes to uploading them to a server. This is where image compression comes into play.

In this article, we’ll explore the ins and outs of image compression for Flutter, focusing specifically on how to balance quality and performance for seamless uploads. Whether you're building a social media app or a photo-sharing platform, understanding the art of compression can greatly enhance user experience while keeping your application running smoothly. Let's dive in!

Image compression is the process of reducing the file size of an image without significantly compromising its quality. It involves removing unnecessary data or utilizing algorithms to make the file smaller. This is essential for several reasons, especially when uploading images to a server.

Firstly, larger image sizes can lead to longer upload times. For users with slower internet connections or limited bandwidth, this delay can result in frustration and a poor overall experience. By compressing images before uploading, developers can ensure faster transfer speeds, making the process more seamless for users.

Secondly, uploading large images can strain server resources. This can lead to increased storage costs and slower response times for other users accessing the server. By utilizing image compression, developers not only enhance the user experience but also optimize server performance and efficiency.

So, understanding and implementing image compression is vital for any Flutter developer looking to improve their app's performance and user satisfaction, particularly in scenarios where image uploads are a common requirement.

Types of Image Conversion

When it comes to image compression, there are two main types: lossy compression and lossless compression. Each has its pros and cons, making them suitable for different situations.

Lossy Compression

Image Source

What it is: Lossy compression reduces image size by permanently removing some of the image’s data. It focuses on discarding details that are less noticeable to the human eye, making the file significantly smaller.

Impact on Quality: This approach often leads to a small reduction in image quality, which may or may not be visible depending on the level of compression used. Higher compression ratios (smaller file sizes) often result in more noticeable quality loss, like blurring or pixelation.

Best Use Cases: Ideal for photos or images with lots of colors and gradients, like user-uploaded images or social media photos. JPEG is a common format that uses lossy compression.

Lossless Compression

Image Source

What it is: Lossless compression reduces file size without removing any image data. It achieves smaller files by finding and compressing patterns within the image, but no data is lost, so you can fully restore the original image.

Impact on Quality: Since no data is discarded, image quality remains intact. However, lossless compression doesn’t reduce file size as dramatically as lossy compression, especially for complex images.

Best Use Cases: Suitable for graphics, icons, or images where high fidelity is crucial, like logos or text-heavy images. PNG and GIF formats often use lossless compression.

Choosing Between Lossy and Lossless

When Quality is Crucial: Use lossless compression to retain full detail, especially if users may zoom in or if the image contains text or important details.

When Reducing File Size is Key: Use lossy compression when you need a smaller file size and can afford slight quality loss, especially for thumbnails or images in feed views where high resolution isn't necessary.

In summary, the choice between lossy and lossless compression hinges on your specific needs: prioritize speed and smaller files with lossy compression, or opt for higher quality with lossless compression. Understanding these options will help you optimize image uploads in your Flutter app.

In this article, we'll focus more on lossy compression to achieve slight quality loss and smaller file sizes.

Original (974Kb)

Image Source
I have this original size file with 974Kb file size.

And then i do compression with 90% Quality.

90% Quality (318Kb)

With 90% quality we can achieve the compression rate at approximately 67.35% from 974Kb to 318Kb.

50% Quality (109Kb)

With 50% quality we can achieve the compression rate at approximately 88.81% from 974Kb to 109Kb.

10% Quality (55Kb)

With 10% quality we can achieve the compression rate at approximately 94.35% from 974Kb to 55Kb.

Based on the quality comparisons above, you can decide which compression level works best for your needs. If image quality is a priority (for product photos or detailed images), higher quality settings (e.g., 90 or above) should be used to maintain clarity, though they result in larger file sizes.

If file size is more important, such as for thumbnails or gallery images, lower quality settings (e.g., 50 or even 10) can be used to significantly reduce file size, though some visual degradation will occur. The choice depends on whether you prioritize visual fidelity or performance and size optimization.

Code Implementation

Here’s an example of a function to compress an image in Flutter using the flutter_image_compress package:

You only need these two packages:
Flutter Image Compress Package
Flutter Image Picker

Pick Image

import 'package:image_picker/image_picker.dart';

final ImagePicker picker = ImagePicker();
File? selectedImage;

Future<void> pickImage() async {
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        selectedImage = File(pickedFile.path);
      });
    }
  }

Compress Image

import 'package:path/path.dart' as path;
import 'package:flutter_image_compress/flutter_image_compress.dart';

Future<XFile> compressImageFile(
    {
      required File imageFile, 
      int quality = 80, 
      CompressFormat format = CompressFormat.jpeg
    }) async {

    DateTime time = DateTime.now();
    final String targetPath = path.join(
      Directory.systemTemp.path, 'imagetemp-${format.name}-$quality-${time.second}.${format.name}'
    );

    final XFile? compressedImageFile = await FlutterImageCompress.compressAndGetFile(
      imageFile.path,
      targetPath,
      quality: quality,
      format: format
    );

    if (compressedImageFile == null){
      throw ("Image compression failed! Please try again.");
    }
    debugPrint("Compressed image saved to: ${compressedImageFile.path}");
    return compressedImageFile;
  }

UI Example

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    if (selectedImage != null) 
      Image.file(
        selectedImage!
      ),
    TextButton(
      onPressed: () async {
        await pickImage();
      }, 
      child: const Text("Pick Image")
    ),

    ElevatedButton(
      onPressed: () {
        if (selectedImage != null) {
          compressImageFile(
            imageFile: selectedImage!,
            quality: 10
          );
        }
      }, 
      child: const Text("Compress")
    )
  ],
)

If you'd like to view the code for the sample usage app above, please visit:
Github

References:
www.dhiwise.com
www.adobe.com
cyberhoot.com

Flutter Scrolling Techniques: Using GlobalKey and Scrollable.ensureVisible() for Precise Navigation

Irfan Adisukma — Fri, 27 Sep 2024 09:27:02 +0000

In Flutter development, creating smooth and intuitive user experiences often involves guiding users to specific parts of the interface. One powerful technique to achieve this is programmatically scrolling to a particular widget. Whether it’s navigating to a section in a long form, focusing on a specific item in a list, or highlighting a new message in a chat, the ability to scroll to a specific widget enhances the overall usability and interactivity of an app.

Flutter provides several tools, such as GlobalKey, and Scrollable.ensureVisible(), that allow developers to precisely control scrolling behavior. By leveraging these tools, developers can ensure that important content is brought into view, reduce the need for excessive manual scrolling, and create more seamless navigation experiences. This not only helps in improving user engagement but also makes the application more accessible and efficient, especially for apps with complex layouts or dynamic content.

In this article, we’ll explore how to effectively scroll to a specific widget in Flutter using these techniques, ensuring that your app's navigation is as smooth and user-friendly as possible.

Understanding the Components

When building a Flutter app, having control over how users navigate through content is crucial for creating a smooth and engaging experience. To achieve precise scrolling behavior, three key components can be used: GlobalKey, and Scrollable.ensureVisible(). Let's dive deeper into each of these components and understand their roles.

GlobalKey: In Flutter, GlobalKey is a type of key that is used to uniquely identify a widget within the entire widget tree. It enables developers to access the widget's context, state, and position, which is essential when you need to perform actions such as scrolling to a particular widget or manipulating its state. By assigning a GlobalKey to a widget, you can easily reference it later in your code to trigger actions like scrolling, focusing, or even retrieving information about its dimensions and position. And it's compatible with all Flutter versions.
Scrollable.ensureVisible(): The Scrollable.ensureVisible() method is a utility function provided by Flutter that ensures a given widget is visible within its scrollable ancestor. When called, it automatically calculates the distance and direction to scroll in order to bring the target widget into view. This is particularly useful for creating smooth and automated scrolling effects, such as jumping to a specific section of a form, highlighting a newly added item in a list, or scrolling to a widget based on user actions (e.g., clicking a button). By combining Scrollable.ensureVisible() with GlobalKey, developers can programmatically control the visibility of widgets, enhancing navigation and user experience. This feature available and supported from Flutter 1.5.4 onwards. So make sure you are using latest version.

By understanding these two components— GlobalKey, and Scrollable.ensureVisible()—you can effectively implement advanced scrolling behaviors in your Flutter app, ensuring that users can easily navigate and interact with content in a seamless and intuitive way.

Creating the UI

To demonstrate, let's create a simple UI containing a list of items.

Step-by-Step Example
Here is a basic example of setting up:

ListView.builder(
 shrinkWrap: true,
 itemCount: 50,
 physics: const NeverScrollableScrollPhysics(),
 itemBuilder: (context, index) {
   return ListTile(title: Text("Item $index"));
 }
)

Now let's add GlobalKey to identify widgets

final GlobalKey _scrollKey = GlobalKey();

Assign this key to the widget within your ListView:

ListTile(
  key: _scrollKey,
  title: Text('Scroll to Me!'),
)

And the code should be like this with additional handling to override generated list item with the GlobalKey:

ListView.builder(
 shrinkWrap: true,
 itemCount: 50,
 physics: const NeverScrollableScrollPhysics(),
 itemBuilder: (context, index) {
   if (index == 25) {
     return ListTile(
      key: _scrollKey,
      title: Text("Scroll to Me!")
     );
   }
   return ListTile(title: Text("Item $index"));
 }
)

Now let's add ScrollC

Let's add one final touch by adding Button to trigger the scroll using Scrollable.ensureVisible():

void _scrollToTarget() {
  // Ensure the widget is built
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final context = _scrollKey.currentContext;
    if (context != null) {
      Scrollable.ensureVisible(
        context,
        duration: const Duration(seconds: 1), 
        curve: Curves.easeInOut);
      }
   });
 }

ListView(
 children: [
  ElevatedButton(
    onPressed: () async {
      _scrollToTarget();
    },
    child: const Text('Scroll to Widget'),
  ),
  ListView.builder(
    shrinkWrap: true,
    itemCount: 50,
    physics: const NeverScrollableScrollPhysics(),
    itemBuilder: (context, index) {
      if (index == 25) {
       return ListTile(
        key: _scrollKey,
        title: Text("Scroll to Me!")
       );
      }
      return ListTile(title: Text("Item $index"));
     }
   )
  ],
)

Here's the output!

How Scrollable.ensureVisible works?

The Scrollable.ensureVisible() method takes in the BuildContext of a widget and scrolls the nearest scrollable parent to make that widget fully visible.

When Scrollable.ensureVisible() is called, Flutter calculates the position of the widget represented by the context in its scrollable ancestor.
If the widget is already fully visible, no scrolling occurs. If not, the method scrolls the closest scrollable widget (like CustomScrollView, ListView, etc.) to bring the target widget into view.
The scrolling animation takes place over the specified duration and follows the provided curve, resulting in a smooth scroll to the target widget.

This is real example of how we implement this technique on Tentang Anak App, we have a feature section that must be highlighted and we help user to find this section by tapping the button, and it will automatically scroll to the specific section.

Additional Tips

When implementing scrolling to a specific widget in Flutter using GlobalKey, and Scrollable.ensureVisible(), it's essential to consider performance and handle potential edge cases to ensure a smooth and responsive user experience. Here are some additional tips to help you optimize your implementation:

Performance Considerations

When working with large lists or complex scrollable content, performance optimization is crucial. Here are some strategies to enhance scrolling and rendering performance:

Avoid Unnecessary Rebuilds: Ensure that widgets within your ListView do not rebuild unnecessarily. Use const constructors where possible, and consider using state management solutions like Provider or Riverpod to manage the state outside of the widget tree, avoiding frequent rebuilds.
Virtualization with ListView.builder and GridView.builder: If your use case involves scrolling a long list of items (e.g., 100+ items), consider using ListView.builder or GridView.builder instead of SliverList to optimize memory usage. These builders only render visible items and reuse widgets that move out of the viewport.
Throttle or Debounce User Actions: If you allow users to trigger scrolling actions frequently (e.g., tapping buttons to scroll to different items), consider throttling or debouncing these actions to prevent excessive animations and rendering.
Use the automaticKeepAlive property: For complex widgets that need to maintain their state while scrolling, consider using AutomaticKeepAlive widgets to manage their lifecycles better without unnecessarily keeping off-screen widgets alive.

Handling Edge Cases

Proper handling of edge cases ensures that your scroll functionality works reliably in all scenarios:

Ensure Widget Exists in the Viewport: Before calling Scrollable.ensureVisible(), ensure that the target widget is part of the scrollable content. If the widget is dynamically added or removed (e.g., in response to user actions), you need to verify that it is indeed within the scrollable ancestor when the method is called. Failing to do so can result in exceptions or unexpected behavior.
Handle Already Visible Widgets: If the widget is already fully visible in the viewport, Scrollable.ensureVisible() won’t trigger any scrolling. Make sure to handle such cases gracefully to avoid redundant animations or confusing the user.
Handle Partially Visible Widgets: Consider scenarios where the widget is only partially visible (e.g., cut off at the top or bottom of the viewport). Scrollable.ensureVisible() will scroll to bring it fully into view, but you might want to adjust the duration or curve for smoother transitions, especially if only a small amount of scrolling is needed.
Check for Nested Scroll Views: If you have nested scroll views, calling Scrollable.ensureVisible() may not work as expected if the target widget is inside a nested scroll view. Ensure that the method is called on the correct scrollable parent and that the widget’s context is properly obtained from the right GlobalKey.
Manage Focus and Accessibility: After scrolling to a widget, you may want to give it focus (e.g., for an input field) or announce it to assistive technologies. Use FocusScope.of(context).requestFocus() or Semantics to enhance accessibility and provide visual feedback.
Consider Scroll Offset Adjustments: Sometimes, you may want to scroll a bit past the widget or stop before it reaches the top or bottom of the viewport to provide some padding or context. You can use alignment or calculate offsets manually to achieve more precise positioning.

By considering these performance tips and handling edge cases, you can implement scrolling to specific widgets in a way that is both efficient and robust, ensuring a seamless and intuitive experience for your Flutter app users. This approach not only improves usability but also contributes to a polished, professional app that handles a variety of user interactions gracefully.

Conclusion

Scrolling to a specific widget in Flutter can significantly enhance the user experience by ensuring that important content is always visible and easily accessible.

In summary, using GlobalKey, and Scrollable.ensureVisible() together provides a powerful toolkit for creating responsive and user-friendly scrolling experiences in Flutter apps. This approach not only guides users through different sections of an app smoothly but also enhances the overall usability and accessibility, leading to a more polished and professional application.

See the full code
GitHub

Revenue Potential: Earn Money with Flutter and Google AdMob

Irfan Adisukma — Fri, 28 Jun 2024 15:47:34 +0000

Flutter, Google’s open-source UI toolkit, is widely used for creating natively compiled applications across mobile, web, and desktop platforms from a single codebase. By incorporating Google AdMob, you can effectively monetize these apps. This guide will walk you through the process.

Google AdMob is a robust mobile advertising platform developed by Google, specifically designed to help developers monetize their mobile applications through various ad formats. AdMob supports both Android and iOS platforms, making it versatile for developers targeting multiple mobile operating systems.

Key Features of Google AdMob:

Ad Formats: AdMob offers various ad formats including:

Banner Ads: These are rectangular ads that appear at the top or bottom of the screen. They are typically less intrusive and can be easily integrated into different parts of the app's layout.
Interstitial Ads: Full-screen ads that cover the interface of an app. They are often displayed at natural transition points within the app, such as between levels of a game or when switching content in a news app.
Rewarded Ads: Users can choose to watch these ads in exchange for in-app rewards, such as virtual currency or additional content. They provide a positive user experience by giving something valuable in return for their time.

Monetization Models: AdMob supports various monetization models:

Cost Per Click (CPC): Advertisers pay each time a user clicks on the ad.
Cost Per Thousand Impressions (CPM): Advertisers pay for every thousand times the ad is shown
Cost Per Acquisition (CPA): Advertisers pay when a specific action is completed, such as an app install or sign-up.

Targeting and Optimization:
AdMob provides advanced targeting options based on user demographics, interests, and behavior. This helps in delivering relevant ads to maximize engagement and revenue.
Integration and Reporting:
Integrating AdMob into a Flutter app involves adding the AdMob SDK to your project and configuring ad units. Google provides comprehensive reporting tools to track ad performance, impressions, clicks, and revenue generated.
Policy Compliance:
AdMob enforces strict policies to ensure a positive user experience and maintain advertiser trust. Developers must adhere to these policies regarding ad content, placement, and behavior within their apps.

Benefits of Using Google AdMob:

Revenue Generation: AdMob provides developers with a straightforward way to generate revenue from their apps through ads, without requiring direct payments from users.
Cross-Platform Support: AdMob supports both Android and iOS platforms, allowing developers to monetize their apps across different devices and operating systems.
Easy Integration: Integrating AdMob into Flutter apps is relatively simple with clear documentation and SDK support provided by Google.
Analytics and Optimization: Developers can use AdMob’s analytics tools to monitor ad performance and optimize their monetization strategy based on real-time data.
Global Reach: AdMob connects developers with a global network of advertisers, ensuring a wide range of ad inventory and opportunities for monetization.

By leveraging Google AdMob, Flutter developers can effectively monetize their applications while maintaining a positive user experience through relevant and engaging advertisements. It's essential for developers to understand AdMob’s capabilities and best practices to maximize their app’s revenue potential.

Add your application

Setup your application based on the available options

Fill the application name:

And now you have successfully add your application to AdMob

Create an Ad Unit:
Create a new app and generate an ad unit ID. You’ll use this ID to set up ads in your Flutter app.

Select the ad units that you want to address.

In this example, i choose Banner and name it Homepage Banner as i will show the ad on home page.

Now we have ad unit created.

Now, let's integrate our Flutter App with Google AdMob.

Integrating AdMob with Flutter
Add Dependencies:
Open your pubspec.yaml file and add the google_mobile_ads dependency:

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^1.0.0

Initialize AdMob

In your main.dart file, initialize AdMob:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ecommerce App'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

Load and Display Ads

In this article, I will provide examples of implementing AdMob for Banner Ads and Interstitials. For examples of other types of ads, you can read more here.

Banner ads are rectangular ads that occupy a portion of an app's layout. They stay on screen while users are interacting with the app, either anchored at the top or bottom of the screen or inline with content as the user scrolls. Banner ads can refresh automatically after a certain period of time.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  BannerAd? _bannerAd;

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: '<AD-UNIT-ID>',
      size: AdSize.banner,
      request: AdRequest(),
      listener: BannerAdListener(),
    )..load();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        if (_bannerAd != null)
          Container(
            alignment: Alignment.center,
            child: AdWidget(ad: _bannerAd!),
            width: _bannerAd!.size.width.toDouble(),
            height: _bannerAd!.size.height.toDouble(),
          ),
      ],
    );
  }
}

Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.

InterstitialAd? _interstitialAd;

void _createInterstitialAd() {
  InterstitialAd.load(
    adUnitId: '<AD-UNIT-ID>',
    request: AdRequest(),
    adLoadCallback: InterstitialAdLoadCallback(
      onAdLoaded: (ad) {
        _interstitialAd = ad;
      },
      onAdFailedToLoad: (err) {
        print('Failed to load an interstitial ad: ${err.message}');
      },
    ));
}

void _showInterstitialAd() {
  if (_interstitialAd != null) {
    _interstitialAd!.show();
  }
}

@override
void dispose() {
  _interstitialAd?.dispose();
  super.dispose();
}

Testing Your Ads
Before launching your app, ensure to test your ads using AdMob’s designated test ad units to confirm their proper display and ensure they do not detract from the user experience.

Release Your App
Once you have completed thorough testing and integrated ads seamlessly, you can proceed to publish your app on the Google Play Store and/or Apple App Store. Be sure to adhere to the specific guidelines for publishing on Google Play and the App Store.

Conclusion
Monetizing your Flutter app through Google AdMob offers a lucrative opportunity to generate income from your efforts. By adhering to the outlined steps, you can effortlessly incorporate ads into your app, ensuring a consistent revenue stream while delivering value to your users. It's essential to follow best practices and Google's guidelines to maintain a positive user experience and optimize your earnings.

Creating a Context-Free Navigation Function in Flutter

Irfan Adisukma — Fri, 28 Jun 2024 15:41:27 +0000

Navigating between screens is a fundamental aspect of mobile app development in Flutter. Typically, navigation relies on the BuildContext to move from one screen to another, but this can become cumbersome in complex applications.

When navigation needs to be triggered from non-widget classes, such as services or view models, accessing BuildContext can lead to tightly coupled and less maintainable code. As your app grows, managing navigation through context can clutter the codebase and make it harder to maintain, especially for background tasks or services that require navigation.

A context-free navigation approach offers a clean and efficient solution by decoupling navigation logic from the BuildContext, allowing greater flexibility and control over your app’s navigation flow. While the go_router package is a powerful tool that provides a declarative approach to routing and deep linking, it still typically requires BuildContext for navigation actions.

In this article, we'll explore how to implement a basic global navigation system in Flutter by setting up a global navigator key and creating a dedicated navigation service. This method not only serves as a context-free navigation solution but also functions as a global context, simplifying the navigation process and enabling you to initiate navigation commands from anywhere in your app. By the end of this guide, you'll have a streamlined navigation architecture that enhances your development workflow and improves your app’s user experience. Let's dive in and transform the way you handle navigation in your Flutter projects.

🚨 The Problem with Context-Dependent Navigation: 🚨
Discuss common issues developers face with context-dependent navigation, such as:

Difficulty navigating from non-widget classes or services.
Complicated navigation flows where passing context around becomes cumbersome.
Situations where context is not immediately available, leading to convoluted code.

❇️ The Solution: Context-Free Navigation:
Introduce the concept of context-free navigation and its advantages:

Simplifies navigation logic.
Enhances code readability and maintainability.
Enables navigation from any part of the app, including services, controllers, or background tasks.

Many of you might be using various packages for handling navigation in Flutter apps, such as go_router and get. These packages are powerful tools that help manage navigation efficiently. However, in this article, we will explore how to optimize Flutter's built-in navigation capabilities without relying on third-party plugins. This approach not only streamlines your app but also deepens your understanding of how Flutter's navigation system works.

Let's take a look the flutter basic navigation,

The examples above are powerful and sufficient for basic navigation. However, they are only applicable when navigating from a class or widget that has a BuildContext. There will be cases where you need to navigate from a controller that does not have a BuildContext. While it's possible to pass the BuildContext through functions, this approach can be cumbersome and require additional effort.

🚀 So, let's start creating our own context-free navigation function.



class NavigationService {
  static final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
}

We'll create a class named NavigationService,

This GlobalKey is used to get a reference to the NavigatorState of the application. By using a global key, you can access the navigator from anywhere in your app.

Now let's add the functions into the NavigationService class.

push



Future<T?> push<T extends Object?>(Route<T> route) async {
  return navigatorKey.currentState?.push<T>(route);
}

This method pushes a new route onto the navigator using a Route object. and route is the new route to push.

pushNamed



Future<T?> pushNamed<T extends Object?>(
  String routeName, {
  Object? arguments,
}) async {
  return navigatorKey.currentState?.pushNamed<T>(
    routeName,
    arguments: arguments,
  );
}

This method pushes a new route onto the navigator using a named route.

routeName is the name of the route.
arguments is an optional parameter that allows passing data to the new route.

pushReplacementNamed



Future<T?> pushReplacementNamed<T extends Object?, TO extends Object?>(
  String routeName, {
  Object? arguments,
  TO? result,
}) async {
  return navigatorKey.currentState?.pushReplacementNamed<T, TO>(
    routeName,
    arguments: arguments,
    result: result,
  );
}

This method replaces the current route with a new route using a named route.

routeName is the name of the new route.
arguments is an optional parameter to pass data to the new route.
result is an optional parameter to return a result to the previous route.

pushNamedAndRemoveUntil



Future<T?> pushNamedAndRemoveUntil<T extends Object?>(
  String routeName, {
  Object? arguments,
  bool Function(Route<dynamic>)? predicate,
}) async {
  return navigatorKey.currentState?.pushNamedAndRemoveUntil<T>(
    routeName,
    predicate ?? (_) => false,
    arguments: arguments,
  );
}

This method pushes a new route and removes all previous routes until the predicate returns true.

routeName is the name of the new route.
arguments is an optional parameter to pass data to the new route.
predicate is a function that determines which routes to remove. If not provided, all previous routes are removed.

popUntil



void popUntil(String route) {
  navigatorKey.currentState?.popUntil(ModalRoute.withName(route));
}

This method pops routes off the navigator until the specified route is reached.

route is the name of the route to pop until.

goBack



void goBack<T extends Object?>({T? result}) {
  navigatorKey.currentState?.pop<T>(result);
}

This method pops the current route off the navigator.

result is an optional parameter to pass a result to the previous route.

The functions above are navigation functions commonly used in Flutter apps.
Now let's add one more step, ☝🏻

Go to your MaterialApp and attach the NavigationService navigatorKey.



void main() {
  runApp(
    MaterialApp(
      navigatorKey: NavigationService.navigatorKey,
      home: HomePage(),
    ),
  );
}

Now you can then use the NavigationService to perform navigation from anywhere in your app, without needing a BuildContext:

Here's the usage



NavigationService().pushNamed('/secondPage');



NavigationService().push(
 MaterialPageRoute(builder: (context) => AnotherScreen()),
);

🕝 Before Context-Free Navigation



Navigator.push(
  context, 
  MaterialPageRoute(
    builder: (builder) => const LoginPage()
  )
);

Navigator.pushNamed(
 context, '/foo', arguments: someObject
)

✅ After



NavigationService().push(
 MaterialPageRoute(builder: (context) => AnotherScreen()),
);

NavigationService().pushNamed('/secondPage', arguments: someObject);

Now you're no longer need to pass BuildContext when navigating.

Conclusion

The NavigationService class provides a set of utility methods to handle navigation in a Flutter application without requiring direct access to a BuildContext. This is achieved using a global NavigatorState key. Below are the key functionalities provided by the class:

Global Navigation Key:

navigatorKey: A global key to access the navigator state.

Navigation Methods:

pushNamed: Navigates to a named route with optional arguments.
push: Pushes a route onto the navigator stack.
pushReplacementNamed: Replaces the current route with a named route.
pushNamedAndRemoveUntil: Pushes a named route and removes routes until the predicate returns true.
pushAndRemoveUntil: Pushes a route and removes routes until the predicate returns true.
goBack: Pops the top-most route off the navigator.
popUntil: Pops routes until the specified route is reached

Key Points:

Context-Free Navigation: Allows navigation operations without needing the BuildContext, useful for scenarios where the context isn't available.
Utility Methods: Provides comprehensive navigation methods, covering various use-cases such as pushing, replacing, and popping routes.
Global Accessibility: The global navigator key makes the navigator state accessible throughout the app, facilitating easy and centralized navigation handling.

By using NavigationService, developers can simplify and streamline navigation in their Flutter applications, especially in situations where direct access to the context is challenging. And by creating our own navigation, we can reduce the dependency on public plugins or packages, which may not be maintained by the publisher.

✅ That's all!

I hope you find this guide useful and that it enhances your application! Thank you for reading, and happy coding!

Full Code:
GitHub

Cost-Effective Image Management: Maximizing Efficiency Through Network Image Caching in Mobile Apps

Irfan Adisukma — Tue, 11 Jun 2024 03:02:51 +0000

In today's mobile app landscape, user experience is paramount, with performance and cost efficiency playing pivotal roles in app success. One often-overlooked aspect that significantly impacts both these factors is the management of images. Incorporating image caching strategies can not only enhance app performance by reducing load times but also contribute to significant cost savings in data usage and server resources.

In this article, we delve into the benefits of caching network images in mobile app development, exploring how this optimization technique can positively influence both user satisfaction and the bottom line.

Mobile apps can utilize various caching techniques to enhance performance and reduce load times. Here are some common caching methods:

Web Caching: This technique involves storing static content, like images and JavaScript files, in the browser’s cache. By doing so, it significantly reduces the time required for an app to load, as these resources do not need to be repeatedly fetched from the server.

Data Caching: This approach stores frequently accessed data, such as user profiles or product catalogs, locally on the device. It minimizes the need for constant database queries, thereby speeding up data retrieval and enhancing the app’s responsiveness.

Application Caching: This method caches data generated by the app itself, such as the results of computations or rendered views. It is particularly beneficial for apps that perform intensive calculations or render complex interfaces, as it reduces processing time and improves overall performance.

Several advanced caching strategies can further enhance the performance of mobile apps. These advanced methods include:

Cache-Aside: This strategy involves storing data in both the cache and the database. When the app needs to access a specific piece of data, it first checks the cache. If the data is not found there, the app queries the database and then stores the retrieved data in the cache for future access. This approach reduces the number of database queries, thereby improving performance.
Cache Invalidation: To ensure that the cache always contains the most up-to-date data, this strategy invalidates the cache whenever data in the database is updated. When the next request for this data is made, it is fetched directly from the database and the cache is updated accordingly. This method helps prevent stale data from being served to users.
Distributed Caching: This strategy involves storing cached data in multiple locations, such as across different servers or in the cloud. By distributing the cache, the load on any single server is reduced, which enhances performance and reliability, particularly in high-traffic scenarios.

The optimal caching strategy for a specific mobile app depends on the app’s unique requirements. However, by implementing advanced caching techniques, mobile app developers can greatly enhance their app’s performance.

Why is it important to cache images?

The screenshot above shows detailed network image requests from CloudFront. It is evident that these static image objects have tens of thousands of requests, with a total bandwidth usage exceeding 1GB.

This scenario represents cost inefficiency, as these images could be stored directly within the application files. However, storing images within the application increases its download and installed size, which can be a concern for users who are sensitive to app size.

Storing images on the server and making the app request them introduces new challenges, including increased loading times and high bandwidth usage, as illustrated in the image above.

By implementing a caching strategy, we can reduce network requests, which in turn helps lower costs such as:

Cost Inefficiency of Network Requests
The image illustrates a high number of requests and significant bandwidth usage for static images. When these images are repeatedly requested from the server, it not only increases the load on the server but also results in higher operational costs due to the increased data transfer

Impact of Embedding Images in the App
One potential solution to avoid network requests is embedding these images directly in the app. However, this leads to a substantial increase in the app's size, affecting both the download size and the installed footprint. This can be a significant drawback for users with limited storage or data plans, potentially leading to reduced app adoption.

Challenges with Server-Stored Images
When images are stored on a server and the app fetches them dynamically, it introduces several issues:

Loading Time: Every time an image is requested, the app must wait for the server response, which can lead to delays in image rendering, affecting user experience.
High Bandwidth Usage: As shown in the CloudFront data, frequent requests for images consume a large amount of bandwidth, increasing operational costs.

Benefits of Implementing Caching Strategy
Implementing a caching strategy can mitigate these issues effectively:

Reduced Network Requests: By caching images locally on the user's device after the first download, subsequent requests for the same images can be served from the local cache, significantly reducing the number of server requests.
Cost Reduction: With fewer network requests, there is less data transfer, leading to lower bandwidth costs.
Improved User Experience: Cached images load faster since they are served from local storage rather than fetched from a remote server, resulting in a smoother and more responsive app experience.

We only need these two plugins;

Many of us are already familiar with those packages, as it is a popular choice for displaying images in Flutter applications that implement caching strategies.

Cached Network Image is a flutter library to show images from the internet and keep them in the cache directory.



CachedNetworkImage(
  imageUrl: src,
  fit: fit,
  height: height,
  width: width
)

This is a common use case for CachedNetworkImage, where cached network images are stored and retrieved using the flutter_cache_manager.

Now, we can customize this widget by adding a CacheManager to manage its configuration.



CachedNetworkImage(
  imageUrl: src,
  fit: fit,
  height: height,
  width: width,
  cacheManager: CacheManager( // Cache Manager Config
    Config(
      src,
      stalePeriod: const Duration(hours: 1),
    ),
  ),
)

The configuration object specifies the source URL (src) and the stale period (stalePeriod) for the cached image. This allows for more precise control over how images are cached, ensuring that the app retrieves the most up-to-date images when needed while still benefiting from the performance enhancements of caching.

In this case, the stale period is set to 1 hour, meaning that the image will be considered stale and fetched from the network after 1 hour.

Here's an explanation of how CacheNetworkManager and CacheManager work:

CacheNetworkImage is a widget used to display an image from a URL source in the Flutter app UI.
When CacheNetworkImage is requested to display an image from a specific URL, it asks for the image from CacheManager.
CacheManager is a package used to manage image caching in the Flutter app.
CacheManager checks if the requested image is available in the local cache or not.
If the image is available in the cache, CacheManager returns the image from the cache to CacheNetworkImage.
If the image is not available in the cache, CacheManager downloads the image from the requested URL and stores it in the local cache.
After downloading and storing the image in the cache, CacheManager returns the image to CacheNetworkImage.
CacheNetworkImage then displays the received image from CacheManager in the Flutter app UI.

By using CacheNetworkImage and CacheManager, the Flutter app can display images from URLs efficiently by utilizing the local cache. This helps reduce bandwidth and image loading time, especially if the same image is requested repeatedly. Also offers several benefits for application performance, network efficiency, and cost-effective bandwidth usage:

Performance Improvement
By caching images locally on the device, CachedNetworkImage reduces the time it takes to load images after the first download. This leads to faster image rendering and a smoother user experience, especially when the same images are used repeatedly within the app.

Network Efficiency
With a CacheManager configured, the app can manage how often it fetches images from the network. The stalePeriod parameter ensures that images are only re-downloaded after a specified period, minimizing unnecessary network requests. This reduces the load on the server and helps prevent network congestion.

Cost-Effective Bandwidth Usage
Reducing the number of image downloads translates directly into lower data usage. For users on metered connections, this means less data consumption and potential cost savings. For the app provider, it means reduced bandwidth costs, as fewer network requests are made to fetch the same resources.

Implementing a caching strategy for static images is a cost-effective solution that balances the need for a smaller app size with the demand for quick and efficient image loading. This approach not only reduces operational costs but also enhances the overall user experience by decreasing load times and conserving bandwidth.

The Importance of Analytics in Mobile Application 📊

Irfan Adisukma — Wed, 08 May 2024 03:28:36 +0000

In the modern age of technology, mobile applications play a central role in our daily lives, offering a wide range of functionalities from entertainment to productivity. The development and optimization of mobile apps involve intricate processes, and analytics plays a vital role in ensuring the success and longevity of such projects. By collecting and analyzing data, mobile app development companies gain valuable insights into user behavior, preferences, and trends, allowing them to make informed decisions and improve user experiences.

Why is it important?🤔
Analytics is a critical component of mobile app development, enabling developers and organizations to gather valuable insights into the usage and performance of their apps. Here's a simplified breakdown of the subject:

Definition and Scope of Analytics in Mobile App -Development

Analytics in mobile app development involves the collection, measurement, and analysis of data related to app usage and user behavior.
It helps developers understand how users interact with the app, identify strengths and weaknesses, and make informed decisions for enhancements.
The scope of mobile app analytics covers tracking user actions, app performance, and user experience to optimize functionality and success.

To achieve the scope of mobile app analytics in tracking user actions, app performance, and user experience to optimize functionality and success, the types of data collected include:

Types of Data Collected in Mobile Apps

User Engagement Data: Includes metrics like downloads, active users, session duration, and retention rates.
User Behavior Data: Tracks actions such as clicks, taps, swipes, and interactions with specific features.
Device and Technical Data: Provides insights into devices, operating systems, and app versions to address compatibility issues.
Crash and Error Reports: Assist in identifying and resolving bugs and technical issues affecting app stability.

The various types of data collected in mobile apps, including user engagement data, user behavior data, device and technical data, and crash and error reports, play a crucial role in the importance of analytics for improving user experience and app performance.

Importance of Analytics in Improving User Experience and App Performance

Data-driven Decision-Making: Analytics empowers developers to make decisions based on data rather than assumptions.
Enhancing User Experience: Understanding user behavior helps optimize layouts, features, and content for a smoother user experience.
Bug Fixing and Stability: Analytics aid in identifying and fixing crashes and errors, resulting in a more stable app.
Personalization: Data insights enable personalized app experiences tailored to individual user preferences.

To effectively leverage analytics for improving user experience and app performance, mobile app developers rely on key metrics and analytics tools that provide insights into critical areas such as user conversion, churn, retention, and engagement

Key Metrics and Analytics Tools Used in Mobile App Development

Key Metrics:

Conversion Rate: Percentage of users completing a specific desired action.
Churn Rate: Percentage of users discontinuing app usage over time.
Retention Rate: Percentage of users continuing app usage after the initial interaction.
Average Session Length: Average time spent by users in the app during a session.

Analytics Tools:

Firebase Analytics: Provides real-time app usage data and integrates with other Firebase features.
Clevertap: CleverTap is a comprehensive mobile marketing platform that provides advanced analytics and engagement tools to help businesses better understand and engage with their mobile app users

In Tentang Anak, we mainly use these analytics tools to obtain more detailed data. Here is some example:

Firebase Analytics Here's some example of the overview data from Firebase Analytics.

This screenshot provides an overview of user activity and analytics data from the Firebase platform for a mobile app. Here's an explanation of the different sections:

User activity over time:

This graph shows the user activity trend over time for different time periods (30 days, 7 days, and 1 day).
The blue line represents the user activity for the last 30 days, and the purple lines represent the 7-day and 1-day user activity trends.

The graph helps visualize fluctuations in user activity and identify any significant spikes or dips during the given time frame.

Users in Last 30 Minutes:

This section provides real-time data on active users within the last 30 minutes. The bar chart displays the number of users per minute, allowing you to monitor current user activity levels.

Below the chart, there is a list of top countries where users are located, along with the corresponding user counts (which have been blurred for confidentiality).

Users by App Version:

This graph shows the distribution of users across different app versions. The blue line represents the user count for a specific app version (e.g., 2.19.2 on April 21st).

The graph helps track user migration to newer app versions and identify potential issues or adoption rates for each version.
The "View app versions" link likely provides more detailed information about app versions.

Please note that some values, such as user counts and specific country names, have been blurred due to confidentiality and privacy concerns. However, the overall structure and information presented in the overview remain visible.

This Firebase overview provides valuable insights into user activity patterns, real-time user engagement, geographical distribution, and app version adoption. It can help developers and product teams monitor app performance, identify areas for improvement, and make data-driven decisions regarding feature releases, user acquisition, and overall app strategy.

Clevertap

Here's some example of the overview data from Clevertap.

We have an event named 'Event_Name', which is triggered when a user taps on one our interaction.

Let's take an example from March 24th to April 23rd, this event was recorded 1,700 times.

From these 1,700 events, we can break down the data further. Out of the 1,700 events, there were 1,060 unique users
1,053 of these users were using mobile devices, while 7 were using tablets.
Among the 1,060 users, the highest percentage (7%) performed the event between 8:00 PM and 9:00 PM.
Additionally, 31% of the users triggered the event more than once.

This overview data provides insights into the usage of the our feature, including the number of events, unique users, device types, peak usage hours, and the frequency of usage by individual users.

In addition to data, we can also obtain user activity behavior if we use analytics. Here's an example of an overview of user activity data on Clevertap:

The data shows details about user activity captured by the analytics platform. It provides two key metrics related to user behavior:

Avg. visit duration is an hour:
This metric indicates that, on average, users spend approximately one hour per visit or session within the app. The "visit duration" or "session length" refers to the total time a user spends actively engaged with the app during a single visit or session before exiting or switching to another app.

Avg. time between visits is 4 hours:
This metric represents the average time gap between consecutive visits or sessions by the same user. It suggests that, on average, users return to the app and start a new session approximately every 4 hours.

These two metrics provide valuable insights into user engagement patterns and can help understand how frequently users are interacting with the app and for how long they typically stay engaged during each visit or session.
Such information can be useful for various purposes, including:

User retention analysis: Understanding visit frequency and duration can help assess user retention and identify potential churn risks.
User experience optimization: If the average visit duration is shorter than expected, it may indicate opportunities to improve the user experience or introduce features that encourage longer engagement.
Content and feature planning: The average time between visits can inform decisions about the ideal frequency for releasing new content or features to align with user behavior patterns.
Resource allocation: These metrics can help optimize resource allocation, such as server capacity or push notification scheduling, based on anticipated user activity patterns.

Overall, these user activity details provide quantitative data to support data-driven decision-making and continuous improvement efforts within the app development and product management processes.

Now let's deep dive into the user interaction overview:

The data represents an overview of user activity events tracked by Clevertap analytics platform. Here's an explanation of each event and a conclusion:

Notification Clicked (82 times): This event is triggered when a user clicks on a push notification sent by the app. It occurred 82 times within the specified date range.
Push Impressions (80 times): This event records the number of times a push notification was displayed or viewed by users, which happened 80 times.
Identity Set (1 time): This event is likely related to user identification or authentication within the app, which occurred once.
App Version Changed (25 times): This event tracks when a user updates to a new version of the app, which happened 25 times.
Reachable By (101 times): This event could be related to tracking user devices or channels through which users can be reached, such as push notifications or in-app messages, which occurred 101 times.
Session Concluded (191 times): This event is triggered when a user ends or exits an active session within the app, which happened 191 times.
Enter HomePage Commerce (26 times): This event is likely related to users accessing the homepage or a specific section of the app related to commerce or e-commerce features, which occurred 26 times.
Product Viewed (1 time): This event tracks when a user views a product page or details within the app, which happened once.

Additionally, the data shows the timestamp, event properties (like app version, device type), and other contextual information for some of the events.

The user activity overview provided by Clevertap analytics offers valuable insights into various user interactions and behaviors within the app. It tracks crucial events such as push notification engagement, user sessions, navigation patterns, product interactions, and version updates. This data can help developers and product teams identify areas for improvement, optimize user experiences, and make informed decisions based on real user data.

"Without data, you're just another person with an opinion." - W. Edwards Deming

CONCLUSION

With all of these, we can draw conclusions about the importance of mobile app analytics for applications. Here are some of the benefits we can derive:

1. Personalization Enhancement 👍🏻
Mobile app analytics facilitate tailoring mobile applications to individual user preferences and behaviors, thereby enhancing user experiences.

2. Insightful Data Provision 💡
By leveraging mobile app analytics, businesses gain access to insightful, data-driven information, empowering them to make informed decisions and optimize app functionalities.

3. Accurate Data Aggregation 🎯
Mobile app analytics ensure the collection of accurate and relevant data, enabling businesses to understand user interactions, preferences, and trends with precision.

4. Enhanced ROI and Performance 💰🔄
Through mobile app analytics, businesses can track key performance metrics, optimize marketing strategies, and ultimately drive higher returns on investment (ROI) by improving app performance and user engagement.

In conclusion, the significance of mobile app analytics cannot be overstated. It serves as the cornerstone for optimizing user experiences, enhancing app performance, and driving business success in the competitive digital landscape. By leveraging data-driven insights, businesses can tailor their apps to meet user preferences, increase engagement, and ultimately achieve higher returns on investment.

Leave a comment, and share if you found this article helpful, as spreading awareness about the power of mobile app analytics can benefit both developers and users alike. 💻

References: