Записки мобильного разработчика

Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня я поведаю о своём опыте интеграции штрих-кодов во Flutter-приложение.

Задача: сделать страницу с вертикальным штрих-кодом на весь экран. Слева от него надписи «номер карты» и сам номер карты.

Дополнительным усложнением был контроль яркости устройства. Если он меньше 80% на этой странице, то нужно повысить его искусственно.

Сначала создаю штрих-код с помощью пакета barcode_widget.

BarcodeWidget(
                      barcode: Barcode.ean13(drawEndChar: true),
                      data: data,
                      drawText: false,
                      errorBuilder: (context, error) => Center(
                        child: Text(error),
                      ),
                    )

Теперь разворачиваю этот виджет на 90 градусов, чтоб он принял вертикальное положение на весь экран. К сожалению, настройки ширины ограничены и пришлось всё делать через RotatedBox.

RotatedBox(
            quarterTurns: 1,
            child: Column(
              children: [
                Expanded(
                  flex: 8,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
                    child: BarcodeWidget(
<...>
                    ),
                  ),
                ),
              ],
            ),
          )

Штрих-код готов, осталось добавить записи и тоже вертикально.

RotatedBox(
            quarterTurns: 1,
            child: Column(
              children: [
                Expanded(
                  flex: 8,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
                    child: BarcodeWidget(
<...>
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          S.current.barCodePageCardNumber,
                          style: textStyle,
                        ),
                        Text(
                          widget.cardCode,
                          style: textStyle,
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          )

Перепробовал множество способов вёрстки, и это оптимальное решение, которое мне удалось найти. Если у вас был более удачный опыт, пишите в чате!

Осталось сделать регулирование яркости устройства. Я использовал пакет screen_brightness. Для работы с ним необходимо разрешение для Android: <uses-permission android:name="android.permission.WAKE_LOCK" />. Пакет позволяет менять яркость устройства через класс ScreenBrightness.

@override
void initState() {
  initBrightness();
  super.initState();
}
  
Future<void> initBrightness() async {
    final isRealDevice = await SafeDevice.isRealDevice;
    if (isRealDevice) {
      brightness = await ScreenBrightness().current;
      if (brightness < 0.8) {
        await ScreenBrightness().setScreenBrightness(0.8);
      }
    }
  }

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

Material(
  child: PopScope(
 onPopInvoked: (value) async {
   await ScreenBrightness().setScreenBrightness(brightness);
 },
 child: Scaffold(
   appBar: AppBar(
     backgroundColor: const Color(0xFF1A1A18),
     leading: InkWell(
       onTap: () async {
         await await ScreenBrightness().setScreenBrightness(brightness);
         if (mounted) {
           Navigator.of(context).pop();
         }
       },
       <…>

Был ли у вас подобные задачи? ➡️ Чат.