Image Widget in Flutter

A widget that displays an image in a flutter application is an Image widget. The image format supported in flutter application are JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP.

But it is not easy to use Image widget for the first time like any other widgets because we have to set up certain code beside the main.dart file. The procedure we have to follow before using an Image widget in a new Flutter project are:-

  1. First, You have to create a directory named "images" in the root folder and insert images within that folder which you want to use in your flutter project
  2. Then, You have to specify the image assets by going to pubspec.yaml file at the root directory of the project, open it and you have to locate "#assets" inside "flutter:" remove # before assets and also before "- images/something.jpeg" and change the name of image file which you have inserted in the images directory,
flutter:
  assets:
    - images/image1.jpeg
    - images/image2.png

Now you are ready to use Image widget in your flutter application. Look at the code below to show your image in a flutter application

import "package:flutter/material.dart";

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp(),));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Review2Tech Application"),
        ),
        body: Container(
          child: Center(
            child: Image.asset("images/image1.jpeg"), //Image Widget
          ),
       ),
    );
  }
}

Note: If any error occurs while running the code remove 1 space before assets and run again.

Output of Image Widget

flutter image widget

Complete Flutter Series List: Click here 

Categories: Blog Tags: flutter, review2tech flutter series, image widget, image in flutter, insert image in flutter, flutter android, flutter ios


3 Comments

  • Comment

    yeezy shoes

    2020-08-15 04:47:44

    I have to convey my affection for your kind-heartedness supporting persons who should have help on this particular situation. Your real dedication to passing the solution all through turned out to be remarkably important and have surely enabled folks much like me to achieve their pursuits. Your new warm and friendly hints and tips implies a lot to me and far more to my peers. With thanks; from everyone of us.

    Reply

  • Comment

    cheap jordans

    2020-08-17 14:07:08

    I definitely wanted to post a note in order to say thanks to you for all the fantastic tips you are placing on this website. My extended internet look up has at the end of the day been honored with sensible information to write about with my co-workers. I would believe that most of us visitors actually are unquestionably lucky to live in a perfect site with many outstanding individuals with good tips. I feel truly grateful to have encountered the weblog and look forward to some more fun minutes reading here. Thanks a lot again for all the details.

    Reply

  • Comment

    supreme clothing

    2020-08-23 01:04:37

    I would like to point out my gratitude for your kind-heartedness supporting persons that must have help with this particular idea. Your very own dedication to getting the solution all-around ended up being surprisingly interesting and has in most cases enabled workers just like me to achieve their desired goals. Your personal invaluable publication can mean this much a person like me and further more to my mates. Warm regards; from all of us.

    Reply

Leave a comment