Приложения использующие flutter

Август 7, 2022

Главная
Информатика
Приложения использующие flutter

Содержание

2. Flutter что это и почему это круто магия анимаций и почему они нужны Мобильщик и команда
3. Flutter - инструмент от Google, позволяющий разработчикам писать кроссплатформенные приложения, которые можно запускать на различных системах
4. Интерфейс, бизнес логика, анимации все будет одинаково на разных платформах. Что приводит к сокращению времени разработки
5. Dev tools
6. 1. Запуск анимации в медленном режиме, чтобы можно было точнее ее настроить. 2. Показывает наложение и
7. Приложения использующие flutter
8. Google Pay
9. Ebay
10. 4 pics 1 word
11. Анимации и зачем они нужны
12. Анимация в мобильном приложении преследует ясную, логичную цель. Она сокращает нагрузку на мозг пользователя, не дает
13. Используя анимации можно направлять и акцентировать внимание пользователя на каких-то важных деталях. Пользователь-маленький ребенок которого при
14. Визуальный фидбек Функциональное изменение Ориентация в пространстве Визуальный фидбек свидетельствует о том, что приложение работает правильно!
20. Мобильщик и команда
21. Если в дизайне используется очень много различных оттенков одного цвета это не очень хорошо. Все должно
23. Круто если в постановке есть ссылки на конкретные элементы в дизайне о которых идет речь, примеры
24. При работе с бэкэндом мобильщику нужно понимать тип запроса (get,post,delete) в Swagger это сделано очень удобно(четкая
25. Request Method GET API api/v4/profile/profilePhoto request body Authorization Bearer queryParams profilePhoto?someP=‘param’ json {“name”:’String’, “phone”:String} response body
26. You can resize these icons without losing quality. You can change the stroke and fill color;
27. You can easily resize these resources without losing quality. To change the color, just ungroup the
28. Educational Icons Medical Icons
29. Business Icons Teamwork Icons
30. Help & Support Icons Avatar Icons
31. Creative Process Icons Performing Arts Icons
32. Nature Icons
34. Скачать презентацию

Слайд 2

Flutter что это и почему это круто
магия анимаций и почему они

нужны

Мобильщик и команда

Слайд 3

Flutter - инструмент от Google, позволяющий разработчикам писать кроссплатформенные приложения, которые

можно запускать на различных системах с общей кодовой базой.

Слайд 4

Интерфейс, бизнес логика, анимации все будет одинаково на разных платформах.
Что приводит

к сокращению времени разработки кода(если говорить о написании кода отдельно для каждой платформы)

Огромный потенциал настройки пользовательского интерфейса
Отсутствие зависимости от компонентов пользовательского интерфейса для конкретной платформы

Одна кодовая база

Почему это круто

Слайд 5

Dev tools

Слайд 6

1. Запуск анимации в медленном режиме, чтобы можно было точнее ее

настроить. 2. Показывает наложение и помогает устранить связанные с этим проблемы. 3. Базовые показатели текста. Отображает базовые линии которые используются для выравнивания текста. Полезен когда нужно проверить выровнен ли текст 4. Отображение границ, показывающих перерисовку элементов. Полезно для поиска ненужных перерисовок. 5. Выделяет изображения, которые используют слишком много памяти, инвертируя цвета и переворачивая их.

Слайд 7

Приложения использующие flutter

Слайд 8

Google Pay

Слайд 9

Ebay

Слайд 10

4 pics 1 word

Слайд 11

Анимации и зачем они нужны

Слайд 12

Анимация в мобильном приложении преследует ясную, логичную цель. Она сокращает нагрузку

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

Слайд 13

Используя анимации можно направлять и акцентировать внимание пользователя на каких-то важных

деталях.
Пользователь-маленький ребенок которого при знакомстве с приложением нужно вести за ручку и показывать, обучать важным аспектам приложения.
Не стоит использовать анимацию ради анимации. Если анимация не несет никакой функционально нагрузки от нее лучше отказаться. Ведь такая анимация обычно смотрится странно и раздражает пользователя. Стоит учитывать длительность. Анимация не должна быть зацикленной(за редким исключением, например индикаторы загрузки).

Слайд 14

Визуальный фидбек
Функциональное изменение
Ориентация в пространстве
Визуальный фидбек свидетельствует о том, что приложение

работает правильно! Когда иконка увеличивается или «свайпнутые» изображения двигаются в определенном направлении, становится ясно, что приложение «что-то делает», отвечая на ввод информации пользователем.
Пример Tinder свайп влево-лайк вправо-пропустить

Лучше всего подходит, если нужно проиллюстрировать то, как меняются функции элементов. Чаще всего используется в кнопках, иконках и т.д.

Если мобильное приложение имеет сложную структуру. Задача команды в таком случае – максимально упростить навигацию. Для выполнения этой задачи анимация может быть крайне полезной. Если она покажет где прячется элемент, то в следующий раз пользователю будет проще его найти.

Слайд 15

Слайд 16

Слайд 17

Слайд 18

Слайд 19

Слайд 20

Мобильщик и команда

Слайд 21

Если в дизайне используется очень много различных оттенков одного цвета это

не очень хорошо. Все должно быть унифицировано. Для этого дизайнеры создают «UI Kits». Что упрощает работу и дизайнеру и мобильщику. Лучше воздержаться от постоянного добавления новых цветов или текстов, а сформировать какой-то стандарт, который будет использоваться в приложении и при редизайне, в таком случае не возникнет проблем и не займет много времени. Т.к. мобильщику нужно будет просто поменять пару параметров. Например при изменении в дизайне цвета (0xFF121212) на цвет (0xFF666666) со стороны мобилки нужно будет изменить лишь одну строку в репозитории цветов. И во всем приложении где использовался цвет (0xFF121212) автоматически заменится на (0xFF666666) . Это-же правило должно действовать и на другие элементы дизайна.

Слайд 22

Слайд 23

Круто если в постановке есть ссылки на конкретные элементы в дизайне

о которых идет речь, примеры запроса и ответа от сервера при вызове каких-то API (например в виде таблиц). Тогда работа будет идти быстрее т.к. не нужно будет отвлекаться на Swagger для того чтобы сделать запрос и получить пример модельки в ответе(json моделька нужна для того чтобы подготовить класс отвечающий за получение инфы с бэка и подготовку её для мобилки) или поиск элемента который нужно отверстать в Figma(нужно будет просто перейти по ссылке и посмотреть все нужные параметры для верстки: размеры, цвета, шрифты и т.д.). И тогда работа будет идти последовательно (отрисовал экран, диалоги используемые на экране?подключил сервис?повторил) Что нужно мобильщику: 1) Что взять/что запросить(с бэка) 2) Где взять 3) Как использовать(что нужно конкретно с этим делать)

Слайд 24

При работе с бэкэндом мобильщику нужно понимать тип запроса (get,post,delete) в

Swagger это сделано очень удобно(четкая градация цветов в зависимости от типа запроса).В постановке так-же можно выносить тип запроса отдельно от curl’а. Что-бы было сразу понятно какой метод закладывать при вызове API. Нужно знать что конкретно ожидает бэк(какую модельку ожидает сервер при попытке обработать запрос) Для этого делают примеры запроса в постановке. В которых указывается что конкретно ожидает бэк. FormData или же просто queryParams. Там обычно описывается дополнительно каждое поле что-это и какой у него тип данных (String,int). Нужно знать что конкретно отдает бэк, какие могут быть ошибки и как их обрабатывать(если они не стандартные и не закладываются при построении нового приложения). Какое тело ответа отдает бэк так-же описывается в постановке по аналогии с телом запроса(какая json модель приходит и какие типы данных она возвращает)

Слайд 25

Request Method GET API api/v4/profile/profilePhoto request body Authorization Bearer queryParams profilePhoto?someP=‘param’ json {“name”:’String’,

“phone”:String} response body json {“photoLink”:’String’}

Слайд 26

You can resize these icons without losing quality.
You can change the

stroke and fill color; just select the icon and click on the paint bucket/pen.
In Google Slides, you can also use Flaticon’s extension, allowing you to customize and add even more icons.

...and our sets of editable icons

Слайд 27

You can easily resize these resources without losing quality. To change

the color, just ungroup the resource and click on the object you want to change. Then, click on the paint bucket and select the color you want. Group the resource again when you’re done. You can also look for more infographics on Slidesgo.

Use our editable graphic resources...

Слайд 28