Questions And Answers

More Tutorials

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,

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!


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
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.jpeg

- assets/loading.gif

Step 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(
home: new HomeWidget(),
class HomeWidget extends StatelessWidget {
HomeWidget({Key key}) : super(key: key);
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Image"),
body: new Center(
child: FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',

Step 5 – Open Emulator & Run


In this page (written and validated by ) you learned about Flutter Image . What's Next? If you are interested in completing Flutter tutorial, your next topic will be learning about: Flutter Icon.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.