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

Метод 1: использование ElevatedButton.icon
Flutter предоставляет виджет ElevatedButton.icon, который позволяет нам создавать кнопку со значком и текстом. Чтобы сделать его круглым, мы можем обернуть его виджетом ClipOval. Вот пример:

ClipOval(
  child: ElevatedButton.icon(
    onPressed: () {
      // Add your button action here
    },
    icon: Icon(Icons.play_arrow),
    label: Text('Play'),
  ),
)

Метод 2: виджет настраиваемой кнопки
Другой подход заключается в создании виджета настраиваемой кнопки путем расширения класса StatelessWidget. В методе сборки мы можем использовать виджет «Чернила», чтобы создать круглую форму и включить значок и текст. Вот пример:

class RoundButton extends StatelessWidget {
  final IconData icon;
  final String text;
  final VoidCallback onPressed;
  RoundButton({required this.icon, required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return Ink(
      decoration: ShapeDecoration(
        color: Colors.blue,
        shape: CircleBorder(),
      ),
      child: IconButton(
        icon: Icon(icon),
        color: Colors.white,
        onPressed: onPressed,
      ),
    );
  }
}
// Usage:
RoundButton(
  icon: Icons.play_arrow,
  text: 'Play',
  onPressed: () {
    // Add your button action here
  },
)

Метод 3: RawMaterialButton
Виджет RawMaterialButton предоставляет дополнительные возможности настройки для создания круглых кнопок со значками и текстом. Мы можем использовать свойство shape, чтобы сделать его круглым. Вот пример:

RawMaterialButton(
  onPressed: () {
    // Add your button action here
  },
  shape: CircleBorder(),
  fillColor: Colors.blue,
  elevation: 0.0,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(
          Icons.play_arrow,
          color: Colors.white,
        ),
        SizedBox(width: 8.0),
        Text(
          'Play',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
  ),
)

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