flutter with firebase - detect the url string whether it is image(jpg) or video(avi)

Question

I'm beginner with these Google's products and got 'serious' problem.

I uploaded photos and videos to firebase storage and urls of the photos and videos in the firebase storage is generated and stored automatically in firebase database. In my flutter lib, I could call those urls by my own code and display the url's image on the avd screen.

Image.network(url) is the code to display image url from firebase. But I also wanna display video url's asset simultaneously with single code. That is, videos and photos should be in single screen! In this case, Image.network(url) doesn't work anymore..

If I change that image.network code for video format according to video_player plug-in, I cannot display image asset anymore and if I stay same with that Image.network(url) code, I cannot display video url from firebase. So here is the question:

How can I detect whether the firebase's url string is image or video with my flutter code, and display that asset on the 'single screen' whatever the file format is(at least video and photo) with integrated flutter code?

url example

Answer 1

Improving upon the accepted answer, here is what I have in my code. I needed a way to identify many types of videos and images from the passed url.

• Using path package to idetify the extension
• Have a list of video and image extension

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


enum UrlType { IMAGE, VIDEO, UNKNOWN }

class UrlTypeHelper {
  static List<String> _image_types = [
    'jpg',
    'jpeg',
    'jfif',
    'pjpeg',
    'pjp',
    'png',
    'svg',
    'gif',
    'apng',
    'webp',
    'avif'
  ];

  static List<String> _video_types = [
    "3g2",
    "3gp",
    "aaf",
    "asf",
    "avchd",
    "avi",
    "drc",
    "flv",
    "m2v",
    "m3u8",
    "m4p",
    "m4v",
    "mkv",
    "mng",
    "mov",
    "mp2",
    "mp4",
    "mpe",
    "mpeg",
    "mpg",
    "mpv",
    "mxf",
    "nsv",
    "ogg",
    "ogv",
    "qt",
    "rm",
    "rmvb",
    "roq",
    "svi",
    "vob",
    "webm",
    "wmv",
    "yuv"
  ];

  static UrlType getType(url) {
    try {
      Uri uri = Uri.parse(url);
      String extension = p.extension(uri.path).toLowerCase();
      if (extension.isEmpty) {
        return UrlType.UNKNOWN;
      }

      extension = extension.split('.').last;
      if (_image_types.contains(extension)) {
        return UrlType.IMAGE;
      } else if (_video_types.contains(extension)) {
        return UrlType.VIDEO;
      }
    } catch (e) {
      return UrlType.UNKNOWN;
    }
    return UrlType.UNKNOWN;
  }
}


/// Usage
if(UrlTypeHelper.getType(message) == UrlType.IMAGE) {
  /// handle image
}
else if(UrlTypeHelper.getType(message) == UrlType.VIDEO) {
  /// handle video
}

Answer 2

Let me give you an idea.
Consider implementing this scenario.

var url = 'domain.com/file.jpg?querySegment';

In your widget area,

child: url.contains('.mp4?') ? VideoWidget() : ImageWidget()                 

also, even with multiple conditions,

 child: (url.contains('.jpg?') || url.contains('.png?')) ? ImageWidget() : VideoWidget()                

May this suits your case.

Answer 3

It's not much of a deal since type of the media is in the URL. You can parse it as a Uri object then extract the type.

import 'dart:core';

enum UrlType { IMAGE, VIDEO, UNKNOWN }

void main() async {
  var imageUrl =
      'https://firebasestorage.googleapis.com/v0/b/myAppCodeNameForFirebase.appspot.com/o/Posts%20Pictures%2Fiufri095620200814.jpg?alt=media&token=89b6c22f-b8dd-4cff-9395-f53fc0808824';
  var videoUrl =
      'https://firebasestorage.googleapis.com/v0/b/myAppCodeNameForFirebase.appspot.com/o/Posts%20Pictures%2Fiufri095620200814.mp4?alt=media&token=89b6c22f-b8dd-4cff-9395-f53fc0808824';

  print(getUrlType(imageUrl));
  print(getUrlType(videoUrl));
}

UrlType getUrlType(String url) {
  Uri uri = Uri.parse(url);
  String typeString = uri.path.substring(uri.path.length - 3).toLowerCase();
  if (typeString == "jpg") {
    return UrlType.IMAGE;
  }
  if (typeString == "mp4") {
    return UrlType.VIDEO;
  } else {
    return UrlType.UNKNOWN;
  }
}