Простое пошаговое руководство по различным методам и их правильному применению
Изображения являются основой любого приложения. Они могут предоставить важную информацию, выступая в качестве наглядных пособий, или просто улучшить внешний вид вашего приложения. Есть много способов добавить изображение в ваше приложение Flutter. Эта статья предоставит исчерпывающее руководство по различным методам, а также подробные примеры и образцы кода.
Image.asset:
Хотя это требует некоторой настройки, это наиболее удобный способ добавить фотографию. Для начала создайте папку с ресурсами. Эта папка должна содержать любые внешние носители, которые вы хотите добавить, например изображения, видео, гифки или файлы JSON. Если ваше приложение будет содержать несколько типов ресурсов, рекомендуется создать отдельные подпапки для каждого из них. Папка с ресурсами должна находиться в том же каталоге, что и файл pubsec.yaml в вашем проекте.
После того, как изображение было добавлено в папку с ресурсами, файл pubsec.yaml необходимо отредактировать, чтобы включить изображение. Любой внешний ресурс или пакет в вашей программе должен быть аналогичным образом включен в файл pubsec.yaml.
Теперь, когда необходимая настройка завершена, изображение можно добавить в код:
Image.asset(‘assets/tree.jpg’)
Если вы решили использовать подпапки для разделения своих активов:
Image.asset(‘assets/images/tree.jpg’)
Вот код простого приложения, которое использует Image.asset для отображения изображения:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: new Image.asset('assets/tree.jpg'),
alignment: Alignment.center,
),
),
);
}
}
Image.network
Чтобы отобразить изображение, найденное в Интернете, а не хранящееся локально, вы должны использовать Image.network. После проверки лицензии и авторских прав на желаемое изображение просто скопируйте его адрес. Независимо от того, тестируете ли вы свое приложение на эмуляторе или на физическом устройстве, убедитесь, что оно подключено к Интернету, иначе оно выдаст ошибку.
С адресом изображения изображение может быть добавлено в код:
Image.network('https://images.pexels.com/photos/1525043/pexels-photo-1525043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',)
Вот код простого приложения, которое использует Image.network для отображения изображения:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: new Image.network(
'https://images.pexels.com/photos/1525043/pexels-photo-1525043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
),
alignment: Alignment.center,
),
),
);
}
}
Примечание. Этот метод также работает с гифками. Просто замените адрес изображения на адрес гифки.
Файл изображения
Чтобы загрузить изображения из файловой системы на целевое устройство, вы должны использовать Image.file. Однако сначала вы должны убедиться, что у приложения есть соответствующие разрешения для доступа к внешнему хранилищу устройства. Откройте и отредактируйте файл AndroidManifest.xml своего проекта, чтобы запросить следующие разрешения:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package= "flutter.image.demo">
<uses-permission android:name =
"android.permission.READ_EXTERNAL_STORAGE"/>
<application
...
</application>
</manifest>
Найдите изображение, которое вы хотите добавить, и просмотрите его сведения, чтобы определить путь к файлу изображения.
По пути к файлу изображение можно добавить в программный код:
Image.file(new File('/storage/emulated/0/Download/forest.jpg'))
Вот код простого приложения, которое использует Image.file для отображения изображения:
Обратите внимание, что вы также должны импортировать библиотеку «dart: io», чтобы использовать класс File.
import 'package:flutter/material.dart';
import 'dart:io';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: Image.file(
new File('/storage/emulated/0/Download/forest.jpg')),
alignment: Alignment.center,
),
),
);
}
}
Image.memory
Чтобы загрузить изображение из памяти, вы должны использовать Image.memory. Этот метод требует кодирования и декодирования изображения в формат base 64. Вы можете найти хороший сайт для кодирования и декодирования здесь. Имейте в виду, что представление изображений с базой 64 может быть длинным, особенно с большими изображениями. В практических целях и чтобы не делать эту статью слишком длинной, я поставил "replace-with-base-64 -roduction" вместо фактического представления изображения base-64. Однако вы можете просмотреть файл, содержащий строку для образца изображения, здесь и загрузить файл здесь.
Для начала возьмите изображение, которое вы хотите добавить, и закодируйте его в base 64. Расшифруйте это сообщение с помощью класса base64 и поместите его в конструктор Image.memory:
Image.memory(base64.decode('replace-with-base-64-representation'))
Вот код простого приложения, которое использует Image.memory для отображения изображения:
Обратите внимание на дополнительные пакеты, которые необходимо импортировать.
import 'dart:convert';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Image Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Image Demo'),
),
body: new Container(
color: Colors.grey[200],
child: Image.memory(
base64.decode('replace-with-base-64-representation')
),
alignment: Alignment.center,
),
),
);
}
}
Окончательный вид
Время загрузки (от наименьшего к наибольшему) для пользователя обычно следует в следующем порядке:
Изображение. память → Изображение. объект → изображение. файл → изображение. сеть
Однако скорость - это не всегда главное. У каждого метода есть свои преимущества и недостатки:
Image.asset требует добавления ваших изображений в папку с ресурсами, прежде чем добавлять их в вашу программу. Затем фотографии включаются в установочный пакет приложения, увеличивая его размер. Хотя это может быть удобно, этот метод может не подойти разработчикам, желающим создать легкое приложение.
Image.network используется для отображения изображений из Интернета. Хотя это может уменьшить размер пакета файла, у пользователя увеличивается время загрузки. Этот метод может быть идеальным для разработчиков, которые отдают предпочтение уменьшению размера приложения для более медленной загрузки начального числа.
Image.file используется для доступа и отображения изображений, хранящихся локально на целевом устройстве. Однако такой доступ приводит к более медленной загрузке для пользователя. Кроме того, многим случаям использования Image.file предшествует метод выбора изображений, что приводит к еще большему увеличению времени начала.
Image.memory может потребовать кодирования и декодирования между базой 64 и несколькими строками разрушающего кода, но это также дает самое быстрое время загрузки.
Я надеюсь, что вы нашли эту статью полезной, научив вас различным способам добавления изображения в ваше приложение Flutter, а также об уникальных преимуществах и недостатках каждого метода.
Весь код, использованный в этой статье (и других статьях), можно найти в моем репозитории GitHub.
Если вы нашли эту статью полезной, нажмите кнопку 👏 и хлопните в ладоши! Подпишитесь на меня, чтобы увидеть больше статей о Flutter и оставить отзывы или комментарии ниже!
