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 приложений. Для добавления в него, любой желающий должен отправить свое приложение на проверку.
Быть в курсе
Новые заметки
Migrating to AndroidX / Переход на AndroidX
#146 v.5 | Если вы столкнулись с тем что новые пакеты Flutter требуют поддержки AndroidX, например geolocator ^5.0.0, то для их использования придется совершить этот переход. Показанием к переходу может быть то, что вы установили новую версию пакета, и во время за...Yandex Object Storage | PHP
#78 v.10 | Яндекс.Облако - облачные решения, на основе которых можно построить свои сетевые сервисы. Свой ресурс flutter.su мы решили разместить в Яндекс.Облаке. Хотим поделиться PHP кодом для подключения к Yandex Object Storage.
Для этого понадобится библиотека A...Список ресурсов по 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...Flutter урок по GPS геолокации (перевод урока с дополнениями)
#143 v.5 | GPS стала стандартной функцией современного смартфона. Обычно используется приложениями, чтобы обнаружить местонахождение устройства. Это перевод статьи Flutter - GPS Geolocation Tutorial [EN]. Перевод подготовлен Михайловой Марией. В статье вставлены д...Image class – класс изображения
#137 v.2 | Источник https://api.flutter.dev/flutter/widgets/Image-class.html Наследование: Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Image Виджет класс для отображения изображений. Конструкторы класса: Image() – получение изображени...Packages пакеты
#58 v.10 | Список пакетов для Flutter flutter_map — виджет отображения тайловых карт
flutter_spinkit — набор виджетов с анимацией загрузки (прелоадеры)
http — для сетевых запросов
latlong — класс для расчёта географических координат shared_preferences — пакет для ...Пакет shared_preferences
#125 v.2 | Пакет для сохранения постоянных данных ключ-значение, на устройствах iOS и Android. Реализация NSUserDefaults (на iOS) и SharedPreferences (на Android).
Данные сохраняются на диске асинхронно. Ни одна платформа не может гарантировать, что записи будут с...Комбинаторика (алгоритмы на языке Dart)
#122 v.4 | Пример простого кода программы для решения задач комбинаторики: перестановки, размещения и сочетания. Второй пример от первого, отличается только разным количеством элементов. Третий от второго, другими начальными значениями циклов.
Поэтому если запомни...RegExp class - класс для работы с регулярными выражениями
#117 v.4 | Регулярные выражения – это шаблоны, которые используются для нахождения сопоставлений строк и их частей, для дальнейшей обработки. Регулярные выражения Dart имеют тот же синтаксис и семантику, что и регулярные выражения JavaScript. http://ecma-internati...flutter_web icons - не отображаются в Windows или MacOS
#109 v.4 | При запуске Progressive Web Application built with Flutter можно столкнуться с тем, что иконки не отображаются (отображаются спецсимволом квадратом). Material icons not rendering #32245 https://github.com/flutter/flutter/issues/32245 А на смартфоне проб...Ошибка при попытке подключить пакет pub get | Visual Studio Code | Dart
#91 v.4 | При подключении нового пакета и вызове команды packages get может возникнуть ошибка: pub get Resolving dependencies... Got dependencies! Cannot open file, path = '.\.packages' (OS Error: Отказано в доступе. , errno = 5) exit code 66 Для ее исправлен...Button - кнопки | Flutter
#65 v.3 | RaisedButton class - кнопка Material Design https://flutter.su/docs/widgets-class/RaisedButton
Приподнятая над поверхностью кнопка. Эффект "парящей" кнопки создается за счет глубины теней. Подробнее FlatButton class - кнопка Material Design Кнопка на по...Flutter команды
#41 v.9 | flutter create flutter doctor flutter clean удаляет из директории проекта все скомпилированные и временные файлы. flutter clean Deleting 'build\' Deleting 'D:\flutter\mask_transition.dart_tool\'. flutter build flutter format https://flutter.dev/docs...Минимум кода для файла main.dart
#84 v.3 | С которого можно быстро начать тестирования какого-либо виджета. import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( debugShowCheckedModeBanner: false, home: MainScreen()
)); class MainScreen extends StatefulWidget { @override ...RaisedButton class - кнопка Material Design
#68 v.10 | Источник https://docs.flutter.io/flutter/material/RaisedButton-class.html Приподнятая над поверхностью кнопка. Эффект "парящей" кнопки создается за счет глубины теней. При нажатии приподнимается - тень становится больше и более размытой, создавая эффек...Cupertino Icons
#44 v.24 | Иконки Cupertino во Flutter (SDK). Документация https://docs.flutter.io/flutter/cupertino/CupertinoIcons-class.html Git репозиторий https://github.com/flutter/cupertino_icons version: 0.1.2 Перевод описания иконок https://translate.yandex.ru Материалы п...Material Icons (иконки по умолчанию)
#43 v.4 | Иконки Material Desing по умолчанию во Flutter (SDK). Документация https://docs.flutter.io/flutter/material/Icons-class.html Git репозиторий https://github.com/flutter/.../icons.dart version: on 18 Dec 2018 https://material.io/tools/icons/?style=baselin...MediaQuery class
#31 v.3 | Позволяет получить размеры окна приложения.
MediaQuery.of(context).size MediaQuery.of(context).size.widthContainer class - класс контейнер
#77 v.8 | Наследование: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container Виджет-класс Container сочетает в себе свойства: отображения, позиционирования и размерности. Внутри контейнера можно задать поля padding по отношению к до...Перехват события системной кнопки Back в Android
#52 v.5 | Необходимо использовать виджет WillPopScope источник Возникают ситуации когда вам нужно обойти событие поумолчанию, системной кнопки back (кнопка назад) на сматрфонах с Android.
Для этого в виджете экрана используйте виджет WillPopScope @override
Widge...
