Вот статья в блоге, в которой представлены несколько методов добавления цвета фона к кнопке во Flutter, а также примеры кода.

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

Метод 1: использование виджета ElevatedButton
Виджет ElevatedButton — это встроенный виджет Flutter, который предоставляет простой способ создания кнопки с фоновым цветом. Вот пример того, как его использовать:

ElevatedButton(
  onPressed: () {
    // Add your button's onPressed logic here
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // Set the background color of the button
  ),
  child: Text('My Button'),
)

Метод 2: использование виджета FlatButton
Виджет FlatButton — это еще один встроенный виджет Flutter, который позволяет создавать кнопку с собственным цветом фона. Вот пример:

FlatButton(
  onPressed: () {
    // Add your button's onPressed logic here
  },
  color: Colors.green, // Set the background color of the button
  child: Text('My Button'),
)

Метод 3: использование виджета «Контейнер».
Виджет «Контейнер» во Flutter предоставляет более гибкий способ настройки внешнего вида кнопок, включая добавление цвета фона. Вот пример:

Container(
  width: 200,
  height: 50,
  decoration: BoxDecoration(
    color: Colors.orange, // Set the background color of the container
    borderRadius: BorderRadius.circular(10),
  ),
  child: TextButton(
    onPressed: () {
      // Add your button's onPressed logic here
    },
    child: Text('My Button'),
  ),
)

Метод 4. Использование виджета «Чернила»
Виджет «Чернила» — это мощный виджет Flutter, который позволяет создавать кнопки с собственными цветами фона и анимацией. Вот пример:

Ink(
  decoration: ShapeDecoration(
    color: Colors.purple, // Set the background color of the ink
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: InkWell(
    onTap: () {
      // Add your button's onTap logic here
    },
    child: Container(
      width: 200,
      height: 50,
      alignment: Alignment.center,
      child: Text('My Button'),
    ),
  ),
)

В этой статье мы рассмотрели несколько способов добавления цвета фона к кнопкам во Flutter. Предпочитаете ли вы использовать встроенные виджеты Flutter, такие как ElevatedButton и FlatButton, или настраивать внешний вид с помощью виджетов «Контейнер» и «Чернила», теперь у вас есть множество вариантов на выбор. Поэкспериментируйте с этими методами и найдите тот, который лучше всего соответствует дизайну и функциональности вашего приложения. Приятного кодирования!