Brand

Flutter Images

In this section, we will be learning how to display images in Flutter. In flutter we include both code and assets . An asset is a folder, it is bundled and deployed and will be accessible at runtime. These assets include static data, configuration files, icons, and images. The Flutter supports almost all image formats, example JPEG, WebP, PNG, GIF, animated WebP/GIF, BMP, and WBMP.

How to display the image in Flutter

To display an image in Flutter, do the following steps:

Step 1: First, we need to create a new folder named assets inside the root of the project. We can give it any name if we want.

Step 2: Next, add images to this folder.

Step 3: Update the pubspec.yaml file with uncommenting the assets section assets and adding the path with the name of the file.example:

  1. assets:
  2. – assets/tablet.png
  3. – assets/background.png

If the folder contains multiple files, we can also specify the directory name with a slash (/) character at the end to include all the files.

  1. flutter:
  2. assets:
  3. – assets/

Step 4: Finally, in the main.dart file and add the code below.

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 Demo'),  
        ),  
        body: Center(  
          child: Column(  
            children: [  
              Image.asset('assets/tablet.png'),  
              Text(  
                  'A tablet is a wireless touch screen computer that is smaller than a notebook but 
larger than 
a smartphone.',  
                  style: TextStyle(fontSize: 20.0),  
              )  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}

Step 5: Now, run the app.Output

flutter-image-demo

Display images from the internet

We can use Image.network to add images from any website. We can also contize them. We can also add gif also. It syntax is:

Image.network(  
  'https://picsum.photos/250?image=9',  
)

Let us learn how to display an network image using the example below:

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 Demo'),  
        ),  
        body: Center(  
          child: Column(  
            children: [  
              Image.network(  
                  'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',  
                  height: 400,  
                  width: 250  
              ),  
              Text(  
                  'It is an image displays from the given url.',  
                  style: TextStyle(fontSize: 20.0),  
              )  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}
Output

flutter-image-demo-internet-url

Previous
Next
Subscribe Now