Hola, Amigos! Продолжаем разговор о безопасности приложений на Flutter.

Даже при корректной аутентификации приложение остается уязвимым, если сетевой слой и серверная валидация реализованы неправильно. В этой части поговорим о защите сетевых запросов, доверии к данным и проверке OTP.

1. SSL pinning — обязательное требование

Без pinning HTTPS не спасает от атаки MITM (Man In The Middle), когда злоумышленники перехватывают трафик между приложением и сервером, а потом читают или подменяют запросы через прокси или wi-fi:

final context = SecurityContext(withTrustedRoots: false);
context.setTrustedCertificatesBytes(certBytes);

final httpClient = HttpClient(context: context);

final dio = Dio()
  ..httpClientAdapter = IOHttpClientAdapter(
    createHttpClient: () => httpClient,
  );

Это блокирует:

- proxy
- fake Wi-Fi
- подмену сертификатов

2. OTP всегда проверяется на сервере

Проверка OTP на клиенте — критическая уязвимость:

if (enteredOtp == "123456") success();

Только сервер:

await api.verifyOtp(
  mobile: mobile,
  otp: enteredOtp,
);

3. Клиентская валидация — не финальная. Данные всегда проверяются на сервере:

bool isValidAmount(String value) {
  final amount = double.tryParse(value);
  return amount != null && amount > 0 && amount < 100000;
}

Эти меры закрывают большую часть рисков, но сами по себе они не решают все. Даже при защищенном трафике и корректной логике на бэке приложение остается уязвимым на уровне устройства и интерфейса.

В следующей части разберем защиту UI, работу с сессиями и ограничения на уровне устройства.

Hola, Amigos! Даже идеально защищенный backend не поможет, если приложение уязвимо на уровне устройства. В финальной части посмотрим на безопасность со стороны устройства и пользовательского интерфейса.

1. Запрещайте скриншоты на чувствительных экранах

Некоторые чувствительные данные не должны попадать в скриншоты:

@override
void initState() {
  super.initState();
  if (Platform.isAndroid) {
    FlutterWindowManager.addFlags(
      FlutterWindowManager.FLAG_SECURE,
    );
  }
}

2. Используйте биометрию

Биометрия нужна не только для логина.

final auth = LocalAuthentication();

await auth.authenticate(
  localizedReason: "Verify to access your bank account",
  options: const AuthenticationOptions(
    biometricOnly: true,
  ),
);

Подходит для различных сценариев:

- входа
- платежей
- доступа к профилю

3. Автоматический логаут и контроль сессии

class SessionManager {
  Timer? _timer;

  void start(void Function() onExpire) {
    _timer?.cancel();
    _timer = Timer(
      const Duration(minutes: 5),
      onExpire,
    );
  }

  void refresh() {
    _timer?.cancel();
  }
}

Выход при:

- уходе в фон
- бездействии
- истечении токена

4. Root / Jailbreak — блокировать

final isRooted = await RootChecker.isRooted();
if (isRooted) {
  exit(0);
}

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

5. Код и логи в продакшене

flutter build apk --obfuscate --split-debug-info=./symbols
flutter build ios --obfuscate

if (kDebugMode) {
  print("Token: $token");
}

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

Hola, Amigos! Продолжаем разбор полезных Flutter-виджетов для адаптивной верстки. Во второй части еще несколько инструментов, которые помогут сделать UI стабильным на разных экранах.

1. FractionallySizedBox. Позволяет задать размер дочернего виджета как долю от размера родителя (по ширине и/или высоте).

Use case: когда нужно, чтобы кнопка или контейнер занимали, например, 80% ширины родителя без hardcoded значений.

FractionallySizedBox(
  widthFactor: 0.8,
  child: ElevatedButton(
    onPressed: () {},
    child: Text("Continue"),
  ),
)

Помогает сохранять пропорции на разных экранах и устройствах → UI выглядит консистентно и адаптивно.

2. FittedBox. Масштабирует дочерний виджет так, чтобы он вписался в доступное пространство, сохраняя пропорции (aspect ratio).

Use case: когда нужно вписать крупный текст или иконку в небольшую карточку или контейнер без overflow.

FittedBox(
  child: Text(
    "Responsive Title",
    style: TextStyle(fontSize: 40),
  ),
)

Предотвращает ошибки переполнения (overflow) и гарантирует корректное масштабирование UI.

Что возьмете в работу?

Hola, amigos! Сегодня рассмотрим четыре инструмента, которые помогают писать чище код, избавляться от хардкода и не жертвовать производительностью.

1. LayoutBuilder работает с реальными ограничениями родительского виджета, чтобы интерфейс получился гибким и предсказуемым на любых устройствах

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 700) {
      return Row(
        children: [
          Sidebar(),
          Expanded(child: Content()),
        ],
      );
    }
    return Content();
  },
);

2. AnimatedSwitcher позволяет аккуратно анимировать переходы через fade, slide или scale и сразу делает интерфейс «дороже»

AnimatedSwitcher(
  duration: Duration(milliseconds: 300),
  child: Text('$count', key: ValueKey(count)),
);

3. TweenAnimationBuilder закрывает до 80% простых анимаций

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: progress),
  duration: Duration(milliseconds: 500),
  builder: (context, value, child) {
    return LinearProgressIndicator(value: value);
  },
);

4. RepaintBoundary изолирует часть UI и не дает ей перерисовываться без необходимости

RepaintBoundary(
  child: ExpensiveWidget(),
)

А что для в работе используете вы?

Hola, amigos! Сегодня разберем подборку Flutter-инструментов, которые прокачивают взаимодействие с пользователем.

1. Dismissible позволяет легко реализовать логику swipe-to-delete.

Dismissible(
  key: Key(item.id),
  background: Container(color: Colors.red),
  onDismissed: (direction) => deleteItem(item.id),
  child: ListTile(
    title: Text("Swipe me to delete"),
  ),
)

2. Tooltip показывает краткую подсказку при долгом нажатии (mobile) или наведении (web/desktop).

Tooltip(
  message: 'Download PDF',
  child: IconButton(
    icon: Icon(Icons.download),
    onPressed: () {},
  ),
)

3. Draggable подходит, чтобы реализовать drag-and-drop, как в Trello или корзине интернет-магазина.

Draggable<Color>(
  data: Colors.blue,
  feedback: Container(
    height: 100,
    width: 100,
    color: Colors.blue.withOpacity(0.5),
  ),
  childWhenDragging: Container(
    height: 100,
    width: 100,
    color: Colors.grey,
  ),
  child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
  ),
);

4. ReorderableListView идеально подходит для настроек, плейлистов и любых кастомных списков.

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    setState(() {
      if (newIndex > oldIndex) newIndex -= 1;
      final item = list.removeAt(oldIndex);
      list.insert(newIndex, item);
    });
  },
  children: list
      .map(
        (item) => ListTile(
          key: ValueKey(item),
          title: Text(item.toString()),
        ),
      )
      .toList(),
);

А какими виджетами для UX чаще всего пользуетесь вы? Делитесь в комментариях.

Запланируйте 2026 год вместе с Merge

В 2025 году под эгидой Merge прошло сразу четыре события для профессионального IT-сообщества, Мероприятия объединили более 6000 участников и свыше 500 спикеров.

Сейчас Merge строит планы на 2026 год. И приглашает всех присоединиться.

Merge Innopolis | 17–18 апреля
В 2026 году инновационный центр Поволжья, город Иннополис, готовится принять Merge в пятый раз. Все ключевые направления IT на одной площадке. 200+ спикеров, 2000+ участников, 10 потоков докладов по 7 ключевым трекам: «Разработка», «Управление», «Маркетинг», «Аналитика», «HR», «1С», «Карьера в IT».

Summer Merge | 3–5 июля
Самая летняя IT-тусовка на берегу Волги, неформальный нетворкинг и лучший палаточный уикенд для IT-специалистов.

Merge Baltic | 25–27 сентября
Профессиональная конференция Merge соберет представителей всех направлений сферы IT на берегу Балтийского моря. Здесь привычную деловую программу и нетворкинг расширит тревел-трек и экскурсии по удивительным местам Калининградской области.

По промокоду AMIGA действует скидка 10% на билеты. Успейте присоединиться до повышения цены.

Присоединяйтесь!

Hola, Amigos! Сегодня обсудим pattern matching. Он сокращает boilerplate, улучшает код и повышает безопасность работы со state.

1. Деструктуризация с помощью паттернов

Пример с Records:

var user = ('Naman', 29);
var (name, age) = user;

print(name);
print(age);

2. Деструктуризация объектов

Есть класс:

class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

Можно извлечь свойства так:

var User(:name, :age) = user;

Это эквивалентно:

var name = user.name;
var age = user.age;

3. Pattern Matching в switch

Традиционный подход:

if (state is Success) {
  final data = state.data;
}

Подход с pattern matching

switch (state) {
  case Success(data: var data):
    render(data);
  case Loading():
    showLoader();
  case Error(message: var msg):
    showError(msg);
}

4. Сопоставление коллекций

Паттерны умеют анализировать списки и map:

switch(list) {
  case []:
    print("Empty");
  case [first, second]:
    print(first);
}

switch(json) {
  case {'status': 'ok', 'data': var d}:
    process(d);
  case {'status': 'error', 'message': var m}:
    showError(m);
}

5. Guard-условия

switch(user) {
  case User(age: var age) when age > 18:
    print("Adult");
  case _:
    print("Minor");
}

А вы используете pattern matching?

Hola, Amigos! На связи Павел Гершевич, Mobile Team Lead в Amiga. Сегодня мы поговорим про то, как лучше всего кешировать картинки и в каком качестве их выводить на экран.

Часто случается ситуация, что сервер отдает слишком большую картинку. А уж если их несколько на одном экране - могут возникнуть проблемы с производительностью, да и размер кеша может значительно вырасти.

Как и все, для кеширования и отображения картинок с интернета, мы используем хорошо знакомую всем библиотеку cached_network_image. Но не все знают, что при помощи нее можно настроить максимальный размер изображения, который будет закеширован и показан на экране. Для этого есть 4 свойства:

maxHeightDiskCache: 300,
maxWidthDiskCache: 300,
memCacheHeight: 300,
memCacheWidth: 300,

Давайте разберемся с ними:

maxHeightDiskCache и maxWidthDiskCache отвечают за кеш, который хранится в постоянной памяти. Уменьшая его размер, мы уменьшаем количество данных на устройстве пользователя.

memCacheHeight и memCacheWidth отвечают за изображение, которое хранится в ОЗУ и выводится пользователю. Делается это при помощи встроенного в Flutter виджета - ResizeImage. Похожие свойства есть и в Image.network - cacheHeight и cacheWidth. Тут мы указываем именно размер виджета, а не изображения.

Теперь давайте рассмотрим, как их использовать. Для того, чтобы правильно подобрать размер, нам нужны: ширина и высота виджета и Device Pixel Ratio - характеристика устройства, которая показывает плотность пикселей. Если размер нам неизвестен либо высчитывается автоматически, то можно прибегнуть к получению constraints через LayoutBuilder. В итоге у нас получается такой код:

LayoutBuilder((context, constraints) {
  final devicePixelRatio = MediaQuery.devicePixelRatioOf(context);
  final cacheHeight = constraints.maxHeight * devicePixelRatio;
  final cacheWidth = constraints.maxWidth * devicePixelRatio;
  return CachedNetworkImage(
    …
    maxHeightDiskCache: cacheHeight,
    maxWidthDiskCache: cacheWidth,
    memCacheHeight: constraints.maxHeight,
    memCacheWidth: constraints.maxWidth,
    …
  );
});

Делитесь в комментариях, пробовали ли вы такой способ оптимизации производительности приложения?