Разработка приложения для Flutter, часть 2

Второя часть по руководству разработки на Flutter

Первая часть — https://starinsky.net/2023/12/23/flutter-base/

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

Flutter поставляется с набором мощных базовых виджетов, таких как Text, Column, Row, Stack и Container. Базовые виджеты помогут вам создавать пользовательские представления по своему усмотрению.

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

Material Navigation Drawer (https://material.io/components/navigation-drawer/#)

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

Cupertino NavigationBar (https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/)

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

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

Для этого во Flutter есть несколько виджетов StatefullWidgets, таких как CheckboxRadioSliderInkWellFormTextField и т. д. Эти виджеты способны поддерживать свое состояние (например, текст, который мы вводим в TextField, отмечен ли CheckList или нет).

Посмотрите приведенный ниже пример, чтобы добавить функциональность «Избранное/Неизбранное» в ваше приложение.

Добавление интерактивности в приложение Flutter

⏰ Время для Codelab: Напиши свое первое приложение для Flutter : Часть-2

Дойдя до этого места, вы должны понимать, что такое виджеты и их типы.

Теперь вам должно быть интересно, какие виджеты доступны во Flutter?

Вот каталог виджетов, проверьте все виджеты, которые делают разработку во Flutter легкой и веселой 😍.

Каталог виджетов

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

Посмотрите на иллюстрацию приложения ниже.

-----------------

Это простое на вид приложение обладает такими возможностями 👇

  1. Navigation Drawer
    https://flutter.dev/docs/cookbook/design/drawer
  2. SnackBar
    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 есть виджет Form, который помогает создать форму, эффективно управляющую основными требованиями формы, например, состоянием формы, валидацией и т. д. Ознакомьтесь с полным руководством в документации ниже

Кулинарная книга

Жесты

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

Добавление эффекта Material Ripple
https://flutter.dev/docs/cookbook/gestures/ripples

Обработка касаний
https://flutter.dev/docs/cookbook/gestures/handling-taps

Смахнуть, чтобы избавиться
https://flutter.dev/docs/cookbook/gestures/dismissible

Изображения

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

Отображение изображений из сети

Отображение изображения с плейсхолдером и с анимацией затухания

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

Вывод данных с помощью списка

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

Во Flutter есть GridView и ListView. Это базовые виджеты.

Создание списка сетки

Создание горизонтального списка

Список может иметь различные типы элементов. Например, заголовок и элементы к нему. Посмотрите здесь, как можно решить эту проблему в ListView.
Создание списков с различными типами элементов

Плавающая панель приложений и вложенная прокрутка с помощью SliverList
Поместите плавающую панель приложений над списком.

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

Иногда список содержит больше элементов, чем область просмотра экрана. В таких случаях нет смысла строить все элементы сразу. Во Flutter есть ListView.Builder, который использует подход Lazy rendering для эффективного создания элементов списка.
Работа с длинными списками

Перемещение между экранами и маршрутами

Большинство приложений содержат несколько экранов для отображения данных в хорошо организованном виде.

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

-----------------

Переход на новый экран и обратно

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

Возврат данных с экрана

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

  • Сколько у нас маршрутов?
  • Как инициализировать каждый маршрут?
  • Какие данные требуются каждому маршруту? И т. д.

Чтобы эффективно управлять всем этим, во Flutter есть именованные маршруты.

Навигация с помощью именованных маршрутов

Передавайте аргументы в именованных маршрутах.

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

Hero animation (https://flutter.dev/docs/cookbook/navigation/hero-animations)

Анимируйте виджет на разных экранах

Работа в сети

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

Во Flutter мы можем использовать Http в качестве стороннего паба, чтобы делать такие вещи.

http | Dart Package

Получение данных из сети

Выполнять аутентифицированные запросы

Работа с веб-сокетами

Во Flutter есть еще несколько пабов, которые делают подобные вещи более эффективно. Не забудьте взглянуть на следующие пабы.

dio | Dart Package

chopper | Dart Package

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

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

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

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

JSON и сериализация

Для ручного парсинга не забудьте проверить этот онлайн-инструмент для автоматической генерации шаблона для класса модели.

Мгновенный разбор JSON на любом языке | quicktype

Постоянство данных

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

Вы также можете читать и записывать файлы на диск.
Чтение и запись файлов

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

Персистирование данных с помощью SQLite

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

moor_flutter | Flutter Package

Управления состоянием (state)

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

Alt text of image

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

Здесь мы рассмотрим несколько возможных методов управления состоянием.

Способ setState
Добавление интерактивности в приложение на Flutter

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

Пакет провайдера
Провайдер — это смесь DI (инъекции зависимостей) и управления состояниями, построенная на виджетах для виджетов.

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

provider — Dart API docs

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

Здесь представлено официальное руководство: Bloc .

Я также нашел эту хорошую серию видео, объясняющую паттерн BLoC

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

Когда приложение растет, становится сложно тестировать каждую функцию, а тут еще и регрессия. В таких случаях на помощь приходит автоматизация тестирования. Оно помогает убедиться, что приложение работает так, как ожидается, до того, как мы его выпустим.
И мы не попадаем в такие ситуации. 😆

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

Юнит-тест тестирует одну функцию, метод или класс.

Тест *виджета (в других UI-фреймворках называется тестом компонента) тестирует один виджет.

Интеграционный тест тестирует все приложение или большую часть приложения.

Ознакомьтесь с введением в тестирование во Flutter здесь:

Тестирование приложений Flutter

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

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

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

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

Во Flutter есть gherkin, который помогает нам писать поведенческие тесты.

gherkin | Dart Package

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

Первая часть — https://starinsky.net/2023/12/23/flutter-base/

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
12 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии