Flutter: Network to Local File (Image, Audio, Video)

Recently I was working on a client\’s project where I needed to build a chat app. Now in the app, we have text, images, audios and videos. For text and images, I found ways where I can make them available locally and play from local directory (for image I used Network to File Image). When it came to audio and video files, I could not find any package. So now what? Let\’s build one.

In this post I would just share the repository of the package, but perhaps in another article, I would explain how it is implemented and make a package of it.

Repository Link

Here is the repository: Network to Local File

Sample Code

Here is an example on how you can use it:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[

//Image
    NetworkToLocal(
      mediaURL: \'https://smart-y.fra1.digitaloceanspaces.com/ChatMedia/84050157-ef7c-47a9-84f8-45b13584f747.jpg\',
      mediaType: \'image\',
    ),

//Audio
    NetworkToLocal(
      mediaURL: \'https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3\',
      mediaType: \'audio\'
    ),

//Video
    Expanded(
      child: NetworkToLocal(
        mediaURL: \'https://assets.mixkit.co/videos/preview/mixkit-forest-stream-in-the-sunlight-529-large.mp4\',
        mediaType: \'video\'
      ),
    ),
  ],
),

Thank you.


Posted

in

,

by

Comments

6 responses to “Flutter: Network to Local File (Image, Audio, Video)”

  1. Sanjeev Avatar
    Sanjeev

    How to import this package into our flutter project. I mean package name in pubspec and import it in .dart file

    1. ghulamustafa Avatar

      Unfortunately this library is not available on https://pub.dev. You have to manually import the files to your project.

      1. ghulamustafa Avatar

        You have to create the files in your project they way this library has created.

  2. sanjeev.A.V Avatar
    sanjeev.A.V

    Can I get full instructions on how to import it into my project?

  3. […] I have the image shown using network to local file […]

    1. ghulamustafa Avatar

      You can work on the same way a normal widget will have the Hero applied.
      There will be a List of images screen and a detail screen. Both will have the Hero widgets. You will wrap the NetworkToLocalFile widget on the List of Images screen in a navigator. You can then navigate to the the Detail screen. You can see more about how to work with Hero class here: https://api.flutter.dev/flutter/widgets/Hero-class.html

Leave a Reply

Your email address will not be published. Required fields are marked *