How to save network images to the device in Flutter

This article shows you how to save network images to the device’s storage when using a Flutter application.

To send HTTP requests and work with the device’s filesystem better, we need 3 plugins:Advertisements

• path_provider: Used to find commonly used locations on the filesystem.
• path: Used to manipulate path (e.g. joining, splitting, normalizing),
• http: Used to making HTTP requests

We also need to import dart:io to handle files.

Install Plugins

1. Add http, path, and path_provider to the dependencies section in your pubspec.yaml file, like this:

dependencies: 
  flutter:
    sdk: flutter
  path: ^1.8.1
  path_provider: ^2.0.9
  http: ^0.13.4

Note that the indentation is mandatory.

Advertisements2. Run the following command:

flutter pub get

3. Import the plugins into your Dart code:

import 'package:path_provider/path_provider.dart' as pathProvider;
import 'package:path/path.dart' as path;
import 'package:http/http.dart' as http;

Example

App Preview

We’ll make a tiny Flutter app that contains a button. When the user presses that button, the app starts downloading an image from the internet. After that process is done, the saved image will show up on the screen.Advertisements

The Code

This is the function that will download the image from a given URL:

Future<void> _download(String url) async {
    final response = await http.get(Uri.parse(url));

    // Get the image name
    final imageName = path.basename(url);
    // Get the document directory path
    final appDir = await path_provider.getApplicationDocumentsDirectory();

    // This is the saved image path
    // You can use it to display the saved image later
    final localPath = path.join(appDir.path, imageName);

    // Downloading
    final imageFile = File(localPath);
    await imageFile.writeAsBytes(response.bodyBytes);
}

The full source code (with explanations):

// main.dart
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart' as path_provider;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // After downloading, we'll display the downloaded image
  File? _displayImage;

  final String _url =
      'https://www.kindacode.com/wp-content/uploads/2022/02/orange.jpeg';
      
  Future<void> _download() async {
    final response = await http.get(Uri.parse(_url));

    // Get the image name
    final imageName = path.basename(_url);
    // Get the document directory path
    final appDir = await path_provider.getApplicationDocumentsDirectory();

    // This is the saved image path
    // You can use it to display the saved image later
    final localPath = path.join(appDir.path, imageName);

    // Downloading
    final imageFile = File(localPath);
    await imageFile.writeAsBytes(response.bodyBytes);

    setState(() {
      _displayImage = imageFile;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(25),
          child: Column(
            children: [
              ElevatedButton(
                  onPressed: _download, child: const Text('Download Image')),
              const SizedBox(height: 25),
              _displayImage != null ? Image.file(_displayImage!) : Container()
            ],
          ),
        ),
      ),
    );
  }
}

Afterword

We’ve examined a small but meaningful example that demonstrates how to download network images to the local device. If you’d like to explore more new and fascinating stuff about Flutter and modern mobile development, take a look at the following articles:

• Flutter: Caching Network Images for Big Performance gains
• Flutter image loading builder example
• Flutter: Reading Bytes from a Network Image
• Flutter: How to place Text over an Image
• How to implement an image picker in Flutter

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.