Flutter Image
This is a widget used to show an image. When displaying an image, you specify the image source in the constructor:
image provider,
asset,
network,
file,
memory
The downside of the Image widget is the lack of placeholder (for example ‘loading…’ text). It shows nothing then shows the image.This doesn’t really cut it, so you need to use the FadeInImage to wrap this Widget.
The Flutter Image Widget has a fit property will enables developers to determine how the image graphics are fitted into the available area.This fit property can really change how the image is presented!
Example
Load a large into an app. Display an image placeholder while it loads
Step 1 – Create Default Flutter App
Follow the instructions in Generate Your First Leave project open.
Step 2 – Get Loading Image
Step 3 – Include the Loading Image in Your Project as an
Asset
Edit the pubspec.yaml file and change the lines below from:
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpegto:
assets:
- assets/loading.gifStep 4 – Replace Application Code
Replace contents of file ‘main.dart’ in folder ‘lib’ with the following:
import 'package:flutter/material.dart';
void main() => runApp(new LoadingImageApp());
class LoadingImageApp extends StatelessWidget {
// This widget is the root of your application. @override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Image',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new HomeWidget(),
);
}
}
class HomeWidget extends StatelessWidget {
HomeWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Image"),
),
body: new Center(
child: FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image:
'http://archivision.com/educational/samples/files/1A2-F-P-I-2-
C1_L.jpg',
)));
}
}Step 5 – Open Emulator & Run