Добавление ресурсов в приложении | Flutter22.02.2024 11:45

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

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

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

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

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

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

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

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

Использование файла pubspec.yaml

Проблема

Вы хотите понять, что представляет собой файл 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 выглядит следующим образом:

Поле

Описание

Name

Наименование приложения

Description

Общий обзор приложения

Environment

Ограничения SDK

Dependencies

Зависимости пакетов

Flutter

Общие ресурсы для приложения

Если вам действительно нужно внести изменения в отношении пакетов, я лично рекомендую использовать командную строку для запуска команды 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 для нового контента, поэтому используйте это, чтобы свести к минимуму работу, необходимую для добавления новых ресурсов.

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

  1. Создайте новую подпапку в корневом каталоге приложения. Например, для приложения sample_app это будет: sample_app/assets.

  2. В папке assets создайте новый подкаталог для изображений. Результирующая структура папок должна быть такой: sample_app/assets/images.

  3. Скопируйте необходимые изображения в новую папку images.

  4. Обновите 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 мы поместили файл изображения с именем img.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/img.png'),
		);
	}
}

Обсуждение

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

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

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

Включение пакета Google Fonts

Проблема

Вы хотите добавить пакет для использования внешних шрифтов в приложении 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 сообщат вам, если вы сделаете это неправильно, но ошибиться легко. Более надежный метод — использовать командную строку для импорта новых пакетов, так как они автоматически будут правильно выровнены.

© Habrahabr.ru