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 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 мобильн...Основы Dart 2.x (Коллекции)
Во многих приложениях требуется создавать группы связанных объектов и управлять ими. В языке Dart для этого существуют коллекции.
Коллекции предоставляют более гибкий способ работы с группами объектов. В отличие от массивов которые используются в других...Создание мобильных игр при помощи Flutter и Flame для начинающих
Перевод урока Create a Mobile Game with Flutter and Flame – Beginner Tutorial Зачем создавать свою мобильную игру? Многие люди согласятся, что игры — весьма увлекательное программное обеспечение, в котором можно открыть для себя множество новых миров и ...Представляем Вам Flutter 1.17!
Перевод статьи Announcing Flutter 1.17 Включает в себя поддержку Metal для более быстрой работы системы iOS, новые компоненты Material, новые программы для мониторинга сети и многое другое! Сегодня мы с радостью представляем Вам Flutter 1.17, наш первый...Представляем Dart 2.8!
Перевод статьи Announcing Dart 2.8 Сегодня мы представляем вам новую версию Dart SDK — 2.8! Сообщество Dart растет, и миллионы разработчиков Flutter используют Dart как язык для создания приложений на любой платформе. Мы продолжаем работать над завершен...Flutter - создание версии приложения с мгновенным запуском для Google Play Маркет
Что такое Google Play Instant и с историей развития этого вопроса можно ознакомиться в статье Google Play Instant. Рефакторинг длиною в жизнь.
В этой заметке мы рассмотрим, что нужно изменить в проекте чтобы собрать Flutter приложение с мгновенным запус...Сохранение pdf файла во Flutter web
Если кто-то столкнулся с проблемой сохранения бинарных файлов во Flutter web, в том числе PDF файлов, предлагаем наше решение. Для вывода бинарного файла в браузере воспользуемся функцией JavaScript, ее нужно подключить в index.html: function ToFile(arg...Flutter for web - создание веб-приложения
Flutter for web Git репозиторий ВНИМАНИЕ: Данная заметка устарела с выходом Flutter >= 1.9
Смотрите: FlutterWeb Урок 1. Введение в разработку на Flutter для Интернета Установка и настройка необходимых пакетов Пакет stagehand - создает новый проект из в...FlutterWeb Урок 1. Введение в разработку на Flutter для Интернета
С выходом версии фреймворка Flutter 1.9 у разработчиков приложений появилась возможность создать один Flutter-проект с одной кодовой базой для платформ: Android, iOS и web.
Это позволяет получить почти все плюсы Flutter в любом браузере и на любом устро...
