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
Flutter Pixel SandИгра с пиксельным песком. Разработана с помощью Google Flutter SDK.
Прокачай акселерометр своего смартфона.
itsallwidgets.com - каталог Flutter приложенийКаталог itsallwidgets.com пополняется разработчиками Flutter приложений. Для добавления в него, любой желающий должен отправить свое приложение на проверку.
Быть в курсе
Новые заметки
Flutter for web - создание веб-приложения
#174 v.5 | Flutter for web Git репозиторий ВНИМАНИЕ: Данная заметка устарела с выходом Flutter >= 1.9
Смотрите: FlutterWeb Урок 1. Введение в разработку на Flutter для Интернета Установка и настройка необходимых пакетов Пакет stagehand - создает новый проект из в...FlutterWeb Урок 1. Введение в разработку на Flutter для Интернета
#205 v.7 | С выходом версии фреймворка Flutter 1.9 у разработчиков приложений появилась возможность создать один Flutter-проект с одной кодовой базой для платформ: Android, iOS и web.
Это позволяет получить почти все плюсы Flutter в любом браузере и на любом устро...RaisedButton class - кнопка Material Design
#68 v.12 | Источник https://docs.flutter.io/flutter/material/RaisedButton-class.html Приподнятая над поверхностью кнопка. Эффект "парящей" кнопки создается за счет глубины теней. При нажатии приподнимается - тень становится больше и более размытой, создавая эффек...Основы Dart 2.x (Классы и объекты)
#183 v.4 | Dart является объектно-ориентированным языком, но в нем присутствуют некоторые отличия данной парадигмы от Java\C#.
Dart нет специальных ключевых слов (public; private; protected) то есть спецификаторов доступа, по этому все идентификаторы «публичны» п...Основы Dart 2.x (Классы и объекты) Часть II
#188 v.4 | Наследование Наследование является одним из фундаментальных атрибутов объектно-ориентированного программирования. Оно позволяет определить дочерний класс, который использует (наследует), расширяет или изменяет возможности родительского класса. Класс, чл...Основы Dart 2.x (Встроенные типы данных)
#182 v.6 | Описание: Dart это объектно-ориентированный статически типизированный язык программирования созданный компанией Google (Dart v1.0 вышел в ноябре 2013 года).
Для примеров можно использовать веб-среду DARTPAD Встроенные типы данных в Dart: • numbers
• str...Список ресурсов по Dart и Flutter
#57 v.7 | Для добавления нового ресурса пришлите ссылку на почту contact@flutter.su Сайты flutter.dev (flutter.io) [En]
dart.dev [En]
Flutter for web [En]
Flutter for desktop [En] Flu...Container class - класс контейнер
#77 v.8 | Наследование: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container Виджет-класс Container сочетает в себе свойства: отображения, позиционирования и размерности. Внутри контейнера можно задать поля padding по отношению к до...Основы Dart 2.x (DartVM, Isolates, Streams)
#199 v.3 | Dart virtual machine Прежде чем говорить о Dart_VM и остальных вещах в данной теме, необходимо понимать что такое процесс операционной системы и как это всё работает, ибо без этих знаний будет сложно разобраться о чем идет речь далее ...
Процесс - это (...ButtonTheme class - настройка стиля кнопок
#193 v.3 | Источник https://api.flutter.dev/flutter/material/ButtonTheme-class.html Используйте ButtonTheme для настройки цвета и геометрии кнопок.
ButtonTheme может быть определен в ThemeData.buttonTheme. Или можно использовать его как виджет для переопределения...Основы Dart 2.x (асинхронное программирование)
#197 v.2 | Введение: Традиционно в программировании используют синхронное программирование — последовательное выполнение инструкций с синхронными системными вызовами, которые полностью блокируют поток выполнения, пока системная операция, например чтение с диска ил...Основы Dart 2.x (Коллекции)
#196 v.3 | Во многих приложениях требуется создавать группы связанных объектов и управлять ими. В языке Dart для этого существуют коллекции.
Коллекции предоставляют более гибкий способ работы с группами объектов. В отличие от массивов которые используются в других...Основы Dart 2.x (Generics)
#195 v.3 | Generics - параметризованные типы, дженерики или обобщения позволяют программе уйти от жесткой привязки к определенным типам, определить функционал так, чтобы он мог использовать данные любых типов и обеспечить их безопасность. Так же обобщения снижают ...Flutter на практике (AlertDialog and SimpleDialog)
#189 v.4 | AlertDialog AlertDialog - это виджет (диалоговое окно оповещения) информирует пользователя о чем либо и требует подтверждения. AlertDialig имеет необязательный заголовок и необязательное содержимое. Заголовок отображается над содержимым, а действия (нап...Flutter на практике (ListTile)
#186 v.3 | ListTile - это виджет на подобие CardView в Android, который представляет собой список, который может содержать от одной до трех строк текста, окруженных значками или другими виджетами, такими как пиктограммы (или другие) для тайла определяются с началь...PageView свайп в одну сторону
#86 v.7 | По умолчанию виджет PageView прокручивается с помощью касания в обе стороны. Чтобы запретить прокрутку с помощью касания, нужно в параметре physics задать значение NeverScrollableScrollPhysics(). PageView( physics: NeverScrollableScrollPhysics(), childr...pub - инструмент для работы с пакетами и зависимостями Dart
#124 v.3 | Источник https://v1-dartlang-org.firebaseapp.com/tools/pub Инструмент pub устанавливается вместе с Dart SDK.
С помощью команд pub можно: управлять пакетами и зависимостями;
создавать, разрабатывать и публиковать Dart приложения (пакеты);
запускать на в...Dart разбить строку в массив по разделителю
#169 v.4 | Метод split Пример: разделитель запятая void main() { String mystring = 'Царь, царевич, король, королевич';// Переменная строкового типа List mylist = mystring.split(',');// Разбить строку в массив по разделителю "," запятой. mylist.forEach((i)=>print(i...Flutter .of(context)
#177 v.2 | Для обращения к ближайшему родительскому объекту данного класса исходя из контекста, можно с помощью конструкции .of(context). В этом примере, на верхнем уровне у нас будет виджет TopScreen.
Он будет задавать общий фон, но менять фон мы будем из дочерне...Dart mixins. Пример использование миксинов в Dart.
#176 v.2 | ```
class MyWidget extends StatefulWidget { @override State<StatefulWidget> createState() => _MyWidgetState();
} class _MyWidgetState extends State with MyLoader, MyProgress { // мы можем указать столько миксинов, сколько нам это нужно @override Widg...
