Для развития сервиса GarderoB появилась необходимость создания мобильной версии. Основной функционал уже определен и отработан в Desktop версии. Для разработки мобильной версии сайта был выбран Flutter, как перспективный кроссплатформенный фреймворк.

Для начала необходимо сверстать главную входную страницу, которая будут схожа с Desktop версией.

Desktop версия главной страницы выглядит так:

После изучения материалов по Flutter и с учетом особенностей дизайна в мобильной верстке, был создан такой макет главной страницы:

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

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

Используется редактор кода Visual Studio Code, тестовая среда - браузер Google Chrome

строка №5

debugShowCheckedModeBanner: false, // отключает надпись DEBUG

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

строка №6

title: 'GarderoB+1', // выводит название на вкладке страницы браузера

По умолчанию на вкладке страницы выводится название проекта, которое указано при его создании в среде редактора. Так как название страницы может отличаться от названия проекта, то можно использовать такой вариант.

строка №14

fontFamily: 'Roboto',

Задается тип используемого шрифта для создания текста. Чтобы подключить использование определенных шрифтов необходимо их предварительно загрузить в проект. Для этого можно создать в каталоге проекта папку "assets" и в ней папку "fonts", где и будут размещены файлы загруженных шрифтов:

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

строка №26

image: AssetImage( "assets/images/complect.png" ),

Схема включения изображений в проект чем-то схожа со схемой подключения шрифтов. В рассматриваемой строке подключается фоновое изображение страницы.

Файлы изображений можно загрузить в папку "images", которую можно создать в том же каталоге "assets", что использовался при загрузке шрифтов.

Далее, открываем известный файл pubspec.yaml в каталоге проекта, и прописываем в нем соответствующие изображения, которые будем использовать, с указанием расположения файлов, если избражений много, то достаточно указать каталог:

Удачи в разработке!