Во Flutter MaterialStateProperty — это мощный инструмент, который позволяет вам определять различные состояния и поведение виджетов на основе их текущего состояния. Он обычно используется для настройки внешнего вида и поведения виджетов Material Design, таких как кнопки, флажки и переключатели. В этой статье мы рассмотрим различные методы использования MaterialStateProperty во Flutter, а также приведем примеры кода.
Метод 1: создание кнопки с MaterialStateProperty
”’
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith
(Set
if (states.contains(MaterialState.pressed)) {
return Colors.red;
}
return Colors.blue;
},
),
),
onPressed: () {
// Кнопка нажата
},
child: Text(‘Custom Button’),
),
”’
Метод 2: изменение оформления на основе состояния кнопки
”’
TextButton(
style: ButtonStyle(
textStyle: MaterialStateProperty.resolveWith
(Set
if (states.contains(MaterialState.hovered)) {
return TextStyle(fontSize: 18, fontWeight: FontWeight.bold);
}
return TextStyle(fontSize: 16, fontWeight: FontWeight.normal);
},
),
),
onPressed: () {
// Кнопка нажата
},
child: Text(‘Text Button ‘),
),
”’
Метод 3: настройка флажка с помощью MaterialStateProperty
”’
Checkbox(
value: isChecked,
onChanged: (bool value) {
setState(() {
isChecked = value;
});
},
fillColor: MaterialStateProperty.resolveWith
(Set
if (states.contains(MaterialState.selected)) {
return Colors.green;
}
return Colors.grey;
},
),
),
”’
Метод 4: обработка состояния фокуса в TextField
”’
TextField(
focusNode: _focusNode,
decoration: InputDecoration(
labelText: ‘Username’,
enabledBorder: OutlineInputBorder (
borderSide: BorderSide(
color: MaterialStateProperty.resolveWith
(Set
if (states.contains(MaterialState.focused)) {
return Цвета.синий;
return Colors.grey;
},
),
),
),
),
),
”’р>
MaterialStateProperty — ценный инструмент Flutter для настройки внешнего вида и поведения виджетов в зависимости от их текущего состояния. В этой статье мы рассмотрели несколько методов использования MaterialStateProperty, включая создание пользовательских кнопок, изменение типографики, настройку флажков и обработку состояния фокуса в текстовых полях. Используя возможности MaterialStateProperty, разработчики могут создавать динамические и интерактивные пользовательские интерфейсы в своих приложениях Flutter.