Основы Flutter для начинающих (Часть II)

Вступление

Добрый денек!

Мы продолжаем изучать 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 publish publish_to: 'none'   # версия Android и iOS приложения # состоит из 2 частей, разделенных знаком плюса # первая часть - это имя версии, которое будет # видно для пользователей, например 1.1.5 # вторая часть позволяет Google Play и Apple Store # отличать разные версии нашего приложения (например: 5) version: 1.0.0+1  # версия Dart SDK environment:   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 publish publish_to: 'none'   # версия Android и iOS приложения # состоит из 2 частей, разделенных плюсом # первая часть - это имя версии, которое будет # видно для пользователей, например 1.1.5 # вторая часть позволяет Google Play и Apple Store # отличать разные версии нашего приложения (например: 5) version: 1.0.0+1  # версия Dart SDK environment:   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-web flutter 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

Результат:

Заключение

Как и предыдущая, статья получилось довольно информативной и без лишней воды.

Ну что ж поздравляю вас, если вы дочитали до конца, надеюсь вы узнали что-то полезное для себя.

Не забывайте оставлять пожелания в комментах)))

Далее переходим к навигации.