С чего начать изучение 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 / Программирование
Пол года назад я сама искала такую статью и теперь я очень хочу посоветовать себе в прошлом с чего можно начать.
1. Выбрать тему приложения
Не нужно долгих мук выбора, просто начните делать то, что вам пригодилось бы. Лучше что-то простое. Нужно понимать, что мы пока не стремимся быть Биллом Гейтсом. Это наше первое приложение, наш первый шаг.
Я уже как лет 7-8 болею спортом, потому идеей моего первого приложения было — база тренировок для поддержания себя в тонусе, с упражнениями для спины, рук, попы, ну и в целом, чтобы не скучно было.
2. На каком языке писать?
Я перепробовала несколько разных языков и разных SDK, мой выбор пал на Flutter и, собственно, язык на котором он обслуживается — dart, потому что:
Грубо говоря, те, которым можно задать состояние и те, кому нет.
Пример создания StatelessWidget:
Скопировать код можно тут
В данном виджете мы создаем колонну Column, элементы которой размещаются по центру (mainAxisAlignment: MainAxisAlignment.center), внутри которой лежат два контейнера.
В первом контейнере текст ‘Hello, World!’ синего цвета, с подчеркиванием линией в стиле dottet.
Во втором синяя кнопка ‘Touch me’ с закругленными углами и белыми буквами.
Если код сложен для понимания, почитайте статьи с этого сайта, особенно «Основы Dart 2.x (Классы и объекты)».
Если непонятно про виджеты, прочтите тут(на английском)
3. Несколько советов
У Flutter достаточно объемная библиотека package. Не бойтесь их юзать. Например, я за несколько минут до отправки приложения в стор вспомнила, что у меня не работает отправка фидбека. За секунды я нашла package flutter_email_sender, прописала его в pubspec.yaml и набросала код, писать который обычно помогают в Example. Ссылка.
Смотря туториалы, настороженно относитесь к объему кода. Если задача простая. Часто то, что расписывают на три страницы правильнее решить парой строчек кода. Если вы понимаете, что решение слишком сложное, поищите другой путь. Хороший код — короткий код.
В моем приложении есть возможность посмотреть насколько вы были активны на этой неделе и я долго не могла понять как привязываться к датам и как заставить его работать. Оказалось все достаточно легко, даю вам ссылку на то, как работать с датами во Flutter.
4. В заключение
Flutter – это отличный новый инструмент, на который переходят многие специалисты и который настолько прост, что поможет и нам новичкам добиться желаемых целей.
Мой рабочий процесс строился по схеме: я не знаю как это делать — значит я учусь/ищу примеры/спрашиваю в тематических группах.
Если я все равно не понимаю, как это работает — я убираю эту возможность из своего проекта.
Часто решение приходит в голову позже.
Если оно не пришло, делайте то, что можете. Это ваш первый проект, пусть он выйдет таким, каким выйдет.
То, что у меня получилось после отсеивания всего мною неподъемного, можно посмотреть тут.
Начальное знание dart: 0.
Срок написания этого приложения: 5 месяцев.
Персонал: 1 человек (я).
Буду очень благодарна вам за обратную связь и за поддержку меня, как начинающего кодописателя. Надеюсь, я тоже помогла вам информацией. Хорошего всем дня.
Flutter введение для начинающих
Flutter в последнее время становится популярным благодаря гибкости, производительности, быстрого создания приложений и простоте изучения языка.
Независимо от того, являетесь ли вы опытным разработчиком или новичком, изучение Flutter потребует от вас лишь нескольких хорошо информированных видеороликов, учебных ресурсов и большого количества самообучения.
В этой статье вы узнаете что такое Flutter, где и как его лучше учить Flutter и как собственно его установить.
Что такое Flutter?
Мы также можем разработать веб-версию и версию для ПК для одного и того же приложения, используя единую кодовую базу.
Приложения на Flutter скомпилированы в исходном коде, поэтому обладают высокой производительностью и скоростью.
Зачем изучать Flutter?
Если этих причин недостаточно, вот еще несколько причин, по которым вам стоит изучить Flutter:
Особенности Flutter
И последнее, прежде чем мы дадим вам ресурсы для изучения Flutter, важно, чтобы вы знали, чтобы вы могли просто покопаться в ресурсах и получить практическое обучение, не прибегая к введению еще раз!
Некоторые уникальные особенности Flutter:
Предпосылки для изучения Flutter
Чтобы начать изучение Flutter, вам необходимо знать следующее. Если вы понятия не имеете о чем-либо из нижеприведенного, лучше сначала взять эти концепции, а затем продолжить изучение Flutter:
Как изучить Flutter?
Сейчас хорошее время, чтобы начать изучать Flutter. В интернете много ресурсов, и информационная перегрузка может быть огромной. Вот почему мы разработали лучшие ресурсы, которые помогут вам правильно изучить Flutter. На официальном веб-сайте Flutter доступно множество документации, но вам следует обратиться к другим ресурсам для большей глубины и разнообразия.
1. Видеоуроки и документация
На официальном сайте доступно множество примеров видео и документации, но они на английском языке, поэтому следует включить субтитры.
На youtube также есть уроки Flutter на русском языке:
2. Книги
Хороших книг по Flutter на русском языке в интернете практически нет, поэтому все же приведу пару на английском языке для тех кто умеет свободно читать и понимать язык.
Как новичок, вы сможете многое почерпнуть только из этих двух книг.
Установка Flutter
Для разработки мы используем интегрированную среду разработки (IDE), которая упрощает и ускоряет разработку и тестирование.
Как мы узнали ранее, есть 2 популярных IDE для Flutter:
Во многом все зависит от вашего выбора, однако новичкам скорее всего подойдет Visual Studio Code.
Далее следуя официальной документации, вы сможете установить се необходимые для начала компоненты.
Создание простого приложения на Flutter
Давайте создадим простую программу Hello World. С помощью этой программы мы поймем структуру Flutter и основные используемые методы. Хотя это слишком простое приложение, чтобы оценить все детали, но все же дает хорошее начало.
Чтобы создать новый проект, просто введите
Проект будет создан со следующей структурой:
Для нашего простого приложения нам понадобится только файл main.dart. Файл поставляется с некоторым кодом, и разработчики в основном удаляют его, чтобы написать свой код с нуля.
Мы тоже этим займемся!
Итак, что такое виджет?
Итак, все ваше приложение Flutter представляет собой набор виджетов, которые объединяются и отображаются в красивом пользовательском интерфейсе.
И запустите его с помощью команды:
Поздравляю! Вы только что создали свое первое приложение на 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’е, принято оставлять приватными, хотя это не обязательно.
Какое замечательное приложение мы с вами сделали! Это отличный результат. Но перед тем как закончить эту часть курса, давайте рассмотрим еще пару интересных виджетов. Только в этот раз мы напишем больше кода, просто, чтобы было интереснее. Большая часть приложения должна быть вам знакома, а остальное вы уже должны были научиться понимать:
Про домашнее задание
Если вам хочется почитать что-нибудь еще на досуге, вот список интересных ссылок: