Во Flutter ElevatedButton — это часто используемый виджет для создания интерактивных кнопок с приподнятыми поверхностями. Изменение цвета ElevatedButton — частое требование при разработке приложений. В этой статье мы рассмотрим несколько методов изменения цвета ElevatedButton во Flutter, сопровождаемые примерами кода.
Методы изменения цвета ElevatedButton:
Метод 1: использование параметра стиля
Один из способов изменить цвет ElevatedButton — использовать параметр стиля. Настраивая виджет ButtonStyle, вы можете изменять различные свойства, включая цвет фона.
Пример кода:
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
// Button action
},
child: Text('Change Color'),
)
Метод 2: применение пользовательской темы
Flutter позволяет вам определить пользовательскую тему и применить ее к вашему приложению, что позволяет вам изменять внешний вид виджетов по умолчанию, таких как ElevatedButton.
Пример кода:
Theme(
data: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
),
),
child: ElevatedButton(
onPressed: () {
// Button action
},
child: Text('Change Color'),
),
)
Метод 3. Обертывание ElevatedButton контейнером.
Вы также можете изменить цвет ElevatedButton, обернув его виджетом «Контейнер» и установив свойство цвета контейнера.
Пример кода:
Container(
color: Colors.orange,
child: ElevatedButton(
onPressed: () {
// Button action
},
child: Text('Change Color'),
),
)
Метод 4. Создание виджета настраиваемой кнопки
Для более расширенной настройки вы можете создать виджет настраиваемой кнопки, расширив класс ElevatedButton и переопределив необходимые свойства.
Пример кода:
class CustomButton extends ElevatedButton {
CustomButton({
required VoidCallback onPressed,
required Widget child,
Color? backgroundColor,
}) : super(
onPressed: onPressed,
child: child,
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
backgroundColor ?? Colors.red,
),
),
);
}
// Usage
CustomButton(
onPressed: () {
// Button action
},
child: Text('Change Color'),
backgroundColor: Colors.purple,
)