How to Use Cached Network Image in Flutter with GetX.

Using cached_network_image in Flutter with GetX: Optimize Image Loading with Caching

The cached_network_image package allows Flutter apps to efficiently load and cache images from the web. In this tutorial, we’ll integrate it with GetX for state management to streamline image loading and cache control.

---

Prerequisites

1. Flutter SDK: Ensure that you have Flutter installed.
2. GetX Package: We’ll use the get package for state management.
3. cached_network_image Package: Add this to your pubspec.yaml file.

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  cached_network_image: ^3.2.1

Run flutter pub get to install the dependencies.

---

Step 1: Creating the Image Controller

We’ll set up a ImageController to handle image URL states using GetX.

image_controller.dart

 import 'package:get/get.dart';
 class ImageController extends GetxController {
  // This holds the URL of the image
  var imageUrl = 'https://via.placeholder.com/150'.obs;
 
  // Method to change the image URL
  void changeImageUrl(String newUrl) {
    imageUrl.value = newUrl;
   }
 }

In this controller:

• imageUrl: Tracks the image URL as an observable variable.
• changeImageUrl: Allows changing the image URL dynamically.

---

Step 2: Setting up the View

The view will display the cached image and allow the user to change the image URL using a button or text input.

image_view.dart

 import 'package:flutter/material.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:get/get.dart';
 import 'image_controller.dart';
 
 class ImageView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cached Network Image Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Image displayed using CachedNetworkImage
            Obx(() {
              return CachedNetworkImage(
                imageUrl: controller.imageUrl.value,
                placeholder: (context, url) => const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
              );
            }),
            const SizedBox(height: 20),
            // Button to change the image URL
            ElevatedButton(
              onPressed: () {
                // Change to another image URL
                controller.changeImageUrl('https://via.placeholder.com/300');
              },
              child: const Text('Load New Image'),
             ),
           ],
         ),
       ),
     );
   }
 }

In this view:

• Obx: Watches the image URL and updates the image whenever it changes.
• CachedNetworkImage: Displays the image and caches it.
• ElevatedButton: Allows users to load a new image by changing the URL in the controller.

---

Step 3: Setting up the Binding

The binding class ensures the ImageController is injected into the view.

image_binding.dart

 import 'package:get/get.dart';
i mport 'image_controller.dart';
 
class ImageBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => ImageController());
   }
 }

---

Step 4: Running the App

Finally, configure the routing and binding in your main.dart.

main.dart

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'image_view.dart';
 import 'image_binding.dart';
 
 void main() {
  runApp(MyApp());
 }
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => ImageView(),
          binding: ImageBinding(),
        ),
      ],
      title: 'Cached Network Image Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
       ),
     );
   }
 }

Wrapping Up

In this guide, we’ve demonstrated:

1. Loading images efficiently using cached_network_image.
2. State management with GetX, allowing the dynamic loading and caching of images.
3. Using GetX Bindings to efficiently manage controller dependencies.

By following this tutorial, you now have a complete setup for using cached_network_image with GetX in Flutter. You can further extend this by loading multiple images, managing error states, and customizing the placeholders and error widgets.