Image class – класс изображения

Источник https://api.flutter.dev/flutter/widgets/Image-class.html

Наследование: Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Image

Виджет класс для отображения изображений.

Конструкторы класса:

• Image() – получение изображения из ImageProvider (из существующего экземпляра класса Image);
• Image.asset() – получения изображения из ресурсов приложения;
• Image.network() – получения изображения по URL;
• Image.file() – получение изображения из файла;
• Image.memory() – получение изображения из Uint8List.

Разные конструкторы применяются в зависимости от того где находится изображение: в ресурсах приложения, на удаленном сервере, в базе данных или создано во время выполнения программы.

Поддерживаемые форматы изображений: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP и WBMP

Параметры класса:
alignment → AlignmentGeometry (по умолчанию: Alignment.center)
final

centerSlice → Rect
final

color → Color
final

colorBlendMode → BlendMode
final

fit → BoxFit
final

gaplessPlayback → bool (по умолчанию: false)
final

height → double
final

image → ImageProvider
final

repeat → ImageRepeat
final

width → double
final

hashCode → int
read-only, inherited

key → Key
read-only, inherited

runtimeType → Type
read-only, inherited

Конструкторы класса Image

Image.asset()

Позволяет получить изображение из ресурсов приложения.
Пусть у Вас есть логотип вашей организации и Вы хотите отображать его при открытии приложения.
Логотип всегда один и тот же и нет необходимости подгружать его из интернета.

Чтобы использовать такой конструктор нужно:

1. Добавить изображение в проект.
2. Объявить его в файле pubspec.yaml.
3. Использовать Image.asset().

Пример использования

В директории нашего проекта создадим директорию image, в нее скопируем подготовленный файл logo.png

После этого увидим изменения в нашем проекте: появится директория с изображением.
Добавим в файл pubspec.yaml новый ресурс проекта image/logo.png.

Добавим в код программы экземпляр класса Image, в качестве параметра укажем изображение из ресурсов приложения Image.asset('image/logo.png')

import 'package:flutter/material.dart';

class MyBody extends StatelessWidget{
  Widget build(BuildContext context) {
    return Image.asset('image/logo.png');
  }
}

void main() => runApp(MaterialApp(home: Scaffold(body: MyBody())));

Image.network()

Позволяет получить изображение по URL.
Когда Вы создаете приложение-каталог есть необходимость показывать изображение из интернета.

Чтобы использовать этот конструктор нужно:

1. Добавить изображение на сайт, получить его URL адрес.
2. Использовать Image.network().

Пример использования

Для пробы можно использовать изображение с нашего ресурса, по адресу: https://flutter.su/file/bcd39825684e0335d0343a5f9190eee5.png

Добавим в код программы экземпляр класса Image, в качестве параметра укажем URL адрес Image.network('https://flutter.su/file/bcd39825684e0335d0343a5f9190eee5.png')

import 'package:flutter/material.dart';

class MyBody extends StatelessWidget{
  Widget build(BuildContext context) {
    return Image.network('https://flutter.su/file/bcd39825684e0335d0343a5f9190eee5.png');
  }
}

void main() => runApp(MaterialApp(home: Scaffold(body: MyBody())));

Image()

Позволяет получить изображение из существующего экземпляра класса Image.

Пример использования

import 'package:flutter/material.dart';

class MyBody extends StatelessWidget{
  Widget build(BuildContext context) {
    Image img = Image.network('https://flutter.su/favicon.png', width: MediaQuery.of(context).size.width/2);
    Image img2 = Image(image: img.image, color: Colors.red, colorBlendMode: BlendMode.color);

    return Column(children: [img, img2]);
  }
}

void main() => runApp(MaterialApp(home: Scaffold(body: MyBody(),backgroundColor: Colors.teal)));

Параметры класса Image

alignment

alignment → AlignmentGeometry (по умолчанию: Alignment.center)
final

Выравнивание изображения относительно самого контейнера этого изображения.

Возможные значения alignment:

• Alignment.center
• Alignment.centerLeft
• Alignment.centerRight
• Alignment.bottomCenter
• Alignment.bottomLeft
• Alignment.bottomRight
• Alignment.topCenter
• Alignment.topLeft
• Alignment.topRight

Так, например, если задать параметры height, width и fit, то через параметр alignment можно задать выравнивание:

import 'package:flutter/material.dart';

class MyBody extends StatelessWidget{
  Widget build(BuildContext context) {
    return Image.network(
      'https://flutter.su/favicon.png',
      width: MediaQuery.of(context).size.width,
      height: 250.0,
      fit: BoxFit.cover,
      alignment: Alignment.bottomCenter);
  }
}

void main() => runApp(MaterialApp(home: Scaffold(body: MyBody(),backgroundColor: Colors.teal)));

color

color → Color (по умолчанию: Null)
final

Используется для смешения цвета с параметром colorBlendMode.

colorBlendMode

colorBlendMode → BlendMode (по умолчанию: Null)
final

Режим смешивания цвета с изображением.

import 'package:flutter/material.dart';

class MyBody extends StatelessWidget{
  Widget build(BuildContext context) {
    return Image.network('https://flutter.su/favicon.png',
        color: Colors.blue,
        colorBlendMode: BlendMode.color);
  }
}

void main() => runApp(MaterialApp(home: Scaffold(body: MyBody(),backgroundColor: Colors.teal)));

fit

fit → BoxFit (по умолчанию: Null)
final

Определяет правило заполнения (заливки) изображением контейнера.

Возможные значения fit:

• BoxFit.contain
• BoxFit.cover
• BoxFit.fill
• BoxFit.fitHeight
• BoxFit.fitWidth
• BoxFit.none
• BoxFit.scaleDown

gaplessPlayback

gaplessPlayback → bool (по умолчанию: false)
final

Этот параметр заставляет показывать старое изображение пока новое недоступно (если true), или ничего не отображать пока новое изображение не станет доступным (если false).

repeat

repeat → ImageRepeat
final

Способ заполнения контейнера изображением: повторение паттерна.

Возможные значения repeat:

• ImageRepeat.noRepeat
• ImageRepeat.repeat
• ImageRepeat.repeatX
• ImageRepeat.repeatY

Подборка заметок

• Flutter 2.2: что нового?
• Анонс Flutter 1.22
• Список ресурсов по Dart и Flutter
• Flutter команды
• Представляем Вам Flutter 1.17!