Image in Flutter

Image widget. Flutter supports various image formats such as JPEG, PNG, GIF, WebP, and more. Here's a basic example of how to display an image in Flutter.

Place your image file (e.g., PNG or JPEG) in the project's assets folder. Update your pubspec.yaml file to include the image in the assets section.

Here's a simple example of using a image in Flutter:

File open pubspec.yaml file −

name: test_test
description: "A new Flutter project."
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: '>=3.2.3 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0


flutter:
  assets:
    - assets/icon.png //add image name here

  uses-material-design: true

Here's a simple example of using a image in Flutter:

File open lib->main.dart file −

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp()
  );
}
class MyApp extends StatefulWidget{

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return   MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text('Image Example',
              style:TextStyle(fontSize: 20,color: Colors.white)),
        ),

        body: Center(
          child:
          Center(
            child: Image.asset('assets/icon.png'), // Adjust the path accordingly
          ),
        )
    ));

  }


}

Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.

Output:

Image From Network

Here's a simple example of using a image From url in Flutter:

File open lib->main.dart file −

Image.network('your url')

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp()
  );
}
class MyApp extends StatefulWidget{

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return   MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text('Image Example',
              style:TextStyle(fontSize: 20,color: Colors.white)),
        ),

        body: Center(
          child:
          Center(
            child: Image.network('https://www.iconpacks.net/icons/2/free-click-icon-2388-thumb.png'), 
          ),
        )
    ));

  }


}

Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.

Output: