Flutter - Display Image From Network URL & Show Loading

Do you want to display image from network URL in a Flutter application? This tutorial shows the basic example of how to display image from network by providing the URL. In addition, it also includes how to display loading icon while waiting the image to be fully loaded.

Display Image from Network

Displaying an image from network is very simple. You can use Flutter's built-in Image.network method with the URL as the argument. You can also pass some optional arguments to the method preceded by the name of the argument.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Display Image Tutorial'),
          ),
          body: Center(
            child: Image.network(
              'https://flutter.io/images/catalog-widget-placeholder.png',
              height: 100,
              width: 150
            )
          ),
        ),
      );
    }
  }

Below are the list of supported optional arguments for Image.network.

Name Type Description
semanticLabel string Semantic description of the image.
excludeFromSemantics bool Whether to exclude the image from semantics.
scale double How much image is scaled.
width. double Width of the image.
height double Height of the image.
color Color If not null, blend each image pixel with the color, depending on colorBlendMode.
colorBlendMode enum BlendMode How the color blended with the image.
fit enum BoxFit How to inscribe the image into the space allocated during layout.
alignment class AlignmentGeometry How to align the image within its bounds.
repeat enum ImageRepeat
  • repeat
  • repeatX
  • repeatY
  • noRepeat
 How to paint any portions of the layout bounds not covered by the image.
centerSlice enum Rect The center slice for a nine-patch image.
matchTextDirection bool Whether to paint the image in the direction of the TextDirection.
gaplessPlayback bool If true, it briefly shows the old image when the image provider changes. If false, it briefly shows nothing..
package String  
filterQuality enum FilterQuality:
  • none: lowest quality, fastest
  • low: Better than none, faster than medium
  • medium: Better than low, faster than high
  • high: best quality, slowest
 Image filter quality

Show Loading

Usually fetching image from network takes a few seconds before the image can be fully loaded. Instead of leaving a blank area, it would be better to show loading icon, so that the user knows that something is still being loaded. If you need to show loading icon, the easiest way is using Transparent Image plugin. First, add it to your pubspec.yaml file.

  dependencies
    transparent_image: ^0.1.0
  import 'package:flutter/material.dart';
  import 'package:transparent_image/transparent_image.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Display Image Tutorial'),
          ),
          body: Stack(
            children: [
              Center(child: CircularProgressIndicator()),
              Center(
                child: FadeInImage.memoryNetwork(
                  placeholder: kTransparentImage,
                  image: 'https://flutter.io/images/catalog-widget-placeholder.png',
                ),
              ),
            ],
          ),
        ),
      );
    }
  }

Below are the list of supporrted arguments of FadeInImage.memoryNetwork (transparent_image v0.1.0)

Name Type Description
@required Uint8List placeholder ImageProvider Displayed while the target image is loading.
@required String image ImageProvider The image to be displayed.
placeholderScale double Scale of the placeholder.
imageScale double Scale of the image..
fadeOutDuration Duration The duration of the fade-out animation.
fadeOutCurve Curve The curve of the fade-out animation.
fadeInDuration Duration The duration of the fade-in animation.
fadeInCurve Curve The curve of the fade-in animation.
width double The image width.
height double The image height.
fit enum BoxFit How to inscribe the image into the space allocated during layout.
alignment

AlignmentGeometry

Default: Alignment.center

 How to align the image within its bounds.
repeat enum ImageRepeat
  • repeat
  • repeatX
  • repeatY
  • noRepeat

Default: ImageRepeat.noRepeat

 How to paint any portions of the layout bounds not covered by the image.
matchTextDirection

bool
Default: false

 If this is true, there must be an ambient Directionality widget in scope.

That's how to show image with the URL. You can also read our post about how to display image from assets in Flutter.