Flutter уроки
От идеи до приложения
Данный ресурс посвящен разработке мобильных приложений с помощью Flutter SDK.
Flutter SDK – бесплатное кроссплатформенное средство от Google с открытым исходным кодом для быстрой разработки мобильных приложений для iOS и Android.
С появлением Flutter реализовать свои идеи в виде мобильного приложения стало как никогда просто и доступно.
В наших уроках Вы узнаете про Flutter:
– с чего начать мобильную разработку;
– особенности реализации алгоритмов и структур;
– подходы и методы для решения задач.
Начните сейчас изучать Flutter
Урок 1. Flutter первое приложение Hello
WorldСодержание урока:
1. Создание нового проекта в Android Studio
2. Главная функция main()
3. Функция runApp()
4. Иерархия виджетов
5. Свой «виджет» класс MyBody и горячая перезагрузка
6. Установка и использование пакета url_launcher (открытие ссылок в браузере)
Урок 2. StatelessWidget и StatefulWidgetВсе собственные классы-виджеты рекомендуется создавать от двух основных: StatelessWidget и StatefulWidget.
Отдельные части интерфейса удобно объединять в отдельные виджеты, созданные от этих двух суперклассов, но какой из них использовать – мы рассмотрим в этом уроке.
Урок 3.
ListView бесконечный прокручиваемый списокВиджет-класс ListView позволяет создавать конечные и бесконечные списки виджетов и делает их прокручиваемыми, если они не помещаются на экране или в отведенной для них области.
Под бесконечным списком мы будем понимать список элементов, который пополняется по мере необходимости, в нашем уроке – когда существующие элементы уже отображены. В мобильных приложениях такие списки повсюду: новостные ленты, списки сообщений, фотогалереи и т.п.
Урок 4. Форма
ввода, проверка правильного вводаГлавным контейнером для формы является виджет-класс Form, он позволяет объединить в себе поля ввода. Обращаясь к состоянию формы FormState, можно проверить корректное заполнение полей, сбросить значения по умолчанию и сохранить значения.
Урок 5. Навигация
и маршрутизация в приложении, class NavigatorРедкое приложение может обойтись одним окном или одной страницей.
Во Flutter и то и другое – виджеты. Для переключения между окнами или виджетами нужно использовать Navigator.
Урок 6. Асинхронные методы async и awaitПрограммируя на Flutter невозможно избежать использования асинхронных методов, таких как чтение данных из сети интернет, файлов и баз данных. Работа таких методов выводится в отдельные потоки и не нарушает работы основного потока программы: вычисление и отображение интерфейса. Одним словом, функции которые выполняются относительно долго — должны быть асинхронными.
Урок 7. HTTP и HTTPS, сетевые запросы в Dart и FlutterДля обмена данными между клиентом и сервером в основном используется http протокол или его расширение https для безопасной передачи данных.
В Dart есть одноименный пакет http, подключается он в файле зависимостей и метаданных pubspec.yaml
Создание мобильных игр при помощи Flutter и Flame для начинающихЗачем создавать свою мобильную игру? Многие люди согласятся, что игры — весьма увлекательное программное обеспечение, в котором можно открыть для себя множество новых миров и реальностей, в которых можно проживать целые жизни. Много зависит от игрового процесса, который может быть как линейным и простым, так и сложным, включающим в себя 3D модели, реалистичную физику движений, графику, генерацию окружающего мира и сюжетные линии, зависящие от выбора игрока. Некоторые из нас же хотят пойти дальше и создать собственные игры, и, если вы один из них, то эта статья станет весьма полезна для вас. Основное внимание в ней будет уделено концепции, а не созданию законченной или готовой к выпуску игры.
Создание казуальной 2D игры. Пошаговая инструкция при помощи Flame и Flutter (часть 1 из 5)Вы когда-нибудь задумывались о разработке видеоигр? Если да, то вы пришли по адресу! Эта статья расскажет и покажет, как создать свою собственную 2D мобильную игру.
Эта статья — продолжение предыдущей, которая является введением в разработку игр для разработчиков любой степени продвинутости. В этой же части мы будем создавать игру в стиле «убить крота».
Она будет называться Langaw (на сленге это означает дом мухи), и ее задача будет состоять в том, чтобы убить как можно больше мух, прежде чем они доберутся до кучки мусора.
Игрок будет контролировать игру простыми нажатиями (не мухобойкой 🙂). Пока что мы не будем использовать какие-либо изображения или графику, и наши мухи будут просто зелеными квадратиками. При нажатии на нее, муха станет красной и опустится в нижнюю часть экрана.
Примеры приложений на Flutter
Flutter Pixel SandИгра с пиксельным песком. Разработана с помощью Google Flutter SDK.
Прокачай акселерометр своего смартфона.
itsallwidgets.com - каталог Flutter приложенийКаталог itsallwidgets.com пополняется разработчиками Flutter приложений. Для добавления в него, любой желающий должен отправить свое приложение на проверку.
Быть в курсе
Новые заметки
Flutter 3.7: что нового?
Обновление Material 3, улучшенная производительность на iOS и многое другое! 2023 год начался с релиза новой версии Flutter 3.7: сообщество продолжает улучшать фреймворк, добавляя такие функции как возможность создания кастомизированных строк меню, каск...Курсы Flutter разработчика: ТОП-5 лучших бесплатных и платных онлайн-курсов
На практике очень часто возникает необходимость разработать приложение, которое поддерживается обеими популярными операционными системами для смартфонов: Android и iOS. Создавать программу под каждую ОС - не очень удачная идея, ведь вам придется нанимат...Flutter 3.3 — что нового?
Обновленная обработка текста, улучшение производительности и многое другое. Всего три месяца назад был объявлен релиз третьей версии Flutter, ключевым моментом которой стала стабильная поддержка всех платформ, а уже 30 августа разработчики выпустили Flu...Создание игры «Косынка» (Kondike)
Косынка — популярный карточный пасьянс. В этом туториале мы будем следовать пошаговой инструкции для кодирования этой игры при помощи движка Flame. Туториал подразумевает, что вы хотя бы немного знакомы с общими понятиями программирования и языком Dart....Создание каркаса игры при помощи Flame
Перевод туториала https://docs.flame-engine.org/1.3.0/tutorials/bare_flame_game.html Создание каркаса игры при помощи Flame
Создание игры «Косынка» (Kondike) Этот туториал подразумевает, что вы уже знакомы с использованием командной строки, а на вашем ...Flutter 3: стабильная версия для macOS и Linux, улучшение производительности и многое другое!
Пришло время для нового стабильного релиза Flutter — всего три месяца назад была анонсирована поддержка Flutter для Windows, а уже сегодня мы готовы объявить о стабильной поддержке для macOS и Linux. И благодаря труду разработчиков, мы влили 5248 пул-ре...Релиз Flutter 2.10
Что нового: поддержка Windows, улучшение производительности, обновление Material 3 и многое другое! Перевод статьи What’s New in Flutter 2.10 Сложно поверить, что уже пришло время для нового релиза стабильной версии Flutter — прошло менее двух месяцев с...Flutter для Windows
Для создания качественных приложений Windows, работающих также и на мобильных платформах и для WEB. Перевод статьи Announcing Flutter for Windows С самого запуска Flutter, одной из наших основных задач стало предоставление кросс-платформенного решения д...Flutter 2.2: что нового?
Этот релиз сосредоточен на оптимизации и совершенствовании функци, включая улучшение работы на iOS, отложенные компоненты Android (deferred components), обновленный сервис-воркер для Flutter web и многое другое! Перевод статьи What’s new in Flutter 2.2 ...Представляем Dart 2.13
Новые функции псевдонимов (алиасов) типов, улучшенный Dart FFI. Перевод статьи Announcing Dart 2.13 Автор оригинальной статьи: Michael Thomsen Представляем обновление Dart 2.13 — версия, в которой появились псевдонимы (алиасы) типов — одна из наиболее з...Создание адаптивного пользовательского интерфейса
Автор оригинального текста Aloïs Deniel перевод статьи https://aloisdeniel.com/#/posts/adaptative-ui Недавно я представил доклад на конференции FlutterVikings, в котором подробно объяснил, о чем вам следует думать в первую очередь при создании пользова...Создание бит-машины во Flutter
Эта статья о том, как построить бит-машину с секвенсором в Dart/Flutter. Автор оригинального текста Ken Reilly. Оригинальная статья тут. Пример приложения Вступление С первого релиза Flutter в 2018 году прошло не так много времени, однако он уже набрал ...Анонс Dart 2.12
Согласованные нулевые типы (Sound null safety) и Dart FFI в стабильной версии! Мы с радостью представляем вам Dart 2.12, обладающий стабильными версиями согласованных нулевых типов и Dart FFI. Null safety — наша последняя основная функция для повышения ...Повтор знаменитой игры с тираннозавром при помощи Flutter и Flame
Автор оригинальной статьи — Renan C. Araujo Если вы еще не знакомы с Flutter, то у меня хорошие новости: вам предстоит познакомиться с одним из самых удобных и гибких способов создания пользовательского интерфейса. Так что не теряйте зря времени и узна...Представляем Flutter 2.0
Flutter нового поколения, созданный для WEB, мобильных устройств и настольных компьютеров
Сегодня мы с гордостью представляем Flutter 2: большое обновление для Flutter, дающее разработчикам возможность создавать интересные, быстрые и портируемые приложе...Context - как это работает во Flutter
Перевод статьи Flutter in Context автора Greg Perry Детальный разбор класса BuidContext
(Эта статья является частью серии Decode Flutter Series) Вы уже знакомы с контекстными объектами? Я имею в виду объекты класса BuildContext с именем context, которы...Анонс Flutter 1.22
Перевод статьи Announcing Flutter 1.22 Поддержка iOS 14 и Android 11, i18n и l10n, готовые плагины Google Maps и WebView, новый инструмент App Size и многое другое! Мы с радостью представляем вам свежую версию Flutter с обширной поддержкой iOS 14 и Andr...Views (экраны) и диалоговые окна — пошаговая инструкцию с Flame и Flutter (часть 3 из 5)
Перевод урока Views and Dialog Boxes Tutorial – Step by Step with Flame and Flutter (Part 3 of 5) Когда только начинаешь изучать разработку игр, думаешь, что самое тяжелое — это начать, продумать логику геймплея, найти и создать графику. Но это не так. ...Анимация и графика в играх: пошаговое обучение с Flame и Flutter (часть 2 из 5)
Перевод урока Game Graphics and Animation Tutorial – Step by Step with Flame and Flutter (Part 2 of 5) В этой части обучения мы сфокусируемся на добавлении графики и анимации в нашу игру. Мы продолжим с того места, на котором остановились в предыдущей ч...Создание казуальной 2D игры. Пошаговая инструкция при помощи Flame и Flutter (часть 1 из 5)
Перевод урока 2D Casual Mobile Game Tutorial – Step by Step with Flame and Flutter (Part 1 of 5) Вы когда-нибудь задумывались о разработке видеоигр? Если да, то вы пришли по адресу! Эта статья расскажет и покажет, как создать свою собственную 2D мобильн...
