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
- Flutter SDK: Ensure that you have Flutter installed.
- GetX Package: We’ll use the
get
package for state management. - 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:
- Loading images efficiently using
cached_network_image
. - State management with GetX, allowing the dynamic loading and caching of images.
- 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.
0 Comments
Please Do Not Comments Any Span Or Span link..