[Flutter] Adding Image to Flutter Application

Let's learn about how to add images to the Flutter application.

Configuration

Let's create an images folder in the project and push the prepared images.

Now, open the project configuration file.

Adding configurations by referring to the comments.

# pubspec.yaml
...
# The following section is specific to Flutter.
flutter:
  ...
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  assets:
    - images/flutter_logo.png
  ...

Unfortunately, it seemed it couldn't support SVG type.

Creating Widget for Images

We will make a widget for images.

Let's create a file for this.

// lib/imageWidget.dart

import 'package:flutter/material.dart';

class ImageWidgetApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ImageWidgetApp();
  }
}

class _ImageWidgetApp extends State<ImageWidgetApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Widget')),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset('images/flutter_logo.png'),
            ],
          ),
        ),
      ),
    );
  }
}

We just added images using Scaffold for material design.

Rendering Images

Now, import the image widget into the main application and render it.

// lib/main.dart

import 'package:flutter/material.dart';
import 'imageWidget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calculator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageWidgetApp()
    );
  }
}

It's showtime!

Image.asset

As learned from the above, images are rendered by Image.asset() method.

final double? width

final double? height

We could resize the image using width and height properties.

Image.asset('images/flutter_logo.png', width: 600, height: 200);

final BoxFit? fit

fit property inscribes the image into the space allocated during layout.

Image.asset('images/flutter_logo.png', fit: BoxFit.contain);

Available BoxFit lists are as follows:

• contain: as large as possible while still containing the source entirely within the target box.

• cover: as small as possible while still covering the entire target box.

• fill: fill the atarget box by distorting the source's aspect ratio.

• fitHeight: make sure the full heught of the source is shown, regardless of whether this means the source overflowsthe target box horizontally.

• fitWitdh: make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.

• none: align the source within the target box (by default, centering) and discard any portions of the source that lie outside the box.

• scaleDown: align the source within the target box (by default, centering) and, if necessary, scale the source down to ensure that the source fits within the box.

• values: a constant list of the values in this enum, in order of their declaration.