Введение в виджеты Flutter. Часть 1

Flutter – это фреймворк со своим движком рендеринга. Пока это Skia. Фишка в том, что действительно – КАЖДЫЙ пиксель экрана под вашим контролем!

Знакомство с виджетами

Начнём с классического примера и выведем “Привет, мир” на экране устройства.

Результат работы программы:

Попробуйте сами набрать этот код и запустить в DartPad
https://dartpad.dev/4e7ce32f2d29d23f36834bd29a9a4660?
Вячеслав “Marpa” Шаров

Здесь объекты Column, Icon, Text являются наследниками класса Widget.

Widget во Flutter — иммутабельное (неизменяемое) описание части пользовательского интерфейса. Они являются ключевой концепцией для построения UI.

Каждый виджет имеет свою ответственность:

Column располагает дочерние виджеты один за другим в вертикальном направлении;
Icon отображает иконку, которая передаётся в качестве параметра (Icons.telegram);
Text отображает строковое значение.

Виджетам Text и Icon необходимо передавать параметр textDirection — иначе получите ошибку. Позже вы познакомитесь с виджетом MaterialApp, который возьмёт эту работу на себя.

При работе с виджетами используется композиция (один виджет вкладывается в другой), а значит, мы можем представить их в виде дерева. Отсюда название Дерево виджетов. В реальном приложении дерево может быть колоссальным!

Если просто создать виджеты, они не будут отрисованы на экране. Чтобы это произошло, необходимо вызвать встроенную функцию runApp(Widget app), которая присоединяет переданный ей виджет, а точнее всё дерево виджетов, к экрану. Переданный виджет, в нашем случае Column, становится корневым.

Зафиксируем еще раз:

Widget — это иммутабельное описание части пользовательского интерфейса.
runApp(Widget app) прикрепляет дерево виджетов к экрану.
До вызова runApp на экране будет отображаться нативный сплеш-скрин, который можно кастомизировать.

Продолжение следует…

Поделиться в соц. сетях: