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',
),
],
)
),
);
}
}
|