⚙️ Требования

Перед началом работы убедитесь что на вашем компьютере установлено всё необходимое.

Требования к хостингу (для новостей и галереи)

Если вы хотите использовать новости и галерею в приложении, вам нужен хостинг с WordPress. Если новости и галерея не нужны — хостинг не обязателен.

Необходимые инструменты

Установка Flutter

flutter doctor

🚀 Быстрый старт

Запустите приложение за несколько минут.

1

Распакуйте архив

Распакуйте скачанный архив с исходниками в удобную папку.

2

Откройте проект в Android Studio

Запустите Android Studio → File → Open → выберите папку проекта.

Открытие проекта в Android Studio

3

Установите зависимости

В терминале Android Studio выполните:

flutter pub get

4

Запустите эмулятор или подключите телефон

В Android Studio выберите устройство в выпадающем списке вверху.

5

Нажмите Run ▶

Приложение соберётся и запустится на устройстве.

Кнопка Run в Android Studio

✅

Готово!

Приложение запущено. Теперь настройте его под ваше заведение в файле lib/config/app_config.dart

📁 Структура проекта

Обзор файлов и папок проекта.

🔧 Настройка app_config.dart

Главный файл конфигурации. Здесь настраивается всё приложение — название, контакты, цвета, меню и многое другое.

Путь к файлу: lib/config/app_config.dart

Основное

dart// Название заведения (отображается в приложении)
static const String appName = 'Pizza Mart';

// Подзаголовок на главной странице  
static const String appTagline = 'Вкусная еда с доставкой';

Контакты

static const String phone = '+7 999 000 00 00';
static const String whatsapp = '79990000000'; // без + и пробелов
static const String address = 'г. Москва, ул. Примерная, д. 1';
static const String workingHours = 'Ежедневно с 10:00 до 23:00';
static const String instagram = 'https://www.instagram.com/ваш_аккаунт';
static const String dzen = 'https://dzen.ru/ваш_канал'; // пусто если нет

Координаты на карте

// Найдите координаты на Яндекс Картах
static const double mapLat = 55.751244;  // широта
static const double mapLng = 37.618423;  // долгота

Баннер на главной

// Прямая ссылка на изображение (рекомендуемый размер 1200x800 px)
static const String heroBannerUrl = 'https://ваш-сайт.ru/banner.jpg';

Бронирование

// Текст о депозите (оставьте пустым если депозит не нужен)
static const String bookingDepositInfo = 'Депозит 1000 ₽ с человека';

// Отключить раздел бронирования
static const bool bookingEnabled = false;

Социальные сети в контактах

static const bool showWhatsApp = true;
static const bool showInstagram = true;
static const bool showDzen = false;

📄 PDF Меню

PDF файлы меню хранятся локально в проекте и открываются встроенным просмотрщиком без браузера.

Шаг 1 — Подготовьте PDF файлы

Создайте PDF файлы меню. Рекомендации:

• Оптимальный размер: до 3 МБ на файл
• Для сжатия используйте ilovepdf.com
• Формат страниц: вертикальный (портретный)

Шаг 2 — Скопируйте файлы в проект

Скопируйте PDF файлы в папку:

assets/pdfs/food.pdf
assets/pdfs/drinks.pdf
assets/pdfs/desserts.pdf

Шаг 3 — Настройте категории

В файле app_config.dart настройте список категорий:

static const List<Map<String, dynamic>> menuCategories = [
  {
    'title': 'Еда',           // название категории
    'icon': 'fa_burger',      // иконка
    'file': 'food.pdf',       // имя файла в assets/pdfs/
  },
  {
    'title': 'Напитки',
    'icon': 'fa_martini',
    'file': 'drinks.pdf',
  },
  // Добавляйте сколько нужно...
];

Результат

Экран меню с категориями PDF

🎨 Иконки меню

В приложении используется библиотека Font Awesome с тысячами иконок для разделов меню.

Как найти иконку

1

Откройте сайт Font Awesome

Перейдите на fontawesome.com/icons

2

Найдите иконку

Введите название на английском в поиск: pizza, burger, wine, salad и т.д.

Поиск иконок на сайте fontawesome.com

3

Выберите бесплатную иконку

Фильтруйте по Free — только они доступны без подписки.

4

Скопируйте название

Нажмите на иконку и скопируйте её название, например pizza-slice

Как использовать в app_config.dart

Добавьте префикс fa_ и замените дефисы на подчёркивания:

Место 1 — в app_config.dart:

'icon': 'fa_salad',

Место 2 — в lib/screens/menu_screen.dart в метод _getFaIcon():

case 'fa_salad': return FontAwesomeIcons.leaf;

Готовые иконки

Эти иконки уже добавлены и работают без дополнительных изменений:

📱 Telegram уведомления

При каждом бронировании столика в Telegram будет приходить сообщение с данными клиента.

Создание бота

1

Найдите @BotFather в Telegram

Откройте Telegram и в поиске найдите @BotFather (официальный бот с синей галочкой).

@BotFather в Telegram

Получение Chat ID

Вариант А — Группа или канал

https://api.telegram.org/botВАШ_ТОКЕН/getUpdates

Вариант Б — Личные сообщения

Настройка в app_config.dart

static const String telegramToken = '1234567890:AAFtaxABx...';

// Для группы/канала (с минусом):
static const String telegramChatId = '-1001234567890';

// Для личных сообщений (без минуса):
static const String telegramChatId = '123456789';

🌐 WordPress — новости и галерея

Новости и галерея загружаются автоматически с вашего WordPress сайта через REST API.

Настройка

static const String wordpressUrl = 'https://ваш-сайт.ru';

Требования к WordPress

• WordPress 5.0 и выше
• REST API включён (включён по умолчанию)
• Плагины не требуются

Новости

Публикуйте новости в разделе WordPress → Записи. В приложении отображаются 20 последних записей.

Раздел Записи в WordPress

Галерея

Загружайте фото в WordPress → Медиафайлы. В приложении отображаются 50 последних изображений.

Раздел Медиафайлы в WordPress

Если сайта нет

// Оставьте пустым — новости и галерея скроются автоматически
static const String wordpressUrl = '';

🎯 Онбординг

Три экрана которые показываются только при первом запуске приложения. После просмотра больше не появляются.

Онбординг 1

Онбординг 2

Онбординг 3

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

Откройте файл lib/screens/onboarding_screen.dart и найдите список _pages:

final List<Map<String, String>> _pages = [
  {
    'title': 'Добро пожаловать!',
    'description': 'Ваше описание первого экрана.',
    'image': 'assets/intro/intro1.jpg',
  },
  {
    'title': 'Заголовок 2',
    'description': 'Описание второго экрана.',
    'image': 'assets/intro/intro2.jpg',
  },
  {
    'title': 'Заголовок 3',
    'description': 'Описание третьего экрана.',
    'image': 'assets/intro/intro3.jpg',
  },
];

Добавление картинок

Скопируйте фото в папку проекта:

assets/intro/intro1.jpg
assets/intro/intro2.jpg
assets/intro/intro3.jpg

Сброс онбординга для тестирования

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

🖼️ Иконка приложения

Иконка приложения которая отображается на рабочем столе телефона.

Подготовка иконки

• Размер: 1024×1024 px
• Формат: PNG
• Для App Store: без прозрачного фона

Сохраните иконку по пути:

assets/icon/icon.png

Настройка адаптивной иконки

В pubspec.yaml настройте цвет фона адаптивной иконки (для Android 8+):

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  adaptive_icon_background: "#E85D26"  # ваш цвет фона
  adaptive_icon_foreground: "assets/icon/icon.png"

Генерация иконок

flutter pub get
dart run flutter_launcher_icons

💫 Сплеш экран

Экран загрузки который показывается при запуске приложения.

Настройка

В pubspec.yaml настройте цвет фона и изображение:

flutter_native_splash:
  color: "#000000"          # цвет фона
  image: assets/icon/icon.png
  android_12:
    image: assets/icon/icon.png
    color: "#000000"

Применение изменений

dart run flutter_native_splash:create

🎨 Цвета и тема

Изменение цветовой схемы приложения.

Настройка цветов

В app_config.dart:

static const Color backgroundColor = Color(0xFF0A0A0A); // фон приложения
static const Color surfaceColor = Color(0xFF141414);    // цвет карточек
static const Color accentColor = Color(0xFFE85D26);     // акцентный цвет

Как задать цвет

Цвет задаётся в формате Color(0xFFRRGGBB) где:

• FF — непрозрачность 100%
• RRGGBB — HEX код цвета

Например для цвета #E85D26: Color(0xFFE85D26)

🔔 Firebase Push уведомления

Отправляйте push уведомления всем пользователям приложения через Firebase Cloud Messaging.

Настройка Firebase

1

Создайте проект Firebase

Перейдите на console.firebase.google.com → Добавить проект → введите название.

Создание нового проекта Firebase

2

Добавьте Android приложение

На странице проекта нажмите иконку Android → введите package name из android/app/build.gradle.kts

3

Скачайте google-services.json

Скачайте файл google-services.json и скопируйте его в папку android/app/

Отправка уведомлений

1

Откройте Firebase Console

Перейдите на console.firebase.google.com → ваш проект

2

Откройте Messaging

В левом меню: DevOps & Engagement → Messaging

3

Создайте уведомление

Нажмите Создать первую кампанию → Firebase Notification messages

Создание уведомления в Firebase Console

4

Заполните и отправьте

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

🔐 Подпись APK

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

Создание ключа подписи

Выполните команду в терминале (только один раз):

keytool -genkey -v -keystore C:\my_keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias mykey

Заполните поля:

Создание key.properties

Создайте файл android/key.properties:

storePassword=ВАШ_ПАРОЛЬ
keyPassword=ВАШ_ПАРОЛЬ
keyAlias=mykey
storeFile=C:\\путь\\к\\my_keystore.jks

📦 Сборка APK

Сборка подписанного APK для публикации в магазинах.

Обновление версии

Перед каждым новым релизом обновите версию в pubspec.yaml:

version: 1.0.1+2
#        ^^^^^  ^
#        версия  номер сборки (должен быть больше предыдущего)

Сборка APK

flutter build apk --release --split-per-abi

Готовые файлы:

Сборка AAB (для Google Play)

flutter build appbundle --release

🏪 Публикация в магазинах приложений

Инструкция по публикации приложения в Google Play, RuStore, AppGallery и других магазинах.

Что нужно подготовить

• Подписанный APK или AAB файл
• Иконка приложения 512×512 px
• Минимум 2-3 скриншота приложения (размер 1080×1920 px)
• Короткое описание (до 80 символов)
• Полное описание (до 4000 символов)
• Политика конфиденциальности

Google Play

flutter build appbundle --release

RuStore

flutter build apk --release --split-per-abi

AppGallery (Huawei)

Публикация обновления (для всех магазинов)

version: 1.0.1+2  # версия и номер сборки (должен расти)

# Для Google Play (AAB):
flutter build appbundle --release

# Для RuStore и AppGallery (APK):
flutter build apk --release --split-per-abi

Сравнение магазинов

❓ FAQ

Ответы на частые вопросы.

Галерея и новости не загружаются

Проверьте что в app_config.dart указан правильный wordpressUrl. URL должен быть без слеша в конце и без /wp-json/

Бронирования не приходят в Telegram

Проверьте:

• telegramToken скопирован полностью от @BotFather
• telegramChatId для группы начинается с минуса -
• Бот добавлен в группу как администратор
• Для личных сообщений — написали боту /start

PDF не открывается

Убедитесь что:

• Файл скопирован в папку assets/pdfs/
• Название файла в app_config.dart точно совпадает с именем файла
• Папка зарегистрирована в pubspec.yaml в разделе assets

Иконка меню не отображается

При добавлении новой Font Awesome иконки нужно добавить её в двух местах — в app_config.dart и в метод _getFaIcon() в menu_screen.dart

Ошибка при сборке — different roots

Проект находится на другом диске от Flutter кэша. Решение — в Android Studio: File → Settings → Languages & Frameworks → Flutter → укажите правильный путь к Flutter SDK.

Push уведомления не приходят

Убедитесь что:

• Файл google-services.json скопирован в папку android/app/
• Package name в Firebase совпадает с applicationId в build.gradle.kts
• Приложение получило разрешение на уведомления

Как сбросить онбординг для тестирования

Удалите и переустановите приложение, или очистите данные приложения в Настройки телефона → Приложения → Pizza Mart → Очистить данные

📞 Контакты и поддержка

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

Email

Социальные сети

Исходный код

Маркетплейсы

Перед обращением в поддержку

Пожалуйста, проверьте следующее:

• Прочитайте раздел FAQ — возможно ответ уже есть
• Убедитесь что используете версию Flutter 3.41.6 и выше
• При сообщении об ошибке — приложите текст ошибки из терминала
• Укажите версию Android Studio и операционной системы

📝 Changelog

v1.0.0 — Первый релиз

• ✅ Главный экран с баннером, галереей и новостями
• ✅ PDF меню со встроенным просмотрщиком
• ✅ Форма бронирования с уведомлением в Telegram
• ✅ Новости из WordPress
• ✅ Галерея из WordPress медиафайлов
• ✅ Экран контактов с картой Яндекс
• ✅ Онбординг — 3 экрана при первом запуске
• ✅ Push уведомления через Firebase FCM
• ✅ Font Awesome иконки для меню
• ✅ Кастомное нижнее меню с поднятой кнопкой
• ✅ Сплеш экран
• ✅ Политика конфиденциальности внутри приложения