1. Основы Flutter и проектирование UI приложения для арендодателя
Основы Flutter и проектирование UI приложения для арендодателя
Разработка мобильного приложения начинается с выбора правильного инструмента и грамотного проектирования пользовательского интерфейса. В нашем случае задача состоит в создании удобного инструмента для арендодателя, который позволит вести учет квартирантов, фиксировать ежемесячную арендную плату, а также рассчитывать стоимость коммунальных услуг на основе показаний счетчиков и справочника тарифов. Для реализации этой задачи мы будем использовать Flutter.
Flutter — это кроссплатформенный фреймворк от компании Google, использующий язык программирования Dart. Его главное преимущество заключается в том, что он позволяет создать единую кодовую базу, которая будет работать как на устройствах iOS, так и на Android, сохраняя при этом высокую производительность и плавность анимаций.
Декларативный подход и концепция виджетов
Фундаментальная концепция Flutter заключается в том, что абсолютно всё в пользовательском интерфейсе является виджетом. Кнопка, текст, отступ, выравнивание и даже сам экран — это виджеты. Они комбинируются друг с другом, образуя иерархическое дерево виджетов (Widget Tree).
В отличие от императивного подхода, где разработчик вручную указывает системе, как изменить элемент на экране (например, «найди текстовое поле и поменяй его цвет на красный»), Flutter использует декларативный UI.
> Декларативный интерфейс означает, что разработчик описывает, как должен выглядеть экран при определенном состоянии данных, а фреймворк сам берет на себя задачу перерисовки интерфейса при изменении этих данных.
Математически эту концепцию можно выразить простой формулой:
Где — это пользовательский интерфейс, — функция сборки (метод build во Flutter), а — текущее состояние приложения (например, список жильцов или введенные показания счетчика воды). Как только меняется , функция вызывается заново, и интерфейс обновляется.
!Схема дерева виджетов и потока данных
Проектирование структуры приложения арендодателя
Прежде чем писать код, необходимо спроектировать структуру экранов. Приложение для управления недвижимостью должно быть интуитивно понятным, так как арендодатель будет использовать его регулярно для ввода числовых данных.
Выделим четыре основных экрана нашего приложения:
Для реализации навигации между этими экранами во Flutter часто используется виджет BottomNavigationBar — нижняя панель с иконками, позволяющая быстро переключаться между основными разделами.
Базовые виджеты для построения интерфейса
При создании экранов мы будем опираться на базовый набор структурных виджетов. Понимание их работы критически важно для верстки.
* Scaffold: «строительные леса» экрана. Предоставляет стандартную структуру с верхней панелью (AppBar), телом экрана и нижней панелью навигации.
* Column и Row: виджеты для выстраивания дочерних элементов в колонку (по вертикали) или в строку (по горизонтали).
* ListView: виджет для создания прокручиваемых списков. Идеально подходит для отображения десятков квартирантов.
* Card: визуальный контейнер с закругленными углами и тенью. Отлично подходит для оформления информации об отдельном жильце.
* TextField: поле для ввода текста или чисел. Будет использоваться для ввода показаний счетчиков.
!Интерактивный конструктор карточки жильца
Управление состоянием: Stateless и Stateful виджеты
Во Flutter все виджеты делятся на две большие категории в зависимости от того, могут ли они изменять свой внешний вид после создания.
| Тип виджета | Описание | Пример использования в нашем приложении | | :--- | :--- | :--- | | StatelessWidget | Виджет без состояния. Его внешний вид задается один раз при создании и не меняется. | Статическая иконка счетчика, заголовок экрана «Справочник тарифов», разделительная линия. | | StatefulWidget | Виджет с состоянием. Может перерисовываться в ответ на действия пользователя или получение новых данных. | Чекбокс «Оплата получена», поле ввода показаний воды, счетчик общей суммы долга. |
Для экрана ввода показаний счетчиков нам обязательно понадобится StatefulWidget, так как цифры на экране должны обновляться по мере того, как пользователь набирает их на клавиатуре.
Рассмотрим пример кода, описывающего простую карточку жильца с использованием StatelessWidget. Обратите внимание на вложенность элементов:
```dart import 'package:flutter/material.dart';
class TenantCard extends StatelessWidget { final String name; final double rentAmount;
const TenantCard({Key? key, required this.name, required this.rentAmount}) : super(key: key);
@override Widget build(BuildContext context) { return Card( margin: const EdgeInsets.all(8.0), child: ListTile( leading: const Icon(Icons.person), title: Text(name), subtitle: Text('Аренда: PV_{current}V_{previous}T(1650 - 1500) \times 5 = 750TotalRent\sum_{i=1}^{n} P_inV_{current} < V_{previous}$ (текущие показания меньше предыдущих), интерфейс должен подсветить поле красным цветом и заблокировать кнопку сохранения, так как счетчик не может крутиться в обратную сторону (за исключением случаев замены счетчика, что потребует отдельного бизнес-процесса в приложении).
Грамотное разделение визуальной части (виджетов) и бизнес-логики (расчетов) позволит в будущем легко масштабировать приложение, добавляя новые типы услуг или сложные сезонные тарифы, не переписывая при этом весь код пользовательского интерфейса.