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

1. Изменение цвета кнопки.
   Один из самых простых способов стилизации ElevatedButton — изменение его цвета. Вы можете использовать свойство styleвиджета ElevatedButton, чтобы определить стиль ButtonStyle и настроить его внешний вид. Например, чтобы установить красный цвет кнопки, вы можете использовать следующий код:

   ElevatedButton(
    style: ElevatedButton.styleFrom(
      primary: Colors.red,
    ),
    onPressed: () {
      // Button onPressed logic
    },
    child: Text('Click me'),
   ),

2. Добавление градиентного фона.
   Если вы хотите добавить к кнопке более визуально привлекательный фон, вы можете использовать градиенты. Градиенты обеспечивают плавный переход цветов, придавая ElevatedButton стильный вид. Вот пример того, как добавить градиентный фон к кнопке:

   ElevatedButton(
    style: ElevatedButton.styleFrom(
      backgroundGradient: LinearGradient(
        colors: [Colors.purple, Colors.blue],
      ),
    ),
    onPressed: () {
      // Button onPressed logic
    },
    child: Text('Click me'),
   ),

3. Настройка формы кнопок.
   По умолчанию ElevatedButtons имеют прямоугольную форму. Однако вы можете настроить форму, чтобы сделать ее более уникальной. Flutter предоставляет свойство shapeдля определения произвольной формы вашей кнопки. Например, вы можете создать закругленную кнопку, используя класс RoundedRectangleBorder:

   ElevatedButton(
    style: ElevatedButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    onPressed: () {
      // Button onPressed logic
    },
    child: Text('Click me'),
   ),

4. Добавление теней.
   Если вы хотите, чтобы ваши ElevatedButtons выглядели более трехмерными, вы можете добавить к ним тени. Свойство elevationпозволяет контролировать глубину тени. Вот пример того, как добавить тени к кнопкам:

   ElevatedButton(
    style: ElevatedButton.styleFrom(
      elevation: 5,
    ),
    onPressed: () {
      // Button onPressed logic
    },
    child: Text('Click me'),
   ),

5. Настройка размера кнопок:
   Flutter позволяет настраивать размер ElevatedButtons. Вы можете использовать свойство minimumSize, чтобы определить минимальную ширину и высоту кнопки. Это полезно, если вы хотите создать кнопки большего или меньшего размера. Ознакомьтесь с фрагментом кода ниже:

   ElevatedButton(
    style: ElevatedButton.styleFrom(
      minimumSize: Size(200, 50),
    ),
    onPressed: () {
      // Button onPressed logic
    },
    child: Text('Click me'),
   ),

Это всего лишь несколько методов стилизации ElevatedButtons во Flutter. Не стесняйтесь комбинировать эти методы или исследовать другие варианты настройки, чтобы создавать кнопки, которые идеально подходят к дизайну вашего приложения. Не соглашайтесь на скучные кнопки – дайте волю своему творчеству!