В этом уроке мы увидим, как отображать изображение во Flutter. Мы используем виджет «Изображение» для отображения изображения. Поддерживаемые форматы — JPEG, PNG, GIF, анимированный GIF, WebP, Animated WebP, BMP и WBMP. В основном мы используем специальный конструктор Image.asset для отображения изображения.
Конструктор Image.asset
Создает виджет, который отображает ImageStream, полученный из набора ресурсов. Ключ к изображению дается аргументом имени. Аргумент пакета должен быть ненулевым при отображении изображения из пакета и нулевым в противном случае.
Как отображать изображение во Flutter
Первый шаг — нам нужно создать новую папку в корне проекта flutter с именем assets. Вы можете назвать эту папку как угодно, но в этой демонстрации позвольте нам прикрепить ее к ресурсам. Внутри этой папки добавьте одно изображение вручную. В моем случае это Krunal.jpg. Помните, что мы показываем статическое изображение в приложении Flutter.
Теперь обновите файл pubspec.yaml .
Внутри файла yaml вы можете удалить комментарий к этой части.
assets : - assets/Krunal.jpg
Итак, мы явно сообщаем флаттеру, что мы используем статическое изображение в приложении флаттера.
Теперь последний шаг — заменить следующий код внутри файла lib >> main.dart .
//main.dartimport 'package: flutter/material.dart'; void main () => runApp (MyApp ()); класс MyApp расширяет StatelessWidget {@override Widget build (BuildContext context) {return MaterialApp (home: Scaffold ( appBar: AppBar (title: Text ('Первое приложение')), body: Column (дочерние элементы: [Image.asset ('assets/Krunal.jpg',), Text ('Me')],),) ,); }}
Итак, мы взяли в основном шесть виджетов. Сначала наш каркас означает домашний экран, а затем внутри него мы взяли панель приложений и виджет тела, у которого есть два дочерних элемента. Один из них — изображение, другой — текст.
Image.asset дал один аргумент, который является именем этого изображения, а текстовый виджет имеет строку в своем аргументе, и это все. Сохраните файл, перейдите в терминал и запустите приложение.
flutter run -d all
Вы увидите что-то вроде этого. Конечно, ваше изображение будет отличаться от моего.
Итак, наше руководство по отображению изображения во Flutter окончено.
