Всем доброго дня!
Меня зовут Алексей, я Flutter разработчик. Здесь первая статья, в которой я описал одну из сложностей, с которыми столкнулся в ходе разработки - создавать или не создавать свои виджеты.
В этой статье я хочу рассказать об опыте применения ассетов (assets), а именно картинок для web приложения написанного на фреймворке Flutter.
Все изображения (иконки, например) в Flutter проекте - это, как правило, png
картинки, которые добавляются в папку assets/icons
в корне проекта. После этого, чтобы компилятор "знал" о наших картинках, необходимо прописать зависимости в pubspec.yaml
:
...
flutter:
uses-material-design: true
assets:
- assets/icons/
...
В самом коде картинки выставлять можно как угодно. Я написал для себя геттер, который отдавал мне ту или иную картинку:
extension StatusIcon on Request {
Widget? get requestStatusIcon {
if (status == RequestStatus.received) {
return Image.asset(
'icons/request_status/received.png',
);
}
if (status == RequestStatus.inProgress) {
return Image.asset(
'icons/request_status/in_progress.png',
);
}
// и так далее, аналогично отдавал нужные картинки
}
}
Но после сборки проекта и выгрузки на сервер ни одна картинка не отображалась на странице.
Чтобы понять в чем дело, нудно открыть консоль браузера (например, Google Chrome) и станет сразу понятно, что браузер не знает где взять эти самые картинки (хотя они и есть на сервере). Об этом будут свидетельствовать ошибки.
Чтобы такого не происходило, нужно прописать информацию о картинках ещё в нескольких местах, а именно:
Открываем файл
web/index.html
и добавляем описание ваших картинок в него:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Content">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Content">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Ниже указываем все кастомные картинки которые используются в проекте, из разрешение и пусть к ним -->
<link rel="icon" type="image/png" sizes="512x512" href="icons/request_status/received.png">
<link rel="icon" type="image/png" sizes="512x512" href="icons/request_status/inProgress.png">
<!-- и так далее... -->
<!-- Дальше идет код стандартный для index.html файла Flutter проекта -->
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="loader.css">
<title>SomeTitle</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
// ...
</body>
</html>
Открываем далее
web/manifest.json
и добавляем следующий код:
{
"name": "Name",
"short_name": "Name",
"start_url": ".",
"display": "standalone",
"background_color": "#0175C2",
"theme_color": "#0175C2",
"description": "Description",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
// прописываем место расположения картинки и размер
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "icons/request_status/inProgress.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "icons/request_status/received.png",
"sizes": "512x512",
"type": "image/png"
},
// ... и так далее по всем картинкам которые есть
]
}
Снова собираем проект и выгружаем на сервер. И вот теперь картинки будут загружаться!
Спасибо за прочтение! Буду благодарен за критику/советы/иные комментарии.