Центральным элементом приложения Flutter являются виджеты. По сути, это визуальные компоненты, составляющие графический интерфейс. Основная идея заключается в том, что вы строите свой пользовательский интерфейс из виджетов. Виджеты описывают, как должны выглядеть элементы интерфейса с учетом их текущей конфигурации и состояния. Когда состояние виджета изменяется, виджет перестраивает свое описание, которое фреймворк дополнительно отличает от предыдущего описания, чтобы определить минимальные изменения состояния, необходимые в базовом дереве рендеринга для перехода из одного состояния в другое.
Flutter поставляется с набором мощных базовых виджетов, из которых очень часто используются следующие:
1.Текст
Текстовый виджет используется для отображения текста и его настройки. Обратите внимание, что он всегда отображает строку текста, поэтому, чтобы использовать числа, вам нужно сначала преобразовать их в строку. Если вы хотите, чтобы Text реагировал на события касания, оберните его в виджет GestureDetector с обработчиком GestureDetector.onTap.
2.Контейнер
Контейнер — один из самых основных и важных виджетов. Вы можете использовать его в качестве родительского виджета для настройки и установки ограничений для дочернего виджета. Виджет «Контейнер» позволяет создать прямоугольный визуальный элемент. Контейнер можно украсить BoxDecoration, фоном, рамкой или тенью. Контейнер также может иметь поля, отступы и ограничения, применяемые к его размеру. Кроме того, Контейнер можно трансформировать в 3D с помощью матрицы.
3. Ряд
Если вы хотите отображать виджеты горизонтально, поместите их внутрь виджета Row. Как и столбец, строка также может принимать любое количество дочерних виджетов и упорядочивать их в соответствии с определенными ограничениями. Их дизайн основан на модели макета flexbox в WEB.
4.Колонка
Если вы хотите отображать виджеты вертикально, поместите их внутрь виджета Column. Столбец может принимать любое количество дочерних виджетов и располагать их в соответствии с определенными ограничениями. Виджет «Столбец» не прокручивается. Если у вас есть ряд виджетов и вы хотите, чтобы они могли прокручиваться, если места недостаточно, рассмотрите возможность использования ListView.
5.Расширенный
Он расширяет дочерний виджет внутри столбца или строки, чтобы заполнить доступное пространство. Если расширяется несколько дочерних элементов, доступное пространство делится между ними в соответствии с коэффициентом гибкости. Использовать только внутри столбца или строки, иначе выдаст ошибку. Расширенный виджет помогает решить проблему верстки, возникающую из-за разных размеров экрана.
6.Изображение
Этот виджет используется для отображения изображения. Это изображение может быть сетевым изображением, изображением актива или изображением из памяти. Если вы используете Asset inage, вам нужно сначала объявить папку с изображениями. Если вы используете Network Image, не забудьте использовать LoadingBuilder, чтобы показать пользователю, что изображение загружается.
7.Размерная коробка
SizedBox — это коробка фиксированного размера. Все, что он делает, это занимает место на экране. Он в основном используется для добавления интервала между двумя виджетами. Если у него есть дочерний виджет, дочерний элемент вынужден принимать определенные размеры.
8. Панель приложений
Он в основном используется для отображения заголовка экрана. Если у вас есть похожие экраны в приложении, рекомендуется отображать имя экрана, чтобы избежать путаницы. Кроме того, AppBar помогает перемещаться по экранам. Попробуйте один раз, чтобы узнать, на что он способен.
9. Леса
Этот виджет нужен для отрисовки основных виджетов материалов на экране. Он действует как фон приложения и содержит AppBar и BottomNavigatorBar.
10. Безопасная зона
SafeArea используется для предотвращения вмешательства виджета в системные элементы, такие как строка состояния, выемка, нижняя панель iPhone.
Первоначально опубликовано на https://codecarbon.com 28 августа 2020 г.
