Добавление ресурсов в приложение | Flutter

Привет, если вы на пути изучения Flutter/Dart или вам просто интересно почитать про разработку подписывайтесь на мой канал в telegram, буду рад вас видеть! А сегодня поговорим про ассеты во Flutter!

Предыдущая статья: Введения в Flutter Framework

Содержание:
- Использование файла pubspec.yaml
- Добавление папки с ресурсами
- Ссылка на изображение
- Включение пакета Google Fonts
- Импорт пакета

В этой статье мы рассмотрим добавление ресурсов в ваше приложение Flutter. Во многих случаях вам захочется разместить ресурсы локального приложения. К счастью, Flutter включает простой механизм для достижения этой цели с помощью файла pubspec.yaml.

Вы узнаете, как:
• Создайте папку ресурсов
• Ссылайтесь на изображение
• Ссылайтесь на папку изображений
• Ссылайтесь на изображения в вашем приложении
• Добавьте шрифты в ваше приложение
• Импортируйте пакет

Использование ресурсов - это еще один шаг на пути к пониманию среды Flutter. Исходя из личного опыта, я всегда забываю, как добавлять изображения, поэтому, надеюсь, это спасёт вас от моего личного ада.

Добавление ресурсов обеспечивает хороший способ повторного использования компонентов, который легко расширяет общую функциональность вашего приложения. В конце этой главы у вас должно быть достаточно опыта, чтобы без особых усилий выполнять все задачи, упомянутые выше, на вашем будущем пути разработки Flutter.

Проблема

Вы хотите понять, что представляет собой файл pubspec.yaml и как его лучше всего использовать при разработке в Flutter.

Решение

Файл pubspec.yaml предоставляет файл централизованного управления для среды Flutter. В файле содержится ряд настроек, которые включают используемую версию SDK, зависимости, расположение ресурсов и название приложения.

Вот пример файла pubspec.yaml:

name: sample_app description: A new Flutter project. publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: '>=2.18.2 <3.0.0' dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^2.0.0 # The following section is specific to Flutter packages. flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700

Обсуждение

В примере файла pubspec.yaml вы увидите настройки, связанные с приложением Flutter. Файл является файлом YAML, что означает, что используемое форматирование важно, поэтому будьте осторожны при добавлении/изменении записей.

Общий формат pubspec.yaml выглядит следующим образом:

Если вам действительно нужно внести изменения в отношении пакетов, я лично рекомендую использовать командную строку для запуска команды flutter pub add [package], поскольку это может быть использовано для корректного обновления файла YAML. Это также может быть полезно, если вам нужно удалить пакет, например, flutter pub remove [package].

Когда вам нужно обновить зависимости, используйте команду flutter pub get для ссылки на pubspec.yaml и обновления по мере необходимости. Примечание: вышеупомянутый flutter pub [option] имеет эквивалентный dart pub [option].

Проблема

Вы хотите добавить папку assets для размещения информации, которая будет использоваться в вашем приложении Flutter.

Решение

Добавление новой папки в Flutter требует, чтобы вы добавили новый каталог в существующую папку, содержащую ваше приложение Flutter. Flutter по умолчанию использует [APP]/assets для нового контента, поэтому используйте это, чтобы свести к минимуму работу, необходимую для добавления новых ресурсов.

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

Создайте новую подпапку в корневом каталоге приложения. Например, для приложения sample_app это будет: sample_app/assets.
В папке assets создайте новый подкаталог для изображений. Результирующая структура папок должна быть такой: sample_app/assets/images.
Скопируйте необходимые изображения в новую папку images.
Обновите pubspec.yaml, чтобы он ссылался на созданный каталог assets/images:

flutter: uses-material-design: true assets: - assets/images/

Обсуждение

В предыдущем примере среда была обновлена, чтобы использовать папку ресурсов для изображений. При загрузке изображений Flutter попытается быть полезным с точки зрения предположений о местоположении используемых изображений. Лично я использую полный путь, чтобы избежать появления страшного сообщения об ошибке “не удается найти изображение”. Имейте в виду, что механизм доступа для платформы отличается, поэтому вы можете столкнуться с некоторыми несоответствиями.

Также обратите внимание на тонкий нюанс между использованием переменной (часть вашего кода) и использованием папки assets (часть ваших данных). В следующем примере вместо доступа к изображению мы используем папку assets для размещения файла JSON. Манифест pubspec.yaml будет обновлен, как показано ниже:

flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: assets: - assets/example.json

Файл теперь доступен в вашем приложении и может быть изменен независимо от кода Flutter, используемого для доступа к нему. Чтобы получить доступ к ресурсу, объявленному в файле pubspec.yaml, используйте объект AssetBundle.

Проблема

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

Решение

Для добавления изображения ресурса в ваше приложение требуется указать путь к отображаемому изображению. Чтобы получить необходимое изображение, рассмотрите возможность использования пути к изображению, чтобы убедиться, что местоположение используется правильно.

В нашем примере папки assets/images мы поместили файл изображения с именем greentile.png. Вот пример того, как отобразить этот файл изображения с помощью Flutter framework:

import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { const title = 'Image Asset demo'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: const MyImageAssetWidget(), ), ); } } class MyImageAssetWidget extends StatelessWidget { const MyImageAssetWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Center( child: Image.asset('images/green-tile.png'), ); } }

Обсуждение

В примере код демонстрирует, как ссылаться на изображение, расположенное в папке application assets. Ссылка на изображение указана как находящееся во вложенной папке images, поэтому к нему добавляется префикс label images.

При добавлении изображений в приложение убедитесь, что вы перезапустили приложение (т.е. остановили, затем запустили), прежде чем пытаться получить доступ к элементам ресурсов. Запущенное приложение включает состояние приложения за вычетом новых ресурсов; следовательно, оно не сможет получить доступ к элементам, которые ранее были недоступны. Чтобы правильно ссылаться на добавляемые новые ресурсы, вам необходимо полностью перезапустить приложение.

Flutter предполагает, что ресурсы, такие как изображения/шрифты, расположены в папке assets. Если вы собираетесь использовать альтернативное расположение для своих изображений за пределами папки assets, вам нужно будет использовать полный путь, связанный с файлом.

Проблема

Вы хотите добавить пакет для использования внешних шрифтов в приложении Flutter.

Решение

Flutter позволяет вам включать внешние шрифты как часть вашего приложения. Вот как добавить пакет Google Fonts в файл Flutter pubspect.yaml:

. . . dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 google_fonts: 2.2.0

Обсуждение

Чтобы найти информацию о доступных пакетах, лучше всего начать с сайта pub.dev. Сайт pub.dev - это общий веб-сайт, предназначенный специально для доступа к ресурсам, которые будут использоваться с Flutter и Dart. Вы можете узнать, как использовать конкретный пакет, просмотрев инструкции на сайте, которые обычно содержат такую информацию, как инструкции по установке, обзор разработчика и поддерживаемые платформы (например, iOS, Android, web). Существуют некоторые общие предположения относительно размещения и сделанных обновлений, поэтому стоит ознакомиться с тем, как интегрировать внешний пакет в ваше приложение.

Одно из мест, где люди приходят в замешательство, - это добавление в раздел зависимостей pubspec. Обновляемый раздел зависит от того, какую запись вы собираетесь внести. Что касается добавления шрифтов, в дополнении уже есть запись для шрифтов Cupertino, поэтому в данном случае вы можете просто добавить запись Google Fonts под этим параметром.

Проблема

Вы хотите включить функциональность, полученную из библиотеки.

Решение

Используйте пакет для включения ранее существовавших функциональных возможностей в приложение Dart. Инструкции Import позволяют использовать внешние пакеты в приложении Dart. Чтобы использовать пакет в приложении, используйте инструкцию import для включения библиотеки.

В Dart есть многофункциональный набор библиотек, которые представляют собой пакеты кода для конкретной задачи. Эти библиотеки опубликованы на таких сайтах, как pub.dev. Используйте репозиторий пакетов для поиска и импорта пакетов для конкретной задачи, чтобы сократить время разработки.

Вот пример того, как использовать импорт в Dart:

import 'dart:math'; void main() { // Generate random number between 0-9 int seed = Random().nextInt(10); print ('Seed: $seed'); }

Обсуждение

В предыдущем примере кода мы импортируем библиотеку dart:math. Dart использует менеджер пакетов pub для обработки зависимостей. Командная строка поддерживает загрузку соответствующего пакета. Некоторые IDE также предоставляют возможность загружать информацию. В показанном примере dart:math поставляется в комплекте с SDK, поэтому для него не требуется добавлять дополнительные зависимости.

Если используется внешний пакет, необходимо определить файл pubspec.yaml для указания информации об этом пакете. Файл pubspec.yaml - это метаданные об используемой библиотеке. Файл использует формат YAML и позволяет последовательно перечислять зависимости. Например, пакет google_fonts будет использовать следующее объявление в определении pubspec.yaml:

dependencies: google_fonts: ^2.1.0

В исходном коде Dart оператор импорта может затем ссылаться на пакет:

import 'package:google_fonts/google_fonts.dart';

Pubspec.yaml - это скрипт, основанный на позиционировании, поэтому код должен быть помещен в определенный столбец, чтобы он работал. Большинство сред Flutter / Dart сообщат вам, если вы сделаете это неправильно, но ошибиться легко. Более надежный метод - использовать командную строку для импорта новых пакетов, так как они автоматически будут правильно выровнены.