С момента своего долгожданного запуска Flutter привлек много внимания, и мы тоже в восторге от него! Я надеюсь, что огромная часть неигровых приложений перейдет на Flutter, и в ожидании мы также обучаем этому нашу команду.

В Интернете есть новые, но немногочисленные ресурсы для изучения Flutter. Мы составили наше руководство по Flutter, чтобы помочь разработчикам встать с ног и приступить к разработке приложений для Flutter.

В этом руководстве по Flutter для начинающих мы рассмотрим:

  • Флаттер: что, как и почему?
  • Настройка флаттера.
  • Основы дартс.
  • Основы флаттера.
  • Виджеты.
  • Макеты.
  • Интерактивные виджеты.
  • Разработка приложения: формы, жесты и изображения.
  • Списки и навигация.
  • Нетворкинг.
  • JSON и сериализация.
  • Управление зависимостями.
  • Государственное управление.
  • Тестирование (модульное и интеграционное).

Флаттер: что, как и почему?

Что такое флаттер и чем он отличается? Просто помните, что Flutter был создан для работы с любым устройством с экраном и работает с:

  • iOS и Android.
  • Интернет и рабочий стол (Mac, Windows и Ubuntu) — даже поддержка PWA.
  • Авто.
  • Raspberry Pi (стадия POC).

Настройка флаттера

Flutter относительно прост в настройке и зависит от того, какую ОС вы используете; вы можете ознакомиться с шагами в этом официальном руководстве по Flutter: https://flutter.dev/docs/get-started/install.

Но на случай, если вы с чем-то столкнетесь, ознакомьтесь с распространенными проблемами при начале работы на Github Flutter.

Причина, по которой мы просим вас установить Flutter перед Dart, заключается в том, что при установке Flutter вы также устанавливаете Dart. Хотя вы можете установить Dart отдельно, это будет ненужным шагом. Flutter решит, какая версия Dart будет использоваться, поэтому установка другой версии Dart также будет ненужной.

После того, как вы загрузили и разархивировали Flutter, вы должны увидеть что-то вроде этого при запуске команды flutter в своем терминале:

Если вы новичок в мобильной разработке в целом, вам также необходимо скачать Xcode и Android Studio (и набор инструментов). После того, как вы настроили Flutter, создать новый проект можно с помощью всего одной команды.

Основы дартс

Flutter использует язык Dart для создания приложений. Flutter и Chrome используют один и тот же движок рендеринга SKIA. Вместо того, чтобы взаимодействовать с собственными API, он контролирует каждый пиксель на экране, что дает ему столь необходимую свободу от устаревшего багажа, а также производительность, которую он имеет.

Обязательно прочитайте официальную документацию, но я обнаружил, что эта также хорошо объясняет Dart.

P.S. Вы можете следить за обновлениями дротика на их среднем аккаунте.

Учиться дартс

Ознакомьтесь с официальной документацией языка Dart, туром и их примерами языка.

Если вам нужна дополнительная практика после того, как у вас есть обзор, зайдите на http://jpryan.me/dartbyexample/ и выполняйте все примеры неукоснительно.

Практика, практика, практика!

Отредактируйте свой код на DartPad для начала и получите лучшее сцепление. Я уверена, что ты скоро заработаешь!

После того, как вы закончите, перейдите к упражнениям и завершите их трек Dart. Это модно, поэтому, если он полон, вы тоже можете пройти тренировочную дорожку.

Основы флаттера

Теперь, когда вы знакомы с Dart, пришло время перейти к Flutter.

Начнем с технического обзора здесь.

И создайте новое флаттер-приложение с помощью:

flutter create app_name

И вы должны увидеть что-то вроде этого:

Откройте проект в Android Studio, загрузите эмулятор и версию для Android, если это еще не сделано, и запустите проект — и вуаля!

Поймите, как вы должны структурировать каталог вашего проекта, и поймите, какие файлы предназначены для какой цели.

Теперь, когда вы настроили Flutter, пришло время сделать то, что делают все разработчики, использовать чужой код :) — я имел в виду настроить файл пакета: pubspec, написанный на YAML.

Виджеты

Помните: во Flutter все — виджеты

Если вы не читали технический обзор, как мы просили вас раньше, вернитесь и прочитайте его :). Вы получите четкое представление о том, что такое виджеты. Виджеты бывают двух видов: без сохранения состояния и с сохранением состояния.

Виджеты без состояния — это виджеты, состояние которых не меняется, например кнопка или изображение. Как следует из названия, он не меняет своего состояния, когда на экране выполняется действие.

Посмотрите серию коротких видеороликов и их документацию от Google, чтобы изучить их более подробно. (Прикрепляю первое видео из серии.)

Когда виджету необходимо удерживать некоторое состояние, например текущую страницу в PageView, текущую выбранную вкладку в BottomNavigationBar, виджеты с состоянием — правильный выбор. StatefulWidgets может хранить текущее состояние виджета. Вместо метода построения виджета виджет с состоянием имеет метод построения состояния, который вызывается каждый раз, когда мы явно вызываем setState.

Точно так же ознакомьтесь с документацией (в ней есть видео) для виджетов с отслеживанием состояния.

Flutter 1.9 был выпущен на GDD China с множеством новых функций и знаком того, что сообщество умножается.

Макеты во Flutter

Как мы уже говорили ранее, во Flutter все является виджетом, включая модели макетов. (Ознакомьтесь с документацией.)

Виджеты, такие как строки, столбцы и сетки, представляют собой виджеты компоновки (которые мы не видим на экране), которые помогают разработчикам упорядочивать, ограничивать и выравнивать другие видимые виджеты.

И еще несколько виджетов!

Flutter поставляется с набором мощных базовых виджетов, таких как Текст, Столбец, Строка, Стек и Контейнер. Основные виджеты помогут вам создавать собственные представления по своему усмотрению.

Если ваше приложение следует рекомендациям по дизайну материалов, у Flutter по умолчанию есть много возможностей. Flutter предоставляет несколько виджетов, поддерживающих Material Design. В него входят такие виджеты, как MaterialApp, AppBar, Scaffold и др.

Flutter также включает в себя ориентированный на iOS пакет компонент Купертино. Он охватывает такие виджеты, как CupertinoApp, CupertinoNavigationBar и т. д.

Интерактивные виджеты

До сих пор мы видели виджеты, которые отображают информацию на экране или упорядочивают другие виджеты. Для реального приложения одинаково важно сделать приложение интерактивным и получать ввод данных от пользователя в различных формах, таких как жесты, касания и т. д.

Для этого во Flutter есть ряд StatefullWidgets, таких как Checkbox, Radio, Slider, InkWell, Form и TextField. Эти виджеты способны сохранять свое состояние (например, текст, который мы вводим в TextField, независимо от того, проверен контрольный список или нет).

Перейдите и проверьте этот пример, чтобы добавить функциональность Избранное/не избранное в ваше приложение. Теперь вам должно быть любопытно, какие виджеты доступны во Flutter? Перед вами Каталог виджетов. Проверьте все виджеты, которые делают разработку Flutter легкой и увлекательной.

Поваренная книга флаттера

И вот, пришло время изучить Flutter. Я имею в виду приложения с несколькими экранами, изображениями, сетевыми зависимостями и всем остальным.

Итак, начнем.

Разработка приложения

Проверьте приведенную ниже иллюстрацию приложения.

Это простое на вид приложение имеет следующие функции:

  1. Навигационный ящик: https://flutter.dev/docs/cookbook/design/drawer.
  2. Закусочная: https://flutter.dev/docs/cookbook/design/snackbars.
  3. Пользовательские шрифты (текст имеет собственный стиль): https://flutter.dev/docs/cookbook/design/package-fonts.
  4. Текст, основанный на ориентации (большие шрифты в альбомной ориентации): https://flutter.dev/docs/cookbook/design/orientation.
  5. И несколько вкладок: https://flutter.dev/docs/cookbook/design/tabs.

Примечание. OrientationBuilder не зависит от ориентации устройства. Вместо этого он вычисляет текущую ориентацию, сравнивая ширину и высоту, доступные для родительского виджета. Чтобы определить ориентацию устройства, вы можете обратиться к MediaQuery.of(context).orientation.

Формы

Во Flutter есть виджет Форма, который помогает создать форму, которая эффективно управляет основными требованиями формы, например, состоянием формы, проверкой и т. д. Ознакомьтесь с полной гильдией в документации.

Жесты

Чтобы получить пользовательский ввод и некоторое время, чтобы сделать приложение супер интерактивным, мы максимально используем жесты. Во Flutter есть готовые виджеты для этого.

  1. Добавление эффекта ряби материала: https://flutter.dev/docs/cookbook/gestures/ripples.
  2. Обработка кранов: https://flutter.dev/docs/cookbook/gestures/handling-taps.
  3. Проведите пальцем, чтобы закрыть: https://flutter.dev/docs/cookbook/gestures/dismissible.

Изображений

Чтобы сделать приложения красивыми и привлекательными, мы используем изображения. Flutter предоставляет виджет Image для отображения изображения в приложении Flutter из различных источников.

1. Отображение изображений из сети: https://flutter.dev/docs/cookbook/images/network-image.

2. Отображение изображения с заполнителем и анимацией с плавным переходом: https://flutter.dev/docs/cookbook/images/fading-in-images.

3. Иногда удобно загружать изображения из сети и кэшировать их в локальном хранилище, чтобы в следующий раз они были быстро доступны: https://flutter.dev/docs/cookbook/images/cached-images.

Отображение дополнительных данных с помощью списка

Чтобы разместить больше данных, мы используем список для их отображения. Список может быть горизонтальным или линейным.

Во Flutter есть GridView и ListView. Это основные виджеты с разными подрядчиками, чтобы определить, как их можно использовать.

1. Создайте список-сетку: https://flutter.dev/docs/cookbook/lists/grid-lists.

2. Создайте список по горизонтали: https://flutter.dev/docs/cookbook/lists/horizontal-list.

3. Список может иметь разные типы Статей (например, заголовок и элементы к нему). Перейдите по следующей ссылке, чтобы узнать, как вы можете освещать такие случаи в ListView: https://flutter.dev/docs/cookbook/lists/mixed-list

4. Плавающая панель приложений и вложенная прокрутка с использованием SliverList: https://flutter.dev/docs/cookbook/lists/floating-app-bar

5. Иногда мы предварительно определяем произвольные элементы для размещения в списке (например, категории настроек). В ListView вы можете передавать пользовательские элементы (в виде виджетов) его дочерним элементам: https://flutter.dev/docs/cookbook/lists/basic-list.

6. Иногда список содержит больше элементов, чем область просмотра экрана. В таких случаях нет смысла строить сразу все предметы. У Flutter есть ListView.Builder, который использует подход ленивого рендеринга для эффективного создания элементов списка: https://flutter.dev/docs/cookbook/lists/long-lists.

Навигация между экранами (маршруты)

Большинство приложений содержат несколько экранов для упорядоченного отображения данных. Во Flutter мы можем выполнять операции, связанные с навигацией, с помощью Навигатора.

Посмотрите на следующую диаграмму, чтобы понять, как Flutter управляет несколькими маршрутами. Позже мы обсудим, как перемещаться между ними вверх и вперед.

1. Перейдите на новый экран и обратно: https://flutter.dev/docs/cookbook/navigation/navigation-basics.

2. Передавайте данные на новые экраны и получайте результаты.

https://flutter.dev/docs/cookbook/navigation/passing-data.

https://flutter.dev/docs/cookbook/navigation/returning-data.

То, что мы видели, подходит для небольших проектов. Но когда проект разрастется, мы хотим управлять всеми маршрутами в одном месте. Кроме того, нам может понадобиться ответить на следующие вопросы
1. Сколько у нас маршрутов?
2. Как инициализировать каждый маршрут?
3. Какие данные требуются для каждого маршрута? и т.д..

3. Чтобы эффективно управлять всем этим, Flutter назвал маршруты: https://flutter.dev/docs/cookbook/navigation/named-routes.

4. Передайте аргументы в именованных маршрутах: https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments.

А как насчет этой анимации при переходе на новый экран?

5. Анимируйте виджет на экранах: https://flutter.dev/docs/cookbook/navigation/hero-animations.

Сеть

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

Во Flutter для этого мы можем использовать HTTP в качестве стороннего паба: https://pub.dev/packages/http.

1. Получить данные из сети: https://flutter.dev/docs/cookbook/networking/fetch-data.

2. Делайте аутентифицированные запросы: https://flutter.dev/docs/cookbook/networking/authenticated-requests.

3. Работа с веб-сокетами: https://flutter.dev/docs/cookbook/networking/web-sockets.

У Flutter есть еще несколько доступных пабов. Не забудьте заглянуть в пабы ниже.

https://pub.dev/packages/dio.

https://pub.dev/packages/chopper.

Использование JSON и сериализации

Во Flutter у нас обычно есть две стратегии сериализации JSON. Ручной анализ и автоматическая сериализация с использованием генерации кода.

Во Flutter отключено отражение во время выполнения, в результате чего у нас не может быть таких библиотек, как GSON, Jackson или Moshi

Ознакомьтесь с полным руководством по обеим стратегиям здесь.

Для ручного анализа не забудьте проверить этот онлайн-инструмент для автоматического создания шаблона для класса модели: https://app.quicktype.io/.

Сохранение данных

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

1. Если у вас есть относительно небольшой объем данных, которые нужно хранить в паре ключ-значение. Рассмотрите возможность использования общих настроек. Вот подробное руководство по достижению того же с помощью Flutter.

2. Вы также можете читать и записывать файлы на диск: https://flutter.dev/docs/cookbook/persistence/reading-writing-files

3. Если приложению необходимо сохранить большой объем данных, а также запросить их. Рекомендуется использовать базу данных SQLite.

Приложение Flutter может использовать базу данных SQLite через паб SQLite: https://flutter.dev/docs/cookbook/persistence/sqlite

Для простой в использовании, реактивной персистентности ознакомьтесь с нижеприведенным pub. Moor — это оболочка над SQLite.

Управление зависимостями

Мы используем так много пабов в приложении. Это отличный способ работать вместе и обмениваться кодом между приложениями без необходимости разрабатывать все с нуля.

Все полезные пакеты вы можете найти здесь: https://pub.dev/

При наличии нескольких изданий вы можете столкнуться с такими проблемами, как конфликты при разрешении версий. Здесь вы можете найти все лучшие практики, которым нужно следовать при использовании пабов: https://flutter.dev/docs/development/packages-and-plugins/using-packages

И со всем этим вы завершили кулинарную книгу Flutter! :)Искусство государственного управления

Введение

В типичном приложении изменение, сделанное в точке А, отражает некоторые изменения в точке Б. Это называется управлением государством. Это также можно понять по приведенной ниже иллюстрации.

Flutter имеет несколько подходов, которые могут эффективно управлять состоянием приложения. В зависимости от размера проекта мы можем выбрать подходящие методы. Здесь мы обсудим несколько возможных методов управления состоянием:

1. setState

https://flutter.dev/docs/development/ui/interactive.

2. Унаследованный виджет

Посмотрите следующее видео, чтобы понять, что такое унаследованные виджеты.

Также ознакомьтесь с полным списком статей здесь: https://flutter.dev/docs/development/data-and-backend/state-mgmt/options.

Помните, Theme.of(context); и Navigator.of(context);использовали его раньше? Это использует ту же концепцию Inherited Widget для доступа к данным внизу в дереве виджетов.

3. Пакет провайдера

Поставщик — это смесь DI (внедрение зависимостей) и управления состоянием, построенная с помощью виджетов для виджетов. Официальная документация провайдера слишком хороша, чтобы разбираться в ней подробно: https://pub.dev/documentation/provider/latest/.

4. Шаблон BLoC

BLoC — это простая, легкая, хорошо тестируемая и предсказуемая библиотека управления состоянием для Dart: https://bloclibrary.dev/.

Есть и другие популярные в отрасли методы управления состоянием, такие какReduxиMobx.

Тестирование

Когда приложение растет, становится сложно тестировать каждую функцию. В таких случаях автоматизированное тестирование — это то, что нужно. Это помогает убедиться, что приложение работает должным образом, прежде чем мы его выпустим. А так, в таких ситуациях мы не подводим ;).

Автоматизированное тестирование подпадает под три категории

  1. Модульные тесты проверяют одну функцию, метод или класс.
  2. Тест виджета (в других средах пользовательского интерфейса называется тестом компонента) проверяет один виджет.
  3. Интеграционный тест проверяет все приложение или его большую часть.

Ознакомьтесь с введением в тестирование во Flutter здесь: https://flutter.dev/docs/testing.

Модульное тестирование

Цель модульного тестирования — протестировать конкретную единицу кода с заглушками/фиктивными зависимостями. Убедитесь, что код работает должным образом в различных сценариях. Модульный тест выполняется очень быстро и не требует реального устройства для выполнения.

При выполнении модульных тестов любые зависимые классы должны быть доступны для внедрения, чтобы мы могли внедрить фиктивную или фальшивую реализацию зависимости и проверить, все ли работает должным образом. Во Flutter есть фреймворк mockito, который помогает создавать фиктивную или фальшивую реализацию.

Тестирование виджетов

Тестирование виджетов (во Flutter) — это метод тестирования пользовательского интерфейса. Цель тестирования виджетов — проверить, выглядит ли конкретный пользовательский интерфейс виджета так, как ожидается, и является ли он интерактивным. Тестирование виджета не требует физического устройства. Мы также можем протестировать свойства виджета, такие как цвет, размер, семейство шрифтов и т. д.

Мы также можем выполнять пользовательские события, такие как касания, жесты, ввод текста и т. д. Более подробную информацию можно найти здесь: https://flutter.dev/docs/cookbook/testing/widget/introduction.

Интеграционное тестирование

Интеграционное тестирование работает в паре. Цель здесь — проверить, как несколько устройств работают вместе. Интеграционное тестирование происходит на реальном устройстве или эмуляторах. Мы можем запускать серию событий взаимодействия с пользователем и ожидать, что рендеринг пользовательского интерфейса или коды модулей будут выполняться должным образом.

https://flutter.dev/docs/cookbook/testing/integration/introduction

BDD: разработка, основанная на поведении

TDD или модульные тесты помогают, когда заинтересованная сторона обладает сильными техническими навыками. BDD — это написание тестового примера с точки зрения конечного пользователя. Это написано на естественном английском языке.

Тестовые наборы могут быть записаны в следующем формате:
Дано: исходный контекст в начале сценария в одном или нескольких предложениях;
Когда : событие, запускающее сценарий;
Затем: ожидаемый результат в одном или нескольких предложениях.

На внутреннем уровне поведенческий тест может быть модульным тестом, тестом виджета или их комбинацией.
BDD помогает понять функциональность программного обеспечения с точки зрения конечного пользователя и становится своего рода функциональной документацией.

У Flutter есть инструмент, который помогает нам писать примеры тестов поведения.

Это руководство охватывает все основы, которые вам нужно знать, чтобы начать с флаттера и разрабатывать свои приложения! Надеюсь, это поможет вам в вашем путешествии к флаттеру.

Мы предоставляем возможность следующему поколению студентов-мыслителей, изобретателей и учащихся публиковать свои мысли, идеи и инновации в письменной форме.
Наши авторы охватывают все области тем — от Рост до технологий, вплоть до будущего и мира.
Так что, если вы чувствуете, что вот-вот прыгнете в кролика дыра в чтении этих невероятных статей, не волнуйтесь, мы чувствуем то же самое. ;)
Вот почему студенты x студенты — это место, где ваш голос будет услышан!
Звучит интересно? Почему бы не присоединиться к нам в этом эпическом путешествии?



студенты х учащиеся
Предоставление платформы для повышения мнения учащихся и придания им большей уверенности и удовлетворения в своих письменных работах.studentsxstudents.com