FLUTTER: 6 excellent ways to implement Image widget
Tags: flutter, flutterwidget, flutterapp, flutterimagewidgets
Published: 2020-06-20 14:25:49

---
title: FLUTTER: 6 excellent ways to implement Image widget
published: true
date: 2020-06-20 14:09:10 UTC
tags: flutter,flutterwidget,flutterapp,flutterimagewidgets
canonical_url: https://medium.com/innovation-incubator/flutter-6-excellent-ways-to-implement-image-widget-69a845d1269e
---

![](https://cdn-images-1.medium.com/max/1000/0*s7of7kWnf9fDg4XM.jpeg)

### Flutter Image Widget

You can use the Flutter Image widget in 6 ways such as **FadeInImage** , **Ink Image** , **Asset Image** , **Network Image** , **Memory Image** , and **File Image**. We will see how we can use the Flutter Image widget in a much better way. Image widget is an essential widget in Flutter because without image you cannot develop a beautiful app. Images express the content better than text.

### 1. Flutter Network Image

Network Image widget uses the internet to show the image, you can use any URL of an image to display the image. It is better to use Network Image over Asset Image because it reduces the app size, you don’t have to keep any images in the app.

Now you have to create **main.dart** file which will be used to demonstrate the all the widget example.

**main.dart**

```
import 'package:flutter/material.dart';
import 'package:flutter\_image\_widget/image\_widget/assets\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/fade\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/file\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/ink\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/memory\_image\_widget.dart';
import 'package:flutter\_image\_widget/image\_widget/network\_image\_widget.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      debugShowCheckedModeBanner: false,
      home: NetworkImageWidget()
    ),
  );
}
```

As you can see the main.dart file code, you can replace **NetworkImageWidget()** from home with our upcoming image widgets and you are ready to run the app. Now create file network\_image\_widget.dart file, this will be used for network image widget example.

**network\_image\_widget.dart**

```
import 'package:flutter/material.dart';

class NetworkImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Image'),
      ),
      body: Container(
        color: Colors.white,
        padding: EdgeInsets.all(16),
        child: Image.network(
          '[https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png](https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png)',
          frameBuilder: (BuildContext context, Widget child, int frame,
                  bool wasSynchronouslyLoaded) =>
              wasSynchronouslyLoaded
                  ? child
                  : AnimatedOpacity(
                      child: child,
                      opacity: frame == null ? 0 : 1,
                      duration: const Duration(seconds: 2),
                      curve: Curves.easeOut,
                    ),
          loadingBuilder: (context, child, progress) => progress == null
              ? child
              : LinearProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                ),
          errorBuilder:
              (BuildContext context, Object exception, StackTrace stackTrace) =>
                  Text('Failed to load image'),

        ),
      ),
    );
  }
}
```

To display image from URL you have to use **Image.network** widget, as you can see the above code I have passed the image URL to display the image, apart from URL I have used frameBuilder, loadingBuilder, and errorBuilder. This three property is common to all image widget so I will cover these properties only for network image widget, you do the same with other image widgets.

1. **frameBuilder**   **:-** It will display the image with given animation, I have used an **AnimatedOpacity** widget this will load the image.
2. **loadingBuilder :-** This will display another widget until it finishes to load, I have returned the **LinearProgressIndicator** widget.
3. **errorBuilder :-** If you have used the wrong URL or device is not connected to the internet then you can use this property to display another widget.

Note :- Do not use loadingBuilder and frameBuilder at a same time, loadingBuilder will override the frameBuilder.

### 2. Flutter Asset Image

Assets Image widget uses an image from the root directory of your project, before using any image you have to add image path to pubspec.yaml file. I have created an “images” folder inside the project root directory and added a cover.png file.

**pubspec.yaml**

```
flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/
```

Add images folder inside assets tag to access all the images from directory.

Now create asset\_image\_widget.dart file to display the images from root directory.

**assets\_image\_widget.dart**

```
import 'package:flutter/material.dart';

class AssetsImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Asset Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Image.asset(
          'images/cover.png',

        ),
      ),
    );
  }
}
```

Now replace NetworkImageWidget from main.dart file with AssetsImageWidget. You can use frameBuilder, loadingBuilder, and errorBuilder with asset image also. Image used **Image.asset()** widget to display the image.

### 3. Flutter Memory Image

Memory Image widget is best if you want to display base64Image. As said you can use frameBuilder, loadingBuilder, and errorBuilder with **Image.memory()** widget. Now create memory\_image\_widget.dart file and replace it in main.dart file from your previous widget and create image\_string.dart file to store the base64 format of the image.

**image\_string.dart**

```
const base64Image = 'base64Image string';
```

**memory\_image\_widget.dart**

```
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter\_image\_widget/image\_string.dart';

class MemoryImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Memory Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Image.memory(
          base64Decode(base64Image),
        ),
      ),
    );
  }
}
```

I have used **Image.memory()** widget to display the base64Image and **base64Decode()** function is used to decode the string.

Flutter also supports to Ink Image which will gives the nice and beautiful touch or click effect i.e. ripple effect. You can have ripple effect like Android in Flutter for image widget.

### 4. Flutter Ripple Effect on Image

create ink\_image\_widget.dart file, to achieve the ripple effect on the image, make sure that you have replaced the previous widget with InkImageWidget().

**ink\_image\_widget.dart**

```
import 'package:flutter/material.dart';

class InkImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ink Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Material(
          color: Colors.transparent,
          child: Ink.image(
            image: AssetImage('images/cover.png'),
            fit: BoxFit.contain,
            height: 100,
            child: InkWell(
              splashColor: Colors.green.withOpacity(.2),
              onTap: () {},
            ),
          ),
        ),
      ),
    );
  }
}
```

I have used the **Ink.image()** widget along with the **Material** widget to achieve the ripple effect. Note height parameter is important otherwise ripple effect will cover the whole screen.

### 5. Flutter FadeInImage Widget

FadeInImage widget is used to display the asset image and memory image with a fade animation. This widget loads the image by fading the placeholder image. Create a file fade\_image\_widget.dart and replace the previous widget in main.dart with **FadeImageWidget()**.

**fade\_image\_widget.dart**

```
import 'package:flutter/material.dart';

class FadeImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fade In Image'),
      ),
      body: Container(
        color: Colors.white,
        child: FadeInImage.assetNetwork(
          placeholder: 'images/cover.png',
          image:
              '[https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png](https://toppng.com/uploads/preview/batman-png-11553978541s9xp0sddf1.png)',
        ),
      ),
    );
  }
}
```

I have used **FadeInImage.assetImage()** widget you can also use **FadeInImage.memoryImage()** instead of image path you have use base64Image string in memoryImage widget. Placeholder parameter is used to show the static image util it finishes to load the asset image.

### 6. Flutter File Image Widget

Flutter has **Image.file()** widget to display the image from the device, you can use the [**path\_provider**](https://pub.dev/packages/path_provider) package to get the image path from local storage. Now create file\_image\_widget.dart file and add it to the main.dart.

**file\_image\_widget.dart**

```
import 'dart:io';
import 'package:flutter/material.dart';

class FileImageWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('File Image'),
      ),
      body: Container(
        color: Colors.white,
        child: Image.file(
          File(
            'Use Path provider get image from local storage',
          ),
        ),
      ),
    );
  }
}
```

I have used **Image.file()** widget along with File class to display the image from local storage.

* * *