Вступление
Добрый денек!
Мы продолжаем изучать Flutter.
И в этой статье мы познакомимся с файлом pubspec.yaml, а также поработаем с Flutter в командной строке.
Ну что ж, приступим!
Наш план-
Часть 1 - введение в разработку, первое приложение, понятие состояния;
-
Часть 2 (текущая статья) - файл pubspec.yaml и использование flutter в командной строке;
-
Часть 3 - BottomNavigationBar и Navigator;
-
Часть 4 - MVC. Мы будем использовать именно этот паттерн, как один из самый простых;
-
Часть 5 - http пакет. Создание Repository класса, первые запросы, вывод списка постов;
-
Часть 6 - Работа с картинками, вывод картинок в виде сетки, получение картинок из сети, добавление своих в приложение;
-
Часть 7 - Создание своей темы, добавление кастомных шрифтов и анимации;
-
Часть 8 - Немного о тестировании;
Файл pubspec.yaml
Расширение .yaml указывает на то, что мы используем YAML формат данных (более подробнее в Википедии).
Это довольно простой формат, ориентированный на удобство представления данных.
pubspec.yaml находится в корневой директории проекта и служит для общей настройки, добавления зависимостей, шрифтов, картинок в ваш проект.
Немного об организации файлов:
-
.dart-tool содержит информацию для Dart Tools (набор различных утилит для работы с кодом Dart)
-
.idea была создана самой Android Studio и хранит настройки проекта
-
build содержит файлы сборки, в том числе и наш release apk
-
ios папка содержит нативный код iOS и предназначена для отдельной настройки iOS приложения, а также его публикации через XCode
-
android папка содержит нативный код Android и предназначена для отдельной настройки Android приложения
-
lib содержит непосредственно наш код на Dart
-
test предназначена для тестов
Далее идет несколько файлов:
-
README.md и .gitignore - это файлы Git
-
о pubspec.yaml мы говорили выше, а pubspec.lock содержит информацию о версиях наших pub-пакетов.
-
.metadata содержит необходимую информацию для обновления Flutter
-
.packages дополнительная информация о пакетах
Рассмотрим минимальный pubspec.yaml:
# имя Flutter приложения# обычно данное имя используется в качестве# названия pub-пакета. Это важно лишь в том случае,# если вы разрабатываете свой pub-пакет и собираетесь# выложить его в общий доступ# как я уже отметил имя Android и iOS приложения впоследствии# можно будет изменить отдельно для каждой из платформname: json_placeholder_app# краткое описание на английскомdescription: json_placeholder_app is an demo application# в данном случае мы не собираемся# опубликовывать pub-пакет и поэтому# запрещаем команду flutter publishpublish_to: 'none' # версия Android и iOS приложения# состоит из 2 частей, разделенных знаком плюса# первая часть - это имя версии, которое будет# видно для пользователей, например 1.1.5# вторая часть позволяет Google Play и Apple Store# отличать разные версии нашего приложения (например: 5)version: 1.0.0+1# версия Dart SDKenvironment: sdk: ">=2.7.0 <3.0.0"# блок зависимостейdependencies: flutter: sdk: flutter # использование иконок для Cupertino компонентов # Cupertino компоненты - это компоненты в стили iOS # В данном приложении мы не будем использовать их и поэтому # удалим ненужный pub-пакет #cupertino_icons: ^1.0.2# зависимости для разработки# в данном случае подключено тестированиеdev_dependencies: flutter_test: sdk: flutter# в данной секции вы можете подключить шрифты и assets файлы# об этом мы поговорим позжеflutter: # указываем, что мы используем MaterialApp иконки и наше # приложение соответствует Material Design uses-material-design: true
Немного о pub-пакетах
Все pub-пакеты расположены на pub.dev. Здесь вы можете найти довольно большое количество интересных и полезных пакетов и плагинов для ваших приложений.
Все pub-пакеты делятся на собственно пакеты и плагины.
В чем же отличие пакета от плагина?
Пакет - это код на Dart с pubspec.yaml файлом, а плагин - подвид пакета, который содержит нативный код какой-либо платформы.
Например плагин camera позволяет получить доступ к камере на Android и iOS устройствах и содержит нативный код отдельно для Android (папка android) и отдельно для iOS (папка ios)
Добавление зависимостей
Настало время подключить необходимые библиотеки в наш проект, которые мы впоследствии будем использовать на протяжении всей разработки нашего приложения.
Для этого нам нужно указать необходимые pub пакеты в блоке зависимостей:
# имя Flutter приложения# обычно данное имя используется в качестве# названия pub-пакета. Это важно лишь в том случае,# если вы разрабатываете свой pub-пакет и собираетесь# выложить его в общий доступ# как я уже отметил имя Android и iOS приложения впоследствии# можно будет изменить отдельно для каждой из платформname: json_placeholder_app# краткое описание на английскомdescription: json_placeholder_app is an demo application# в данном случае мы не собираемся# опубликовывать pub-пакет и поэтому# запрещаем команду flutter publishpublish_to: 'none' # версия Android и iOS приложения# состоит из 2 частей, разделенных плюсом# первая часть - это имя версии, которое будет# видно для пользователей, например 1.1.5# вторая часть позволяет Google Play и Apple Store# отличать разные версии нашего приложения (например: 5)version: 1.0.0+1# версия Dart SDKenvironment: sdk: ">=2.7.0 <3.0.0" # блок зависимостейdependencies: flutter: sdk: flutter # подключение необходимых pub-пакетов # используется для произвольного размещения # компонентов в виде сетки flutter_staggered_grid_view: ^0.4.0 # мы будем использовать MVC паттерн mvc_pattern: ^7.0.0 # большая часть данных будет браться из сети, # поэтому мы будем использовать http для # осуществления наших запросов http: ^0.13.3 # зависимости для разработки# в данном случае подключено тестированиеdev_dependencies: flutter_test: sdk: flutter# в данной секции вы можете подключить шрифты и assets файлы# об этом мы поговорим позжеflutter: # указываем, что мы используем MaterialApp иконки и наше # приложение соответствует Material Design uses-material-design: true
Пока на этом все!
Flutter в командной строке
Для начала нужно запустить командную строку или терминал.
У меня Debian 10, поэтому я буду использовать терминал.
Теперь надо определить местоположения главного flutter скрипта.
Возможно во время установки Flutter вы установили переменные окружения и теперь вы можете использовать команды Flutter без указания пути:
В противном случае вам нужно прописать полный путь к Flutter:
В директории Flutter есть папка bin, в которой лежит главный скрипт - flutter.
Данный скрипт позволяет собирать и очищать ваш проект, загружать зависимости, управлять устройствами, на которых приложение будет выполняться, а также обновлять сам Flutter.
Ну что ж давайте пройдемся по основным командам.
Создание проекта
Для создания нового проекта нужно воспользоваться командой:
# также перед созданием проекта можно отключить web поддержку# с помощью команды: flutter config --no-enable-webflutter create new_flutter_app
Результат:
Установка зависимостей
Для установки зависимостей нужно выполнить:
flutter pub get
Вы также можете использовать встроенный терминал в Android Studio:
Получение доступных устройств
flutter devices
Результат:
Здесь мы видем мой Honor и Chrome браузер (т.к. включена web поддержка)
Запуск
Для запуска нужно указать устройство через параметр -d
flutter run -d JYXNW20805003141
Результат:
Получение скрина
Теперь когда мы запустили наше приложение, мы можем получить скрин с экрана нашего устройства c помощью команды:
# -d указываем устройство# -o путь в файлу, куда будет сохранен наш скринflutter screenshot -d JYXNW20805003141 -o ~/Downloads/screen_1.png
Результат:
Скрин:
Сборка релиза
Не будем вдаваться в глубокие подробности сборки приложения.
Данный этап мы рассмотрим в заключительных уроках.
Для создания release apk выполните:
flutter build apk --release
Результат:
В данном случае мы имеем неподписанный apk с набором всех архитектур (armeabi-v7a, arm64-v8a и 86_64).
Лучшим вариантом является использование опции --split-per-abi для разделения архитектур по разным файлам:
flutter build apk --split-per-abi
Результат:
Допольнительные команды
Определение версии Flutter:
flutter --version
Обновление Flutter:
flutter upgrade
Чтобы получить справку по какой-либо команде нужно использовать --help опцию:
flutter create --help
Результат:
Заключение
Как и предыдущая, статья получилось довольно информативной и без лишней воды.
Ну что ж поздравляю вас, если вы дочитали до конца, надеюсь вы узнали что-то полезное для себя.
Не забывайте оставлять пожелания в комментах)))
Далее переходим к навигации.
