Image Widget in Flutter - Flutter Tutorial

❌

Image Widget

When a user wants to add an image to an application, one can do it by adding those images to the assets folder. Asset images are present as part of the asset bundle of the app and are deployed with the app so that they are readily available during run time.

Constructors to load images in the Image Widget

• Image.asset - Utilized for displaying images from the assets bundle.
  
  
• Image.file - Utilized for displaying images from a specific file.
  
  
• Image.memory - Utilized for displaying images from memory. The image will be stored as an Unint8List which is the fastest way to load an image from memory.
  
  
• Image.network - Utilized for displaying images from URL

The use of the Image.asset in Flutter.

When working with Flutter and adding image assets to your project, the first step is to create a dedicated folder for your assets. Begin by creating an assets directory in your project’s root, and within that, create a nested folder named img. This img folder is where you'll store your image files. After setting up the folders, you can follow the code provided below to add the image to your Flutter app. Just remember to update the path in the code to reflect the name of your folder and the specific image file you're using.

Add the following lines under the flutter section: pubspec.yaml file

flutter:

  assets:

    - asset/img/1.jpg

Use the Image.asset widget to display the image in your app.

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('Flutter Asset Example'),

        ),

        body: Center(

          child: Image.asset(

            'asset/img/1.jpg',

            height: 200.0,

            width: 200.0,

            fit: BoxFit.cover,

          ),

        ),

      ),

    );

  }

}

How to Add Asset Image in Flutter - Image.asset - Flutter Tutorial

Image.network

Use the Image.network widget to display the image in your app.

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('Flutter Image.network Example'),

        ),

        body: Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Image.network(

                'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',

                height: 200.0,

                width: 200.0,

                fit: BoxFit.cover,

              ),

              SizedBox(height: 20.0,),

               Image.network(

                'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',

                height: 200.0,

                width: 200.0,

                fit: BoxFit.cover,

              )

            ],

          ),

        ),

      ),

    );

  }

}

How to Add URL Image in Flutter - Image.network - Flutter Tutorial