How does Flutter load images?

Flutter can be load images with below widgets.

  • FadeInImage.memoryNetwork
  • Image.asset

Also have few plugins to load images

cached_network_image 2.0.0

Flutter library to load and cache network images. Can also be used with placeholders and error widgets.

flutter_advanced_networkimage 0.6.4

Advanced image cache loading and zoom control.

transparent_image 1.0.0

Simple transparent image, represented as Uint8List. Can be used as a placeholder when loading an image


Loading images from url takes time to load inside application, to wait for user we will show some place holder image untill load the original image.


Examples to load Image in flutter

Loading a image form the code



Loading a image form url : '', ),


Example code

import org.w3c.dom.Text
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    Widget build(BuildContext context) {
        var title = 'Load  Images';

        return MaterialApp(
            title: title,
            home: Scaffold(
        appBar: AppBar(
        title: Text(title),


            children: <Widget>[

                Padding(padding: EdgeInsets.only(top: 30)),

        Text("Loading local image"),

        new Image.asset('images/aclogo.jpg',width:300,height:100),

        Padding(padding: EdgeInsets.only(top: 30)),

        Text("Loading image from url"),
            '',width: 200,height: 200,

        Padding(padding: EdgeInsets.only(top: 30)),

        Text("Loading image from url with placeholder"),

            placeholder: 'assets/loading.gif',
        image: '',