[Разработка под Android, Dart, Flutter] Основы Flutter для начинающих (Часть II)

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
31-Май-2021 20:32

Цитировать

ВступлениеДобрый денек! Мы продолжаем изучать 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

Результат:

ЗаключениеКак и предыдущая, статья получилось довольно информативной и без лишней воды.Ну что ж поздравляю вас, если вы дочитали до конца, надеюсь вы узнали что-то полезное для себя.Не забывайте оставлять пожелания в комментах)))Далее переходим к навигации.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_razrabotka_pod_android (Разработка под Android), #_dart, #_flutter, #_commandline, #_flutter, #_dart, #_android, #_mobile_development, #_razrabotka_pod_android (
Разработка под Android
), #_dart, #_flutter

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 12:07
Часовой пояс: UTC + 5