Привет, Flutter-энтузиасты! Сегодня мы поговорим о том, как можно определить, что мобильное приложение написано на Flutter. Это знание может быть полезным для разработчиков и менеджеров в иссоедовании конкурентов, а также для любителей технологий, которые просто хотят узнать больше о том, что находится под капотом их любимых приложений. Итак, без лишних предисловий, давайте приступим.

Плавный интерфейс и сложные анимации

  • Сложность: 1

  • Точность: 2

Flutter славится своими возможностями создания плавных и красивых интерфейсов. Если видите что-то необычайно красивое и плавное, возможно, перед вами Flutter-приложение. Однако важно помнить, что хороший дизайн и плавность анимаций могут быть достигнуты и в других фреймворках, так что это лишь один из многих признаков.

С другой стороны,если в приложении дёрганные анимации и большое время отклика, это тоже может быть Flutter-приложение. Скорее всего разработчики не очень старались над этим приложением либо заказчик решил сэкономить.

Скроллинг двумя пальцами происходит в два раза быстрее

  • Сложность: 1

  • Точность: 3

В приложениях на Flutter скроллинг двумя пальцами происходит в два раза быстрее по сравнению с нативными приложениями. Более того, скроллинг тремя пальцами происходит в 3 раза быстрее. Однако, стоит отметить, что разработчики Flutter не дремлют и недавно исправили этот "баг", поэтому этот метод может быть не так надёжен, как раньше.

Приложения, представленные на официальной странице Flutter

  • Сложность: 1

  • Точность: 5

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

Доска почёта Flutter
Доска почёта Flutter

Онлайн-сервис FlutterHunt

  • Сложность: 1

  • Точность: 4

FlutterHunt — это онлайн-база данных, собирающая информацию о приложениях, разработанных на Flutter. Кстати, пообщаться с создателем этого сервиса можно здесь.

FlutterHunt
FlutterHunt

Приложение Flutter Shark

  • Сложность: 1

  • Точность: 4

Да, существует целое приложение для определения, использует ли другое приложение Flutter! Оно анализирует установленные на вашем устройстве приложения и определяет, разработаны ли они на Flutter. Интересно, а Flutter Shark написано на Flutter?

Приложение Flutter Shark
Приложение Flutter Shark

Скорость разработки и единая кодовая база

  • Сложность: 3

  • Точность: 2

Flutter позволяет разработчикам использовать один и тот же код для создания приложений как для Android, так и для iOS, что значительно ускоряет процесс разработки. Если вы замечаете, что компания выпускает новые функции одновременно на обе платформы и делает это довольно быстро, возможно, они используют Flutter.

Включение "Show layout bounds" в меню разработчика

  • Сложность: 4

  • Точность: 4

Этот метод для крепких мидлов. В настройках разработчика Android вы можете включить опцию "Show layout bounds", чтобы увидеть границы элементов интерфейса. Flutter-приложения имеют собственный механизм рендеринга, соответственно элементы интерфейса не имеют границ в отличие от нативных приложений.

Как включить "Show layout bounds" в меню разработчика на Android

Шаг 1: Включите режим разработчика

  • Откройте настройки вашего устройства Android.

  • Прокрутите вниз до пункта "О телефоне".

  • Найдите номер сборки (он может находиться в разделе "Информация о программном обеспечении" или "Информация о телефоне").

  • Нажмите на номер сборки 7 раз. Вы увидите сообщение о том, что вы становитесь разработчиком.

Шаг 2: Включите "Show layout bounds"

  • Вернитесь в основное меню настроек.

  • Прокрутите вниз до нового пункта "Для разработчиков" или "Опции разработчика", который появился после активации режима разработчика.

  • Войдите в "Опции разработчика".

  • Пролистайте вниз до раздела "Отладка" или "Визуализация".

  • Найдите и включите опцию "Show layout bounds" или "Показать границы макета".

Отладка

  • Сложность: 5

  • Точность: 5

Вот мы и подошли к методу для настоящих сеньёров. Flutter-приложения можно идентифицировать по определённым характеристикам их работы и взаимодействия с системой, доступных при отладке. Android Studio и Visual Studio Code позволяют наблюдать за жизненным циклом приложения, его взаимодействием с системой и другими техническими аспектами.

Вот как вы можете это сделать:

  • Подключите устройство к компьютеру. Убедитесь, что на вашем устройстве включен режим разработчика и разрешена отладка по USB.

  • Откройте вашу среду разработки. Запустите Android Studio или Visual Studio Code с установленным плагином Flutter и Dart.

  • Запустите ADB (Android Debug Bridge). Откройте терминал или командную строку и введите команду adb devices, чтобы убедиться, что ваше устройство подключено.

  • Запустите приложение на устройстве. Откройте нужное Flutter-приложение на вашем устройстве.

  • Откройте Logcat в Android Studio. В Android Studio перейдите во вкладку "Logcat" (внизу экрана). В Visual Studio Code используйте встроенный терминал для просмотра логов, выполнив соответствующую команду для запуска логов.

  • Фильтруйте вывод лога по идентификатору приложения.

  • Ищите упоминания Flutter и Dart VM. При запуске и работе Flutter-приложения в логах могут появляться сообщения, связанные с Dart VM или Flutter Engine.

Этот метод является одним из самых надёжных способов определить, разработано ли приложение с использованием Flutter.

Разбор APK-файла

  • Сложность: 666

  • Точность: 5

Если предыдущие методы вас не удовлетворили, вы можете изучить приложение на более низком уровне, распаковав APK.

Вот как вы можете это сделать:

  • Скачайте APK приложения. Вы можете сделать это через различные онлайн-сервисы или инструменты, позволяющие скачивать APK напрямую с Google Play Store.

  • Используйте инструмент для "распаковки" APK. Один из популярных инструментов — это APKTool или любой другой аналогичный инструмент, который позволяет декомпилировать APK и просматривать его содержимое.

  • Ищите файлы libflutter.so и kernel_blob.bin. Откройте декомпилированный APK и просмотрите каталоги ./lib/ и ./assets/flutter_assets/.

Почему это работает:

  • libflutter.so — это библиотека для Flutter, используемая для загрузки и выполнения кода Dart на Android.

  • kernel_blob.bin содержит скомпилированный код Dart приложения.

Этот метод требует максимум технических знаний и подходит для настоящих инженеров. Кстати, способ подсказала Alexandra Kovaleva, за что ей отдельная благодарность.

Распаковать APK можно более просто. Достаточно переименовать файл .apk в .zip, и найти libflutter.so и другие ресурсы. Спасибо, @flexbyteза подсказку в комментариях.

Заключение

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

Если было интересно и полезно, приглашаю в свой Linkedin.

Комментарии (14)


  1. debug45
    04.04.2024 07:45
    +2

    Для Android статья, наверное, действительно актуальная, но Flutter-приложения на iOS видно сразу без всяких проверок — они ощущаются по-другому, ненативно. Как-то не так работает скролл, как-то не так работают анимации, с большой вероятностью недоступна часть системных фич, присутствующих абсолютно в любой нативной приле.


    1. vitalikbov Автор
      04.04.2024 07:45

      Мне кажется, “ненативность” происходит из-за того, что Flutter-приложения часто являются чем-то средним между iOS и Android. Это проявляется в виджетах, анимациях, жестах, UX.

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


      1. Mox
        04.04.2024 07:45
        +1

        React Native приложения также часто делают чем-то средним, но выглядят они нативнее, особенно с тех пор когда таки подтянули нативную навигацию в react-navigation.

        Думаю дело в том, что даже физику скролла Flutter реализует самостоятельно и все что мы видим - это лишь попытка подобрать ту формулу "инерции", которая является системной для iOS

        Когда я впервые пробовал Flutter - скрол отличался просто чудовищно, создавало впечатление что прям что-то тяжелое и медленное скроллю - инерция скроллинга отличалась.

        До недавнего времени рендеринг шрифтов также сильно отличался от iOS системного - вроде поправили, но я думаю приложения с последней версией Flutter далеко не все еще пересобрали.


        1. vitalikbov Автор
          04.04.2024 07:45

          Согласен, физика во Flutter лишь эмулируют нативную.

          Однако, рендеринг, шрифты, малое количество "нативных "iOS виджетов, и т.д. часто не является блокерами для использования Flutter в продакшене. Компаниям дешевле написать один код и 2 приложения и решить свою задачу. А то, что там какая-то странная анимация уже никого не волнует.


  1. ne-nark
    04.04.2024 07:45

    А почему разбор apk в итоге оказался сложнее, чем использование отладки? Там же в списке всего три действия, в которых вроде ошибиться не так просто.


    1. vitalikbov Автор
      04.04.2024 07:45

      На мой взгляд, подключить девайс и посмотреть логи будет проще, чем распаковать apk через APKTool или что-то аналогичное, и затем изучать содержимое билда.

      Конечно, для разработчика, который хоть что-то знает про мобилки, оба способа являются достаточно простыми.


      1. flexbyte
        04.04.2024 07:45
        +1

        Зачем так сложно? Достаточно переименовать apk в zip, распаковать и найти libflutter.so


        1. vitalikbov Автор
          04.04.2024 07:45

          APKTool даёт больше информации: классы, расшифрованный манифест и т.д.
          Но, если цель - только определить flutter, то zip хватает.


          1. lil_master
            04.04.2024 07:45

            Вас спрашивают про сложность 666, а вы отвечаете "даёт больше информации".

            Разархивировать АПК самый доступный метод.


            1. vitalikbov Автор
              04.04.2024 07:45

              Да. Но, сложность 666 относится к APKTool


  1. PaladinDev
    04.04.2024 07:45

    Можно ещё в режиме разработчика включи Profile HWUI Rendering или Show Layout Bounds, сразу будет видно


    1. vitalikbov Автор
      04.04.2024 07:45

      Пункт с Show Layout Bounds есть в статье.

      А вот про Profile HWUI Rendering я даже не подумал, спасибо!


  1. bloomdido
    04.04.2024 07:45

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


    1. vitalikbov Автор
      04.04.2024 07:45

      Реклама разработки под заказ?

      Это не так, я абсолютно не заинтересован в рекламе. Тем более я работаю с продуктами.

      А в чем проявляется агитация?