С чего начать изучать flutter
Основы Flutter для начинающих (Часть I)
Вступление
Добрый день всем желающим познакомиться с Flutter!
У меня появилось горячее желание поделиться с вами моими знаниями, которые я накопил за несколько месяцев.
Возможно мой опыт совсем мал по сравнению с гуру программистами, я все же попытаюсь сделать что-нибудь полезное для вас.
Результатом нашей работы будет небольшое Flutter приложение, которое будет брать данные из JSONPlaceholder.
Ну что ж, приступим.
Затем устанавливаем редактор или IDE по инструкции Set up an editor
Я буду использовать Android Studio IDE от Google.
Для разработки на Android Studio нужно установить Flutter плагин (в инструкции Set up an editor, описано как это сделать).
Выбираем Flutter Application
Далее указываем название приложения (имя Flutter приложения должно иметь нижний регистр, отдельные слова могут разделяться нижним подчеркиванием).
Затем указываем package name (используется для того, чтобы идентифицировать наше приложение среди других в Google Play или Apple Store, его впоследствии можно будет изменить, более подробно об Android Application ID или об Apple App ID):
Очищаем main.dart файл от ненужного кода:
Затем создаем пакет (код должен быть всегда огранизован, дабы сделать его понятнее):
Называем его pages:
Затем создаем в пакете файл home_page.dart:
И реализуем нашу первую страницу:
Ну что ж, пора испытать наше приложение.
Не забудьте импортировать HomePage в main файл:
Важный момент: старайтесь использовать относительный путь, когда импортируете файлы своего проекта, вместо подобного:
По моему небольшому опыту могут возникнуть проблемы, когда вы захотите поменять имя приложения в pubspec.yaml файле (pubspec.yaml находиться в корневой директории проекта):
Если вы уже используете подобные импорты, это не критично, имя приложения всегда можно будет поменять отдельно для iOS или Android.
Переходим к запуску, выбираем устройство на котором будет выполняться приложение (в данном случае я использую реальное устройство, мой Honor 30i), и нажимаем Run:
Если вас раздражает надпись DEBUG в правом верхнем углу, то её можно убрать:
Также обратите внимание, когда вы запустите приложение, вы можете использовать hot reload:
Hot Reload позволяет буквально за 2-5 секунд внести изменения, когда ваше приложение выполняется.
Это довольно приятная опция, которая ускорит вашу разработку.
При каждом вызове Hot Reload происходит перезапуск build функции. (вся иерархия виджетов перестраивается)
Будьте внимательны: не во всех ситуциях Hot Reload срабатывает и изменения отражаются в приложении, поэтому в таких ситуациях нужно перезапускать приложение полностью.
Также есть довольно интересный факт: размер отладочного приложения на Flutter с одним экраном, которое мы только что создали:
Этого бояться не стоит, т.к. release Flutter приложения будет весить гораздо меньше.
Отладочное приложение содержит много дополнительной информации, а также к этому добавляется поддержка Hot Reload.
Состоянием можно считать набор переменных и данных в определенный момент времени, которое впоследствии может быть изменено.
Ну что ж попробуем реализовать небольшую анимацию которая будет запускаться по кнопки:
Та дам! Выглядит здорово!
Заключение
Статья получилась достаточно информативной и по моему мнению полезной для новичков.
Надеюсь, что это статья принесла вам пользу и вы не закидаете меня тухлыми помидорами))
С чего начать изучение Flutter в 2021 году
Как и многие мобильные разработчики, мы с нетерпением ждали презентации Flutter и теперь хотим поделиться с читателями Хабра переводом статьи Tadas Petra о том, как можно выстроить свое обучение, если вы хотите познакомиться с Flutter и кроссплатформенными приложениями в 2021 году. Кстати, мы подключились к созданию курса Flutter, и об этом тоже расскажем в конце статьи. Приглашаем прочитать или посмотреть видеоверсию!
2021 год обещает быть очень важным для Flutter. Комьюнити разработчиков продолжает стремительно расти, а 3 марта 2021 года состоялась презентация Flutter Engage. Это делает потенциал Flutter поистине огромным.
Однако, чем более популярным становится фреймворк, тем больше людей хотят его “пощупать” и иногда не знают, с чего же, собственно, начать? В данной статье автор постарался создать roadmap и описать несколько ресурсов, которые могут быть полезны для вас.
Кстати, здесь можно посмотреть видеоверсию материала на английском, а если вы предпочитаете читать, то давайте продолжим.
Основы
Преимущество Flutter – возможность разрабатывать приложения без значительных усилий. Однако, иногда это влечет определенные проблемы, если разработчик уделяет недостаточно внимания коду, который пишет.
Перед началом погружения в Flutter стоит вспомнить принципы ООП, в частности, на примере Dart. Вероятно, этот способ будет для вас удобен, если вы переходите на Flutter с языков вроде C++ или JavaScript. Так, у меня ушло всего пару дней на то, чтобы привыкнуть к его синтаксису. После этого можно перейти к непосредственному изучению фреймворка.
Учебные ресурсы
Для меня документация – первый шаг к изучению чего-либо, включая Flutter. Команда Flutter сфокусирована на обеспечении высокого качества документации, поэтому загляните сюда в первую очередь в случае любых проблем.
Codelabs от Google разрабатываются и дорабатываются командой Flutter. Можно быть уверенными в их качестве и актуальности материала. Также это хорошая отправная точка в изучении Flutter на практике.
Для меня это самый важный ресурс для изучения всего нового. Поделюсь несколькими каналами, которые я использую:
Free code camp – это одна из самых больших площадок для онлайн-обучения программированию. Уверен, со временем у них будет появляться все больше нового контента. Сейчас у них есть несколько видеокурсов по Flutter, включая мой.
Одним из лучших курсов по Flutter я считаю курс от Angela Yu. Сам я его не проходил, но слышал очень лестные отзывы о нем. Он имеет рейтинг 4.7 и более 90000 студентов на Udemy, что говорит о его качестве. Помимо Flutter, в его программу входит также изучение темы ООП и его принципов: инкапсуляции, наследования и полиморфизма.
Это отличный GitHub-репозиторий, который содержит огромное количество ресурсов по Flutter.
Присоединяйтесь к сообществу
Хотя это непрямой способ изучения Flutter, я думаю, что если вы станете частью сообщества, это поможет вам вырасти как разработчику и познакомиться с новыми друзьями, которые способны помочь вам. Например, большое комьюнити разработчиков есть в Twitter, и я предлагаю свою версию списка важнейших Flutter-разработчиков.
Изучайте на практике
Важное напоминание: выше перечислены ресурсы для изучения фреймворка. Однако, на мой взгляд, разработка – это лучший способ научиться. Как только вы освоите основы, сразу приступайте к разработке приложений, закрепляя полученные знания на практике. В случае возникновения проблем посмотрите перечисленные ресурсы и попробуйте решить задачу с их помощью. При этом изучение на практике гораздо эффективнее пассивного чтения.
Вот несколько приложений, которые вы можете создать для практики:
Примечание: кстати, к этому списку можно добавить и другие идеи – например, лента новостей, помощь в выборе сериалов или мониторинг криптовалют (15 проектов на Flutter с разбором для новичков и не только).
Если вам удастся реализовать данные приложения и они будут правильно работать – вы на пути к тому, чтобы стать хорошим разработчиком. После этого важно сфокусироваться на качестве и эффективности кода, улучшении его работы в различных аспектах.
Хороших проектов всем! Пусть 2021 станет отличным годом для Flutter. Посмотреть другие полезные материалы @tadaspetra можно на всех платформах, включая YouTube.
Flutter как один из ключевых инструментов кроссплатформенной разработки хорошо подходит для тех случаев, когда нужно ускорить выпуск приложения или создать MVP для проверки гипотез. У нас разработчики используют как нативные технологии, так и кроссплатформенные и обмениваются опытом внутри команды.
По нашим наблюдениям, для качественного погружения в Flutter важен комплексный подход – непосредственно разработка, создание интерфейсов и анимаций, особенности взаимодействия с нативными модулями. Такой подход мы используем на наших внутренних курсах SimbirSoft.
Также в этом году поделимся опытом с начинающими специалистами. По приглашению онлайн-университета Skillbox мы приняли участие в разработке нового дополненного курса Flutter и профессии разработчика кроссплатформенных приложений. Для этого мы записали блок лекций по нативным модулям и популярным архитектурам. Надеемся, что курс будет полезен разработчикам, и желаем успехов будущим коллегам!
Про Flutter, кратко: Основы
После доклада Юры Лучанинова, я решил для себя попробовать Flutter. Чтобы мозг размять, и чтобы было о чем похоливарить с мужиками на кухне. Дело пошло. Я начал смотреть, потом читать, потом писать. И вроде все получается, приложения запускаются, и то что объясняют — понятно, все просто. Но не без “но” — объясняют не все. А поскольку платформа, ЯП, подходы и даже предметная область для меня новые, то подобное вызывает раздражение, ведь у тебя “не запускается”, а ты даже не знаешь что гуглить: Dart/Flutter/Window/Screen/Route/Widget?
Перечитывать всю документацию Dart, Flutter и его виджетов конечно же не хотелось, ведь времени у меня не много, и мне лишь хотелось присмотреться к Flutter. Вот было бы здорово, если бы был небольшой гайд, в котором описано все нужное, но не больше, для понимая и написания не слишком сложных приложений на Flutter!
Про гайд
Большинство статей по этой теме хорошо написаны и не являются сложными. Проблема заключается в том, что большинство из них предполагают наличие знаний считающихся базовыми основами, которые, тем не менее, не упоминаются в других статьях описывающих основы. В данной серии статей я хочу исправить эту ситуацию. Начнем с нуля и, не оставляя ничего из упомянутого без внимания, запустим одно или несколько приложений. В процессе научимся пользоваться всеми основными компонентами, создавать уникальный интерфейс, работать с нативными модулями, и, конечно же, собирать свое приложение под обе платформы.
Писать я буду с перспективы веб-разработчика. Большинство из вас скорее всего знакомо со стэком веба, а аналогия со знакомой платформой лучше аналогии с постройкой домов или чего там еще, Animal, Dog, Foo, Bar…
Излагаться постараюсь кратко, чтобы не затягивать. А для самых любознательных буду оставлять полезные ссылки по обсуждаемым темам.
Про платформу
Flutter — молодая, но очень многообещающая платформа, уже привлекшая к себе внимание крупных компаний, которые запустили свои приложения. Интересна эта платформа своей простотой сравнимой с разработкой веб-приложений, и скоростью работы на равне с нативными приложениями. Высокая производительность приложения и скорость разработки достигается за счет нескольких техник:
О практической пользе этих факторов я очень рекомендую прочитать статью Android разработчика, который переписал свое приложение с Java на Dart и поделившегося своими впечатлениями. Сюда я лишь вынесу названное им количество файлов/строк кода до (написанное на Java) — 179/12176, и после (переписанное на Dart) — 31/1735. В документации можно найти подробное описание технических особенностей платформы. А вот ещё ссылка, если интересно посмотреть другие примеры работающих приложений.
Про Dart
Dart — язык программирования на котором нам предстоит писать приложения под Flutter. Он очень прост, и если у вас есть опыт работы с Java или JavaScript, вы быстро его освоите.
Я пытался написать обзорную статью о Dart, стремясь описать лишь необходимый минимум для изучения Flutter. Но в этом языке столько нюансов, что несмотря на несколько попыток написать такую статью, у меня так и не удалось сделать ее достаточно полной и в то же время короткой. С другой стороны, авторы A Tour of the Dart Language отлично справились с этой задачей.
Про подготовку
Эта тема, как и Dart, очень хорошо описана в официальном гайде. Я мог бы разве что скопировать ее сюда, но делать этого не стану.
Ничего не дожидаясь, идем на страницу гайда по установке, выбираем платформу и по шагам выполняем инструкцию для установки платформы на нашу систему. В своем редакторе обязательно подключаем плагины. В том же гайде есть инструкция по настройке VS Code и IntelliJ. Для вашего редактора тоже найдутся плагины для Dart и Flutter (обычно нужно ставить два). Запускаем приложение и проверяем его работоспособность.
Подсказка для пользователей OSX. Мне жалко места занимаемого нарисованными рамками телефона в эмуляторе iOS, поэтому я их отключил и переключился на iPhone 8 (он не такой “длинный”):
iPhone 8 & iPhone X с рамками
iPhone 8 & iPhone X без рамок
Про структуру
Зайдем в папку со сгенерированным приложением и разберемся что у нас там есть. Не со всем, но с нужным:
Про виджеты (Hello World здесь)
Во Flutter’е все построено на Widget’ах: тут и вьюшки, и стили с темами, и состояние в виджетах хранится. Есть два основных типа виджетов: со стейтом и без, но пока не об этом. Давайте с простого.
Удаляем все из main.dart. Вставляем следующий код внимательно вчитываясь в комментарии:
Уже запустили приложение? “Hello, World!” вывелся! Вроде бы… Да? Но что-то явно пошло не так.
Текст перекрыт системной информацией. В нашем распоряжении все пространство экрана, и мы вывели виджет в самом его начале, где в том числе выводится системная информация. Давайте попробуем куда-то подвинуть наш текст.
Композиции виджетов используются в Flutter для отрисовки UI, изменения внешнего вида, и даже для передачи данных. К примеру виджет Directionality(…) задает направление текста для всех дочерних виджетов:
Посмотрим на еще один очень важный виджет и заодно преобразим внешний вид нашего приложения:
Color(…) — цвет. В документации указаны разные способы его задания, но основным является просто передача числа в конструктор класса. В примере выше мы передаем конструктору число, записанное в шестнадцетиричной форме, что очень похоже на HEX, только вначале у нас добавилось еще два знака, означающих степень прозрачности цвета, где 0x00 — это абсолютно прозрачный, а 0xFF — это совсем не прозрачный.
TextStyle(…) — еще более интересный виджет, с его помощью можно задать цвет, размер, толщину, межстрочный интервал, добавить подчеркивание и прочее.
Приложение на Flutter написано, дело сделано! В доках можно почитать как его собрать под Android и iOS, там же есть ссылочки чтобы вы узнали как его отправить в нужный Store. Кому этого мало, я ниже накидал еще пару строк про Flutter, может больше…
Про Stateless виджеты
Как использовать виджеты — мы разобрались, давайте теперь разбираться как их создавать. Выше уже упоминалось, что есть виджеты у которых есть состояние, и у которых его нет. До сих пор мы использовали только виджеты без состояния. Это не значит, что у них его совсем нет, ведь виджеты это просто классы, и их свойства могут быть изменены. Просто после того, как виджет будет отрисован — изменения его состояния не приведет к обновлению этого виджета в UI. К примеру, если нам нужно поменять текст на экране, нужно будет сгенерировать другой виджет Text и указать новое содержимое которое мы хотим отобразить. Такие виджеты можно назвать константными, если вы понимаете о чем я. И они простые, поэтому с них и начнем.
Чтобы создать Stateless виджет, нужно:
Пример виджета с одним аргументом:
Про Stateless больше и добавить нечего…
Про Hot Reload
Обратите внимание, что при изменении содержимого нашего виджета приложение будет автоматически перерисовываться. После того, как мы вынесли виджет из функции main() Hot-reload стал нам помогать.
Важно также понимать, что из-за запущенного модуля для горячей замены приложение работает на порядок медленнее.
Про GestureDetector
В следующей секции мы будем разбираться с StatefulWidget (с виджетами которые изменяются при изменении их состояния). Для того чтобы это было интересно, нам нужно это состояние как-то изменять, согласны? Мы будем изменять состояние виджета реагируя на касания по экрану. Для этого мы будем использовать GestureDetector(…) — виджет, который ничего не отрисовывает, но следит за касаниями на экране смартфона и сообщает об этом вызывая переданные ему функции.
Создадим кнопку в центре экрана, при нажатии на которую в консоль будет выводиться сообщение:
Нажимаем на синюю кнопку и видим сообщение в консоли. Нажимаем еще раз и снова видим сообщение в консоли. Еще раз… Ладно, хватит залипать.
Про Stateful виджеты
StatefulWidget — простые, даже проще чем StatelessWidget ‘ы. Но есть нюанс: они не существуют сами по себе, для их работы нужен еще один класс который будет хранить состояние этого виджета. При этом, его визуальная часть (виджеты из которых он состоит) также становятся его состоянием.
Для начала, посмотрим на класс виджета:
Объект состояния совершенно не сложный. Более того, он практически идентичен StatelessWidget ‘ам написанным нами выше. Его основное отличие — родительский класс.
Обратите внимание, что имя класса начинается с нижнего подчеркивания. В Dart’е все имена начинающиеся с нижнего подчеркивания идентифицируют приватные значения. А состояние виджетов, в Flutter’е, принято оставлять приватными, хотя это не обязательно.
Какое замечательное приложение мы с вами сделали! Это отличный результат. Но перед тем как закончить эту часть курса, давайте рассмотрим еще пару интересных виджетов. Только в этот раз мы напишем больше кода, просто, чтобы было интереснее. Большая часть приложения должна быть вам знакома, а остальное вы уже должны были научиться понимать:
Про домашнее задание
Если вам хочется почитать что-нибудь еще на досуге, вот список интересных ссылок:
Подборка полезной информации для начинающих во Flutter
Я создатель канала Flutter For Dev и в данном посте я хотел бы помочь тем людям, которые часто задают вопросы подобного типа: «Привет, я новичок в Flutter, что посоветуете почитать?», «А какие курсы по Flutter лучше пройти и какие из них бесплатные?». На все эти вопросы я постараюсь ответить максимально подробным списком информации.
С чего начать?
Прежде всего, свое внимание стоит обратить на официальные источники, без них сложно продвинуться дальше:
Какие курсы пройти?
Существуют различные курсы, сразу разделим их на платные и бесплатные.
Tutorials — Flutter — официальное руководство для того, чтобы познакомиться с Flutter.
Build Native Mobile Apps with Flutter — Google совместно с Udacity сделали бесплатный курс, в котором преподавателями является инструкторы из Google.
Изучаем Flutter на русском — русскоязычный курс в котором затрагиваются такие темы как: Основы Flutter, основы компоновки UI, управление состояние, анимации и т.д.
The Complete 2020 Flutter Development Bootcamp with Dart — хорошие курс на английском сделанный совместно с Google Team для быстрого старта во Flutter.
Flutter & Dart — The Complete Guide [2020 Edition] — англоязычный курс в котором затрагивается не только Flutter, но и основы Dart.
Flutter & Firebase: Build a Complete App for iOS & Android — курс от Andrea Bizzotto в котором он рассказывает, как создать Flutter приложение с использованием Firebase.
The Complete Dart Guide for Beginners and Beyond — еще один курс от Andrea Bizzotto, на этот раз он посвящен основам Dart.
Dart and Flutter: The Complete Developer’s Guide — в курсе вы узнаете про основы Dart и Flutter, а также настройку Flutter, Android, IOS на MacOS.
Что посмотреть на Youtube?
В первую очередь, я хочу обратить внимание на официальный канал Flutter, так как там действительно хорошая подборка рубрик Flutter Widget of the Week, Package of the Week, Flutter in Focus и многое другое.
LazyLoad Dart & Flutter — на канале Евгений Ёлчев рассказывает про основы Dart. В каждом уроке Евгений подробно объясняет материал и разбирает его на примерах. Информация подойдет как для новичков, так и продвинутых разработчиков Flutter.
Resocoder — очень хороший канал, на котором вы можете встретить такие темы как: Flutter Animation, Flutter Firebase & DDD Course, Flutter TDD Clean Architecture Course, Flutter State Management и так далее.
Code With Andrea помимо того, что Andrea Bizzotto делает курсы на udemy, у него есть свой канал, на котором он рассказывает не только про Flutter, но еще и про Dart.
Flutter — официальный твиттер Flutter.
Dart — официальный твиттер Dart.
FlutterForDev — новостной твиттер на русском про Flutter.
Flutter — официальный medium Flutter.
Dart — официальный medium Dart.
Flutter Community — официальный medium Flutter Community.
FlutterDevs — официальный medium FlutterDevs.
flutter.dev — официальный сайт с документацией Flutter.
dart.dev — официальный сайт с документацией Dart
pub.dev — здесь вы можете найти пакеты Dart и Flutter.
Metanit — это раздел сайта посвященный Flutter на русском. Оформлено в виде книги с уроками.
Flutter.su — о Flutter на русском. Немного уроков, немного статей и новостей.
Dartflutter.ru — Dart & Flutter — статьи, примеры, уроки.
Resocoder.com — помимо канала у Resocoder вы можете найти на сайте объяснения к его видео с частями кода.
Codewithandrea — здесь вы можете найти не только видео, но еще заметки и курсы от Andrea Bizzotto.
Filledstacks — на Filledstacks вы можете найти не только видео но и объяснение с частями кода к каждому из них по Flutter.
didierboelens.com — Здесь вы можете найти много нового, от того как работает Flutter под капотом, до анимаций, работы StatefulWidget и много другое.
Flutterawesome — На flutterawesome собрано множество приложений на разные темы, а также виджеты.
Dart & Flutter по-русски — русскоязычный чат по Dart и Flutter.
Flutter For Dev — новости, статьи, дизайн — мой канал в котором я делюсь не только новостями ну и своими заметками.
Flutter Developers — русскоговорящее сообщество — еще один русскоязычный чат.
Flutter Dev Подкаст — чат Flutter Dev подкаста.
NEWS Flutter Dev Подкаст — здесь новые выпуски подкаста Flutter Dev и иногда публикуются какие-то новости.
Oh, my Flutter — канал о Flutter-разработке.
Flutter Russia Channel — канал в котором анонсируются все события про Flutter на русском и не только.
Flutter Architecture — чат об архитектурных подходах при разработке на Flutter.
DART_SIDE — на канале делятся многим интересным, а так же проводят интересные стримы которые касаются Flutter.
Telegram с вакансиями:
Art Flutter Vacancies — канал с вакансиями для Flutter разработчиков.
Dart Jobs — канал на котором публикуются вакансии для разработчиков на Dart и Flutter.
FlutterDevPodcast — подкаст про Flutter на русском.
Flutter — официальный репозиторий Flutter.
Dart — официальный репозиторий Dart.
Помимо выше написанного, могу посоветовать сборник русскоязычной информации, который посвящен Flutter_info — там есть записи митапов, конференций, статьи на русском языке, телеграм и ютуб каналы.
Надеюсь, что информация в статье поможет вам при изучение Flutter. Если у вас есть чем поделиться, то жду вас в комментариях.