Во Flutter ElevatedButton — это часто используемый виджет для создания кнопок с выпуклым внешним видом. Хотя параметры стиля по умолчанию великолепны, разработчики часто хотят настроить фон ElevatedButton в соответствии с дизайном своего приложения. В этой статье блога мы рассмотрим различные методы создания стилизации фона в ElevatedButton с примерами кода.

1. Использование свойства стиля:
   Виджет ElevatedButton предоставляет свойство style, которое принимает экземпляр ButtonStyle. Вы можете настроить цвет фона, установив свойство backgroundColorв элементе ButtonStyle. Вот пример:

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
  ),
  onPressed: () {
    // Button action
  },
  child: Text('ElevatedButton'),
)

1. Применение BoxDecoration:
   Другой подход — обернуть виджет ElevatedButton внутри контейнера и применить BoxDecoration к контейнеру. Это позволяет использовать более продвинутые параметры стилизации фона. Вот пример:

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: ElevatedButton(
    onPressed: () {
      // Button action
    },
    child: Text('ElevatedButton'),
  ),
)

1. Использование виджета «Чернила».
   Виджет «Чернила» можно использовать для настройки фона кнопки. Он обеспечивает дополнительные визуальные эффекты, такие как анимация пульсации при нажатии. Вот пример:

Ink(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: ElevatedButton(
    onPressed: () {
      // Button action
    },
    child: Text('ElevatedButton'),
  ),
)

1. Применение пользовательской темы ButtonTheme:
   Вы также можете определить собственную тему ButtonTheme и применить ее к виджетам ElevatedButton. Это позволяет вам устанавливать цвет фона и другие свойства глобально. Вот пример:

ButtonTheme(
  buttonColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: ElevatedButton(
    onPressed: () {
      // Button action
    },
    child: Text('ElevatedButton'),
  ),
)

В этой статье мы рассмотрели несколько методов достижения стилизации фона в виджетах ElevatedButton во Flutter. Предпочитаете ли вы использовать свойство style, применить BoxDecoration, использовать виджет Ink или настроить ButtonTheme, у вас есть множество возможностей для создания визуально привлекательных кнопок, соответствующих дизайну вашего приложения.