Вы можете сразу понять в чем их отличие. Одни имеют состояние, другие – нет. Давайте копнем поглубже.
Состояние виджета
Состояние – это «любая информация, необходимая для отрисовки UI в любой момент времени». Будучи Java и Kotlin разработчиком, я привык писать в императивном стиле. Например, textView.setText («Lorem») или textView. text=«Lorem». То есть мы меняли внешний вид виджета напрямую, прямо указывая системе что надо поменять.
Поскольку Flutter декларативный, пользовательский интерфейс строится как некоторая функция от состояния:
UI = f (state)
Другими словами, UI наблюдает за Состоянием, и если вы хотите изменить UI, Вам нужно обновить состояние. И здесь на сцену выходят два типа виджетов – те, которым можно менять состояние в рантайме, и те, которым нельзя. Здесь уместо провести аналогию с val и var переменными в Kotlin. Рассматривайте StatelessWidget как val, а StatefulWidget как var перменную.
StatelessWidget
Stateless виджет не может менять свое состояние, то есть он иммутабелен. Такой тип виджетов удобно использовать для статичных элементов экрана, которые надо отрисовать один раз и не трогать больше. Например, это могут быть заголовки, label-ы, иконки, изображения из локальных ресурсов и т. п. Самый яркий пример – это само приложение. Оно наследуется от класса StatelessWidget. Однако, давайте создадим для тренировки свой StatelessWidget. Пусть это будет простой label с каким-то задаваемым текстом.
class HintLabel extends StatelessWidget {
final String text;
const HintLabel (this. text);
@override
Widget build (BuildContext context) {
return DecoratedBox (
decoration: BoxDecoration (color: Colors.amber [200]),
child: Padding (
padding: const EdgeInsets.all (8.0),
child: Text (text,
style: TextStyle (color: Colors.grey [700])),),);}
}
Вы можете заметить, что поле text – final, а конструктор с модификатором const. Таким образом мы делаем текст и сам инстанс объекта неизменяемым. В методе build рисуем виджет DecoratedBox – это специальный виджет, который наследуется от SingleChildRenderObjectWidget, то есть от виджета с одним child-ом. Он используется для задания внешнего вида виджету. Мы это делаем указывая в child-e BoxDecoration с цветом фона. Обратите внимание на использование цветовой гаммы Material. Мы берем цвет amber 200. Подробнее про цвета вы можете узнать на странице https://material.io/guidelines/style/color.html
Давайте теперь используем наш новый UI компонент и добавим его на главный экран
class MyApp extends StatelessWidget {
@override
Widget build (BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
title: «StatelessWidget sample’,
theme: ThemeData (
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
