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

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

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

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

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

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

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

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

new Image.asset

Позволяет получить изображение из ресурсов приложения.

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

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

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

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

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

добавление изображения в проект добавление изображения в проект

После этого увидим изменения в нашем проекте: появится директория с изображением.

Добавим в файл pubspec.yaml новый ресурс проекта image/logo.png

добавление в файл pubspec.yaml нового ресурса

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

пример выполнение Flutter приложения

import 'package:flutter/material.dart'; class MyBody extends StatelessWidget{ Widget build(BuildContext context) { return new Image.asset('image/logo.png'); } } void main() => runApp( new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold(body: new MyBody()) ) );

new Image.network

Позволяет получить изображение по URL.

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

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

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

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

Возьмем изображение с нашего ресурса
https://flutter.su/data/462d126dc69a4d6968374ee46eef32d6.png

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

пример выполнение Flutter приложения

import 'package:flutter/material.dart'; class MyBody extends StatelessWidget{ Widget build(BuildContext context) { return new Image.network('https://flutter.su/data/462d126dc69a4d6968374ee46eef32d6.png'); } } void main() => runApp( new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold(body: new MyBody()) ) );

new Image

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

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

пример выполнение Flutter приложения

import 'package:flutter/material.dart'; class MyBody extends StatelessWidget{ Widget build(BuildContext context) { Image img = new Image.network('https://flutter.su/favicon.png', width: MediaQuery.of(context).size.width/2); Image img2 = new Image(image: img.image, color: Colors.red, colorBlendMode: BlendMode.color); return Column(children: [img, img2]); } } void main() => runApp( new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold(body: new MyBody(),backgroundColor: Colors.teal) ) );

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

alignment

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

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

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

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

пример выполнение Flutter приложения

import 'package:flutter/material.dart'; class MyBody extends StatelessWidget{ Widget build(BuildContext context) { return new 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( new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold(body: new MyBody(),backgroundColor: Colors.teal) ) );

color

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

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

colorBlendMode

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

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

пример выполнение Flutter приложения

import 'package:flutter/material.dart'; class MyBody extends StatelessWidget{ Widget build(BuildContext context) { return new Image.network('https://flutter.su/favicon.png', color: Colors.blue, colorBlendMode: BlendMode.color); } } void main() => runApp( new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold(body: new MyBody(),backgroundColor: Colors.teal) ) );

fit

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

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

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

gaplessPlayback

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

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

repeat

repeat→ ImageRepeat
final

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

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