How to add image in flutter

Here we will talk about how to add image in flutter app. There are many ways in which you can add and show images in a flutter. Like an image from the network (internet) or a static image inside your app, you may want to show a gallery image or an image from the camera. 

Here we will discuss two methods. One is to show an image that is predefined inside your app and the other way is to offer an image from the network (internet). For example, you want to show your Facebook profile picture or something else.  

Steps to show an image that is inside your app.

The syntax is 

Image.asset('imagePath'),

Image from Assets:

Step 1.

Create a new flutter project or use your existing one. 

Step 2.

Create a new directory (folder) inside your application. Name it Whatever you want. But the preferred name is assets. It should be the root folder of your project. Inside the assets folder, create a new folder ‘images’. If you have more files in your app like mp3 files, fonts, etc. You should make more subfolders inside the assets folder. Always use a good structure and naming conventions for your folders and files that are readable and understandable. The following figure shows our ‘assets’ and  ‘images’ folders.

Step 3.

Drag and drop or copy/paste your picture inside the ‘images’ folder. Note the name and format of the picture. For  example, in our case it is  

‘flutterdecodeimage.jpg’. 

Flutter supports these image formats JPEG, WebP, PNG, GIF, and JPG. 

Step 4.

Go to your pubspec.yml file. Inside this, put the path of your image in the assets section. For example, in our case it is, there is also a Commented Code of Add for assets uncomment that and pace this, and also make sure for proper spacing. there you can see:

uses-material-design: true

Make sure that the assets: keyword show remains the same level of spacing.

  uses-material-design: true
  assets: 
   - assets/images/flutterDecodeImage.jpg

If you want to include all the images. The path should be

assets: 
 - assets/images/ 

Note:

The pubspec.yml file needs proper indentation. So be careful. And type your code correctly to avoid errors.

Now, update (pub get) the pubspec.yml file so that the changes become effective. 

Step 5.

Now insert the image code in your base code where you want to show the image.

Image.asset('assets/images/flutterDecodeImage.jpg'),

Following is the complete code that shows an image in a Flutter app.

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Container(
          height: 100,
          width: 100,
          // Following line show Image from assets
          child: Image.asset('assets/images/flutterDecodeImage.jpg'),
        )
    );
  }
}

Following is the output of the code:

Image From Network:

For internet images, you don’t need to create an assets folder. Just use the ‘Image Widget’ with ‘Image.network()’ function.

The syntax is:

Image.network('Image url')

The ‘Image’ widget has two properties height and width that decides the height and width of the picture.

The following code shows how to show an image from the internet.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
          height: 100,
          width: 100,
          //Following line shows image from internet
          child: Image.network('https://images.pexels.com/photos/2820884/pexels-photo-2820884.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
          height: 200,
          width: 200,)
      )
    );
  }
}

Following is the output of the code:

This is how you guys can use the Image in Flutter Project

---

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com