0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: фреймворк, flutter, магия, кроссплатформенная разработка</p>
1
<p>Теги: фреймворк, flutter, магия, кроссплатформенная разработка</p>
2
<p><strong>Flutter</strong>- продукт Google, уже успевший завоевать неплохую репутацию в кроссплатформенной разработке. Принцип работы фреймворка заключается в создании приложений, имеющих<strong>единую кодовую базу</strong>и для мобильных платформ, и для десктопа, и для веба. Приложения, созданные разработчиком, характеризуются плавностью и разнообразием анимации, а также рендерингом экрана с кадровой частотой до 120 fps. А программисту не требуется прилагать особых усилий по оптимизации кода. Но благодаря чему достигается такой вау-эффект?</p>
2
<p><strong>Flutter</strong>- продукт Google, уже успевший завоевать неплохую репутацию в кроссплатформенной разработке. Принцип работы фреймворка заключается в создании приложений, имеющих<strong>единую кодовую базу</strong>и для мобильных платформ, и для десктопа, и для веба. Приложения, созданные разработчиком, характеризуются плавностью и разнообразием анимации, а также рендерингом экрана с кадровой частотой до 120 fps. А программисту не требуется прилагать особых усилий по оптимизации кода. Но благодаря чему достигается такой вау-эффект?</p>
3
<p>Если говорить о технической составляющей, то Android-сборка Flutter-приложения - это Single Activity-приложение. В таком приложении есть единственный view, где и реализуется "подкапотная магия". При этом само приложение подключается туда с помощью NDK, а программист уже работает с Dart-кодом таким образом, как будто бы он - это часть Android-приложения.</p>
3
<p>Если говорить о технической составляющей, то Android-сборка Flutter-приложения - это Single Activity-приложение. В таком приложении есть единственный view, где и реализуется "подкапотная магия". При этом само приложение подключается туда с помощью NDK, а программист уже работает с Dart-кодом таким образом, как будто бы он - это часть Android-приложения.</p>
4
<p>За счёт Single activity вы получаете возможность проигрывать любые анимации перехода и другие вещи. Большинство Android-разработчиков поймут, насколько такое положение вещей облегчает жизнь.</p>
4
<p>За счёт Single activity вы получаете возможность проигрывать любые анимации перехода и другие вещи. Большинство Android-разработчиков поймут, насколько такое положение вещей облегчает жизнь.</p>
5
<p>Нельзя не упомянуть и про очередной плюс фреймворка - упрощение жизненного цикла виджетов, что также спрятано глубоко под капотом. Вместо разнообразных view-элементов, как это реализовано в Android, у Flutter всё приложение является, по сути, виджетом, состоящем из полностью иерархически идентичных виджетов (первый экран, второй экран и т. д.). И внутри каждого - другие виджеты, представляющие собой конкретные элементы: картинки, кнопки, checkbox, textview и т. п.</p>
5
<p>Нельзя не упомянуть и про очередной плюс фреймворка - упрощение жизненного цикла виджетов, что также спрятано глубоко под капотом. Вместо разнообразных view-элементов, как это реализовано в Android, у Flutter всё приложение является, по сути, виджетом, состоящем из полностью иерархически идентичных виджетов (первый экран, второй экран и т. д.). И внутри каждого - другие виджеты, представляющие собой конкретные элементы: картинки, кнопки, checkbox, textview и т. п.</p>
6
<p>Кроме того, механика рендеринга фреймворка Flutter весьма схожа с рендерингом элементов списка в RecyclerView, когда каждый элемент имеет идентификатор, вычисляемый по хешам состояния. Мы говорим именно про state - слепок данных, соответствующих элементу интерфейса. Когда при очередном такте отрисовки предыдущий state отличается от текущего, это означает, что наш UI следует перерисовать.</p>
6
<p>Кроме того, механика рендеринга фреймворка Flutter весьма схожа с рендерингом элементов списка в RecyclerView, когда каждый элемент имеет идентификатор, вычисляемый по хешам состояния. Мы говорим именно про state - слепок данных, соответствующих элементу интерфейса. Когда при очередном такте отрисовки предыдущий state отличается от текущего, это означает, что наш UI следует перерисовать.</p>
7
<p>Допустим, у нас есть поле counter, относящееся к состоянию нашего виджета. Там у нас было число один, а теперь - число 2. Выходит, что цифру 1 следует перерисовать на 2, следовательно, виджет отрисуется заново. Однако в том случае, если мы обнаружим соответствие наших state, виджет трогать никто не станет, следовательно, никакой перерисовки не будет. Таким образом, перерисовывается лишь та часть дерева виджетов, которая действительно изменилась. В результате такой "магии" мы и получаем быстродействие Flutter-приложения.</p>
7
<p>Допустим, у нас есть поле counter, относящееся к состоянию нашего виджета. Там у нас было число один, а теперь - число 2. Выходит, что цифру 1 следует перерисовать на 2, следовательно, виджет отрисуется заново. Однако в том случае, если мы обнаружим соответствие наших state, виджет трогать никто не станет, следовательно, никакой перерисовки не будет. Таким образом, перерисовывается лишь та часть дерева виджетов, которая действительно изменилась. В результате такой "магии" мы и получаем быстродействие Flutter-приложения.</p>
8
<h3>За что ещё любят Flutter:</h3>
8
<h3>За что ещё любят Flutter:</h3>
9
<p>- просто божественная<a>документация</a>; - чрезвычайно простой Design, почти полное отсутствие boilerplate; - прекрасный тулинг (наличие плагинов для Idea, VS Code, Hot Reload); - открытый процесс разработки, дружественная и отзывчивая Flutter Team.</p>
9
<p>- просто божественная<a>документация</a>; - чрезвычайно простой Design, почти полное отсутствие boilerplate; - прекрасный тулинг (наличие плагинов для Idea, VS Code, Hot Reload); - открытый процесс разработки, дружественная и отзывчивая Flutter Team.</p>
10
10