Создаем Flutter-приложение для оплаты через СБП

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

🔸Создаем объект для полей bankName, logoURL и schema. (Для безопасного парсинга данных рекомендуем использовать паттерн проектирования DTO):

```dart
class BankItem {
  const BankItem({
    required this.bankName,
    required this.logoURL,
    required this.schema,
  });

  final String bankName;
  final String logoURL;
  final String schema;

  static BankItem? fromJson(Map<String, dynamic> json) {
    final bankName = json['bankName'] as String?;
    final logoURL = json['logoURL'] as String?;
    final schema = json['schema'] as String?;

    if (bankName == null || logoURL == null || schema == null) {
      return null;
    }

    return BankItem(
      bankName: utf8.decode(bankName.codeUnits),
      logoURL: logoURL,
      schema: schema,
    );
  }
}
```
 

*Здесь используем utf8 из-за проблем с кодировкой. Если у банка нет схемы, имени или картинки, не считаем его валидным.

🔸Создаем абстрактный репозиторий SbpRepository для управления запросами СБП и реализуем метод getBankList в NewtorkSbpRepository, чтобы получить список банков-участников СБП:

class NewtorkSbpRepository implements SbpRepository {
  Future<Iterable<BankItem>> getBankList() async {
    try {
      final response = await http.get(
        Uri.parse('https://qr.nspk.ru/proxyapp/c2bmembers.json'),
      );
      final decodedMap = jsonDecode(response.body) as Map<String, dynamic>;
      final rawBanks = decodedMap['dictionary'] as List;

      final banks = rawBanks.map((e) => BankItem.fromJson(e)).whereNotNull();

      return banks;
    } catch (error, trace) {
      /// Добавить обработку особых ошибок
      rethrow;
    }
  }
}

Реализованный метод можно вызывать на любом этапе бизнес-логики, где нужно получить список банков.

Для управления состояниями можно использовать любой стейт-менеджер, который вам нравится (например flutter_bloc, riverpod).

Мы рассмотрим вариант без сторонних библиотек, используем FutureBuilder и InheritedWidget.

🔸Создаем экран для оплаты, который будет при инициализации запрашивать список банков из репозитория:

class SbpPayScreen extends StatefulWidget {
  const SbpPayScreen({super.key});

  @override
  State<SbpPayScreen> createState() => _SbpPayScreenState();
}

class _SbpPayScreenState extends State<SbpPayScreen> {
  late final Future<Iterable<BankItem>> bankList;

  @override
  void initState() {
    bankList = SbpController.of(context).repository.getBankList();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        noscript: const Text('Оплата СБП'),
      ),
      body: FutureBuilder(
        future: bankList,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data!;
            return ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) => ListTile(
                noscript: Text(data.elementAt(index).bankName),
              ),
            );
          }
          if (snapshot.hasError) {
            return const Text('Произошла ошибка');
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

Как оперативно проверить приложение в AppStore?

Своим способом поделился Сергей, Team Lead Flutter-команды Friflex. Если нужно быстро выпустить обновление приложения (например, чтобы исправить критическую ошибку или добавить сборку с важным событием), можно воспользоваться процедурой срочной проверки.

Как действовать:

1️⃣ Выгрузите сборку приложения на ревью в App Store.

2️⃣ Отправьте запрос на срочную проверку. Для этого используйте форму по ссылке.

3️⃣ Дождитесь ответа. Обычно это занимает от 15 минут до 4 часов.

4️⃣ Радуйтесь одобрению.

P.S не балуемся этим способом слишком часто. Злоупотребление может привести к отказам в срочной проверке в будущем.

#пакет_недели — font_awesome_flutter. Это обертка для популярного набора иконок Font Awesome.

Главное о font_awesome_flutter
➡️Он меняет основные параметры иконок, такие как размер и цвет.
➡️Он применяет разные стили: solid, regular, light, и brands. В Pro версии стилей еще больше, включая duotone.
➡️Он поддерживает иконки брендов. Например, логотипы социальных сетей или известных компаний.

Как использовать
Добавляем зависимость и используем все стандартные иконки с помощью виджета Falcon:

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

IconButton(
  icon: FaIcon(FontAwesomeIcons.thumbsUp), // Иконка "пальцы вверх"
  onPressed: () {
    print("Liked!");
  },
),

Настраиваем иконки, задаем цвет и стили:

FaIcon(
  

FontAwesomeIcons.heart,  // Иконка "сердце"
  color: Colors.red,
  size: 50.0,
),

Можно исключить ненужные стили иконок из процесса генерации, чтобы уменьшить размер пакета:

$ ./configurator.sh --exclude solid
$ ./configurator.sh --exclude solid,brands

Иконки можно получить динамически по их имени — используйте faIconNameMapping.

import 'package:font_awesome_flutter/name_icon_mapping.dart';

...
    FaIcon(faIconNameMapping['solid abacus']);
...

🔥 Беру в работу
🤔 Слишком заморочено

Открываем рубрику #flutter_heroe — про людей из сообщества, за которыми интересно и полезно следить каждому, кто пишет на Flutter. Сегодня расскажем про Реми Русселе. Пользуетесь пакетами riverpod или provider? Это он их автор.

Вклад
🔴riverpod и provider: Реми разработал и поддерживает два из самых популярных пакетов для управления состоянием. Если provider стал стандартом для новичков, то riverpod предложил более гибкий и мощный подход.

🔴flutter_hooks: Этот пакет стал отличным инструментом для сокращения количества шаблонного кода и улучшения организации Flutter-компонентов.

Совет начинающим
«Не читайте слишком много кода. Сначала пишите код. Вы становитесь лучше не от чтения книг, а от практики. Но обязательно читайте исходный код того, что используете. Не до конца понимаете, как что-то работает? Прочтите его исходный код»

Где следить
🔗 Github
🔗 X
🔗 Stack Overflow

#пакет_недели — google_sign_in. Он помогает аутентифицировать пользователей через их аккаунт Google в приложениях на Flutter.

Главное о google_sign_in
🔸Он использует OAuth 2.0 для аутентификации и управления сессиями. Это позволяет безопасно идентифицировать пользователей и получать доступ к их данным (с их разрешения).

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

🔸Он работает на iOS, Android и Web, но настройка для каждой платформы может отличаться. Например, для Web нужно отдельно настроить OAuth.

Как использовать
Погрузиться во все детали можно с примером на Github.

❗️Приложение будет зависеть от того, есть ли у пользователя учетная запись в Google, и это может стать проблемой.

❤️ Точно в цель
🤔 Без аккаунта Google — не полетит

Юра, Tech Lead Flutter-команды Friflex, поделился новой подробной инструкцией, как установить все необходимое для написания приложения для Aurora на Flutter

Смотреть:
📎на YouTube
📎в VK