Как улучшить производительность вашего Flutter приложения

[tmnhy]

Это всё понятно и красиво. Но когда поправят эпилептичный скроллинг из-за которого смысл web-приложений теряется и поправят ли вообще?

[stealthnsk]

Я так понимаю, веб пока далеко до релиза, там перетряхивают реализацию. Эти штуки про мобилки, в первую очередь

[tmnhy]

Дело в том, что что-то там в «консерватории». Скроллинг на мобилках тоже дёрганый. Не такой неплавный как в web, но заметно.

[stealthnsk]

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

[tmnhy]

Неа, обычный

  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, int index) {
      return ItemWidget();
    },
  );

ItemWidget — stateless. Количество элементов списка от десятка до нескольких сотен, разницы в плавности никакой.

А на React Native с FlatList заметно отличимо плавнее.

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

[stealthnsk]

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

[KnightForce]

Виджет вынесенный в метод — имеет такое же поведение.

В обоих случаях одинаковое поведение контекстов.
И виджеты с состоянием ведут себя также.

И const тоже.

Я пытался придраться и найти разницу, но не нашел.

Ткните меня носом — “Вот смотри код и тут разница“, а так что-то непонятно. На словах нельзя, а на деле нет разницы.

Я, безусловно, могу ошибаться и буду рад, если мне укажут (с пруфами) что я не прав.

[sharpfellow]

На мой взгляд, автор немного не дожал первый пример в плане кода, хотя в конце и дописал, как можно его еще улучшить (добавив const).
Написал небольшой пример на dartpad уже с const и StatefulWidget. Консоль включается внизу. В ней при клике на кнопку будет только один вывод из метода

Еще прикладываю ссылку на комментарий Wm Leler, одного из Flutter Advocate разработчиков на тот момент, который еще в 2018 году говорил, что не надо выносить виджеты в методы.

… Splitting build methods into multiple methods is an antipattern ...

Картинка комментария для тех, кому лень переходить по ссылке

[KnightForce]

Ну так правильно.
Метод build вызывается каждый раз при setState.
Внутренние методы тоже. Поэтому _weNeedItOnlyOnce вызовется еще раз.
Если обернуть const вызов в функцию — он тоже вызовется еще раз.
Но не сам виджет — он const.

Если const убрать — то будет следующее поведение:

Вариант с функцией.
1) Вызывается функция -> создается виджет -> создается RenderObject и Element.
2) Обновляем State.
3) Вызывается функция -> создается виджет -> НЕ создается RenderObject и Element, а используются те же самые.

Вариант с виджетом:
1) Создается виджет -> создается RenderObject и Element.
2) Обновляем State.
3) Создается виджет -> НЕ создается RenderObject и Element, а используются те же самые.

В обоих случаях новый экземпляр виджета и новый экземпляр BuildContext.

Если const виджет возвращать из функции, то виджет создастся 1 раз и более не пересоздастся.