SQLite

SQLite — компактная СУБД без сервера: база живёт файлом внутри приложения. Это то, что нужно мобильному приложению, которому нужно хранить данные локально и работать без сети, — учёту личных финансов, дневнику здоровья, списку заметок.

осторожно

В веб-приложениях SQLite пока не поддерживается.

Разберём на примере: приложение для заметок, где их можно добавлять, править и удалять. Готовый результат:

Порядок работы:

  1. Включить SQLite
  2. Настроить базу
  3. Добавить SQL-запросы
  4. Вывести список заметок
  5. Добавить заметку
  6. Изменить заметку
  7. Удалить заметку

1. Включить SQLite

Откройте Settings and Integrations > Integrations > SQLite и включите тумблер Enable SQLite.

Включение SQLite в настройках интеграций

2. Настроить базу

На этом шаге вы загружаете файл базы SQLite и даёте ему имя — по нему база инициализируется при запуске приложения.

Готовой базы нет? Создайте её в sqlitebrowser: скачайте программу, создайте базу, опишите таблицы и при желании заполните их данными. Готовый файл загрузите во FlutterFlow.

Для примера создадим таблицу «Notes» с колонками ID, Title, Details, DueDate и IsCompleted.

внимание

Не называйте колонки зарезервированными словами SQL — type, data и подобными. Без специального экранирования это приводит к ошибкам сборки и странному поведению. Полный перечень — в списке зарезервированных слов SQL.

Как создать и настроить базу:

инфо
Важная деталь

В SQLite нет отдельных типов для даты-времени и логических значений. Дату вроде DueDate хранят целым числом — временной меткой UNIX. Логическое значение (заметка выполнена или нет) — тоже целым: 0 — ложь, 1 — истина.

3. Добавить SQL-запросы

Запросы делятся на две группы, и добавляются они в разных секциях.

1. Read Queries

Запросы, которые только читают данные и ничего не меняют:

  • SELECT * FROM customers; — все строки и колонки.
  • SELECT name, city FROM customers; — только нужные колонки.
  • SELECT * FROM customers WHERE city = 'New York'; — строки по условию.

2. Update Queries

Запросы, которые меняют базу:

  • INSERT INTO customers (name, address, city) VALUES ('John', '555 Main St', 'New York') — добавить строки.
  • UPDATE customers SET address = '123 Main Street' WHERE name = 'John' — изменить существующие.
  • DELETE FROM customers WHERE city = 'Chicago' — удалить по условию.

Любому запросу задают имя, текст и переменные, через которые приложение передаёт в него значения. Для Read Queries дополнительно описывают выходные колонки — по их именам данные потом выводятся в интерфейсе.

совет
  • Переменная подставляется синтаксисом ${имяПеременной}: SELECT * FROM Notes WHERE id = ${noteId}.
  • Строковые значения берите в одинарные кавычки — '${title}', иначе SQLite не поймёт, что это текст.

Описание переменных запроса

Запросы, которые понадобятся в примере:

1. GetAllNotes

Возвращает все заметки.

Select * from Notes

2. AddNote

Добавляет заметку.

INSERT INTO Notes (Title, Details, DueDate, IsCompleted) VALUES ('${title}', '${details}', ${dueDate}, 0);

3. UpdateNote

Обновляет заметку по её ID.

UPDATE Notes
SET 
    Title = '${title}',
    Details = '${details}',
    DueDate = ${dueDate},
    IsCompleted = ${isCompleted}
WHERE ID = ${id};

4. DeleteNote

Удаляет заметку по ID.

DELETE FROM Notes WHERE ID = ${id};

4. Вывести список заметок

Список собирают из ListView и Container — примерно так:

Страница со списком заметок

Дальше на ListView вешают запрос к SQLite.

Как добавить запрос SQLite

  1. Выберите виджет или страницу, к которым добавляете запрос.
  2. В Properties Panel справа откройте Backend Query.
  3. Нажмите Add Query и в Query Type выберите SQLite Query.
  4. Выберите Query Name — в списке только запросы на чтение — и нажмите Confirm.

Теперь данные запроса можно вывести на вложенных виджетах:

  1. Выберите виджет — например, Text.
  2. В Properties Panel откройте Set from Variable, выберите строку вашего запроса, затем нужную колонку и нажмите Confirm.

инфо

В примере срок хранится временной меткой UNIX — показывать её пользователю бессмысленно. Поэтому в проекте-образце добавлена собственная функция, которая переводит метку в понятную дату.

5. Добавить заметку

Новая заметка попадает в базу через действие SQLite Query с типом Update Query и именем запроса AddNote.

6. Изменить заметку

Правка полей и отметка «выполнено» — то же действие с типом Update Query, имя запроса UpdateNote.

инфо
  • В примере заметка редактируется в нижней панели. Чтобы пользователь видел, что именно он правит, поля сразу заполнены текущими значениями: заметка передаётся в панель с Type, равным SQLite Row.

    Передача строки SQLite в компонент

  • При обновлении даты проверяется, менялась ли она. Если нет — обратно уходит то же значение.

7. Удалить заметку

Удаление — действие SQLite Query с типом Update Query и именем запроса DeleteNote.

совет
Совет

Чтобы страница обновилась, добавьте следом Update App State с Update Type, равным «Rebuild Current Page».

инфо
Проект-образец

Всё вместе — в готовом проекте.

Частые вопросы

Справится ли SQLite со сложными структурами данных лучше, чем App State?

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

Подходит ли SQLite приложению, которое должно работать офлайн?

Да. Данные лежат на устройстве, поэтому читать и менять их можно без интернета.

Не просядет ли производительность по сравнению с App State?

SQLite лёгкий и быстрый, так что заметного замедления не будет. На больших объёмах данных он, наоборот, эффективнее переменных состояния.

Что с сохранностью данных?

SQLite работает транзакциями и следит за целостностью: база остаётся согласованной даже если приложение аварийно завершилось или устройство выключилось.

перевод официальной документации FlutterFlow

обновлено

ESC