How does Flutter load images?

Flutter can be load images with below widgets.

  • Image.network
  • FadeInImage.memoryNetwork
  • Image.asset

Also have few plugins to load images

cached_network_image 2.0.0
https://pub.dartlang.org/packages/cached_network_image

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

flutter_advanced_networkimage 0.6.4

https://pub.dartlang.org/packages/flutter_advanced_networkimage

Advanced image cache loading and zoom control.

transparent_image 1.0.0

https://pub.dartlang.org/packages/transparent_image

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

Image.asset('images/aclogo.jpg',width:200,height:200),

 

Loading a image form url :

Image.network( 'https://rrtutors.com/uploads/langpostimg/15java-projects.jpg', ),

 

Example code

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


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

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

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

        Column(

            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"),

        Image.network(
            'https://rrtutors.com/uploads/langpostimg/15java-projects.jpg',width: 200,height: 200,
        ),

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

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

        FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
        image: 'https://rrtutors.com/uploads/langpostimg/15java-projects.jpg',
        ),

        ],

        )

        ),
        );
    }
}

 


Subscribe For Daily Updates

Flutter Questions
Android Questions