CODEWITHSUNDEEP
flutterflutter-layout
Scott Summers
Scott Summers

Reputation: 75

Flutter: How to handle image with null value?

I try simple layout from data. It should be just a text and image. However, looking at the data it have "image", null or video.

My idea is when image= null, just show a transparent file. But how to handle video?

List profileImage = ["picture1.jpg", null  , "picture3.jpg", "profile_video_3.mp4"];

              child: Column(
                children: <Widget>[
                  Text('Stack Oveflow'),
                  Image.asset('assets/quizImages/$FromprofileImage')
                ],
              ),

Expected output is layout have text widget and handle the "image widget" for null value and video file

What is the best practice to handle this? Thanks

Upvotes: 4

Views: 8582

Answers (1)

Bilaal Muhammad
Bilaal Muhammad

Reputation: 126

Here is how you can go about it. 

List profileImage = ["picture1.jpg", null  , "picture3.jpg", "profile_video_3.mp4"];
Scaffold(
    body: Column(
        children: <Widget> [
                Text('Stack Oveflow'),
                _displayMedia(profileImage[0]),

            ]
        )
)

Widget _displayMedia(String media) {
    if(media == null) {
        return Image.asset('assets/transparent_file');
    }
    else if(media.contains('.mp4') {
        return Image.asset('assets/video_thumbnail.png');
    }
    else {
        return Image.asset('assets/quizImages/$media');
    }

}

For the video thumbnail image, you can check here on how to generate it. https://medium.com/@sreedevr/creating-thumbnail-from-video-in-flutter-d569000eaeac

Upvotes: 4

Related Questions