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.

NameTypeDescription
semanticLabelstringSemantic description of the image.
excludeFromSemanticsboolWhether to exclude the image from semantics.
scaledoubleHow much image is scaled.
width.doubleWidth of the image.
heightdoubleHeight of the image.
colorColorIf not null, blend each image pixel with the color, depending on colorBlendMode.
colorBlendModeenum BlendModeHow the color blended with the image.
fitenum BoxFitHow to inscribe the image into the space allocated during layout.
alignmentclass AlignmentGeometryHow to align the image within its bounds.
repeatenum ImageRepeat
  • repeat
  • repeatX
  • repeatY
  • noRepeat
How to paint any portions of the layout bounds not covered by the image.
centerSliceenum RectThe center slice for a nine-patch image.
matchTextDirectionboolWhether to paint the image in the direction of the TextDirection.
gaplessPlaybackboolIf true, it briefly shows the old image when the image provider changes. If false, it briefly shows nothing..
packageString 
filterQualityenum 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)

NameTypeDescription
@required Uint8List placeholderImageProviderDisplayed while the target image is loading.
@required String imageImageProviderThe image to be displayed.
placeholderScaledoubleScale of the placeholder.
imageScaledoubleScale of the image..
fadeOutDurationDurationThe duration of the fade-out animation.
fadeOutCurveCurveThe curve of the fade-out animation.
fadeInDurationDurationThe duration of the fade-in animation.
fadeInCurveCurveThe curve of the fade-in animation.
widthdoubleThe image width.
heightdoubleThe image height.
fitenum BoxFitHow to inscribe the image into the space allocated during layout.
alignment

AlignmentGeometry

Default: Alignment.center

How to align the image within its bounds.
repeatenum 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.