FLUTTER: 6 excellent ways to implement Image widget

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

---