IT-инфраструктура для бизнеса и творчества
Разработка
топ топ

Приложение со звуками на Flutter

Привет, хотел рассказать насколько легко в наше время можно делать приложения на мобилки.
Я перешел с нативной разработки под android на Flutter и теперь хочу поделиться своим опытом и своими эмоциями с читателями.
Моё желание делать проекты пересилило полное изучение Flutter, и поэтому я сразу решил сделать приложение. Идея проста - нужно дать доступ к любым звукам на земле (конечно, пока их не так много, но перспективы есть). А если просто - сделать приложение со звуками)

Чуть-чуть о дизайне
Проект я начал с разработки дизайна (расскажу очень кратко, а потом поговорим про разработку)
Вот мои готовые экраны:

Главное меню и меню со звуками Wenamed

Делал я этот дизайн около 3х дней, так как в нём всё очень продумано: например, на главном экране иконки расположены по смыслу, по значению и по цвету (градиент сверху вниз), а в меню звуков всё сделано очень удобно и просто, можно даже включать несколько звуков одновременно (но у некоторых это не работает). Также в главном меню фишка с формами, выглядит необычно.
А вот икона приложения:

Иконка приложения Wenamed

Согласитесь сразу всё понятно: Планета и звуковые волны вокруг неё - звуки со всей планеты)


Разработка на Flutter

С нуля, без особых знаний, я сделал такой простой проект за 3 дня, сразу на две платформы и без каких либо усилий) Верстать одно удовольствие. Встречались, конечно, затыки, но есть замечательные группы в телеграмме и много других источников, где можно быстро понять свои ошибки.
Проблемы наверно начались, когда я попытался освоить RxDart и BLoC архитектуру, это довольно важные вещи, но это совершенно не касается проблем Flutter. А вот что касается, так это например то, что много библиотек из нативной разработки попросту еще не написаны на Flutter и приходится выдумать свои решения, что очень затормаживает разработку.
(Пока что я еще не пробовал нейронные сети и AR, но как мне кажется лучше разрабатывать их нативно, тем не менее скоро я проверю всё это на flutter)
Этот пост для тех, кто только начинает разрабатывать на Flutter и думает стоит ли ему углубляться дальше) Мой ответ - стоит. Я даже сейчас отправлю кучу ссылок, которые помогли мне освоить Flutter, вам это будет полезно:
1. Гайд по флатеру - must have
2. Гайд с Metanit по Dart и Flutter
3. Уроки с ютуба по флатеру - посмотреть обязательно весь плейлист, там много важного

В принципе я посмотрел это всё за неделю, не торопился и сейчас очень доволен результатом) Буду продолжать изучать дальше, а если вам интересно узнать больше о моих проектах, о моих мыслях и о новостях айти, то прошу в мой телеграмм канал @wenamed. Открыт для сотрудничества.
Готовое приложение можно затестить в Google Play, тык
Всем хорошего дня и настроения :)

{ "author_name": "топ топ", "author_type": "self", "tags": ["startup","productdesign","mobile","flutter","design","android"], "comments": 9, "likes": 9, "favorites": 41, "is_advertisement": false, "subsite_label": "dev", "id": 147711, "is_wide": true, "is_ugc": true, "date": "Wed, 05 Aug 2020 19:01:01 +0300", "is_special": false }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ // { // name: 'camera', // url: `${cdnUrl}CameraCat`, // text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', // link: '1', // }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', }, // { // name: 'cloud', // url: `${cdnUrl}CloudCat`, // text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', // link: '3', // } ] let buttonCycle = document.querySelector('.button--cycle') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?5' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?5' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите почитать?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
9 комментариев
Популярные
По порядку
Написать комментарий...

Сложновато читать: похоже на поток несвязанных мыслей. Но идея прикольная.

2

ток начинаю, обращу на это внимание)

0

Я понял, что это знакомство с приложением, а не гайд)

0

Когда будет на IOS?

1

Скоро) 

0

Эх, приложили ссылки на обучающие ресурсы, а на самый главный и исчерпывающий нет. Официальная дока: flutter.dev

0

конечно) Но подразумевается, что все это знают
я оставил лишь на те, которые не очень банальные 

1

Верстали в чем?

0

в Android Studio с Flutter

0
Читать все 9 комментариев
Увидеть первые Apple, сделать копию на ксероксе и потрогать мышку: как в Минске-88 прошла выставка «Информатика в США» Статьи редакции

Выставка стала потрясением для жителей: это было похоже на фильм «Назад в будущее», который на выставке тоже показывали, рассказывает dev.by. Издание поговорило с экс-гидом той выставки и минчанами, которые до сих пор хранят значки с её логотипом.

Почему кейс с хомяком - не ошибка выжившего и не случайность

Сегодня Интернет облетела новость о том, что хомяк, бегая по своей клетке, заработал +29% на крипте. В комментария к публикации на VC многие писали, что это ошибка выжившего и просто случайность, которая ни о чем не значит. Я же постараюсь объяснить, почему это закономерность, и как сделать так, чтобы ваш кот/собака/рыбка показали такой же…

Как традиционному малому бизнесу превратиться в стартап: план действий

Сейчас в России предприниматели переходят из традиционного малого бизнеса в стартапы очень редко — меньше чем в 0,02% случаев. Это не больше 1 000 стартапов из около 6 млн предприятий малого бизнеса. Поговорим о том, что мешает предпринимателям и как действовать, если есть желание создать стартап.

Ситимобил снял 5547 рублей за поездку в 36 км по городу

Всем доброго времени суток. Перед написанием этой статьи нашёл аналогичные, оказывается, что я далеко не первый. Жаль раньше не видел. Понимаю, что моя вина в ситуации тоже есть, но тут скорее о том, как Ситимобил относится к своим клиентам.

Облажались с аудиторией и производством в Китае, но вышли на 55 млн рублей за 2020 год: история ошибок компании Atmeex

Мы начали производить и продавать приборы по очищению воздуха в конце 2019 года. Первое время всё шло наперекосяк, но мы переосмыслили все процессы и за год увеличили выручку в 2 раза.

В отдельном помещении мы тестируем устройства на брак
Готовы выбрать победителя премии «Экспортер года eBay — 2021»?
Как мы проводили командную ретроспективу в Minecraft

Рассказываем историю, на что стоит обратить внимание при проведении командного мероприятия в игре Minecraft, какие грабли могут быть, как организовать онлайн- и офлайн-участие.

Хомяк-криптотрейдер заработал 30% за три месяца в «клетке для торговли» — обойдя Уоррена Баффета и S&P 500 Статьи редакции

Мистер Гокс занимается торговлей криптовалютой с 12 июня.

Нужны ли в России сити-фермы

И появятся ли грядки на крышах пятиэтажек.

re-thinkingthefuture.com
Прошел финал программы скаутинга в киберспорте Winstrike

Итоги программы Winstrike Scouting powered by UltraGear

Я скрестил «Трибуну» и Product Hunt

Теперь вы никогда не пропустите самые перспективные русскоязычные стартапы.

null