Как создать круглые кнопки во Flutter: примеры и код

Фраза «круглая кнопка» представляет собой комбинацию двух терминов: «круглая кнопка» и «трепетание». В контексте программирования «круглая кнопка» обычно относится к элементу графического пользовательского интерфейса (GUI), который имеет круглую форму и может быть нажат пользователем. Flutter – это популярная платформа пользовательского интерфейса с открытым исходным кодом, разработанная Google. Она позволяет разработчикам создавать кроссплатформенные приложения для мобильных устройств, Интернета и настольных компьютеров.

Если вы ищете методы создания круглой кнопки с помощью платформы Flutter, вот несколько примеров:

Метод 1: использование виджета RaishedButton

import 'package:flutter/material.dart';
class RoundButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  RoundButton({required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: onPressed,
      shape: CircleBorder(),
      child: Text(text),
    );
  }
}

Метод 2: использование виджета RawMaterialButton

import 'package:flutter/material.dart';
class RoundButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  RoundButton({required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      onPressed: onPressed,
      shape: CircleBorder(),
      fillColor: Colors.blue,
      child: Text(text),
    );
  }
}

Метод 3. Использование виджета InkResponse

import 'package:flutter/material.dart';
class RoundButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  RoundButton({required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return Material(
      shape: CircleBorder(),
      child: InkResponse(
        onTap: onPressed,
        child: Container(
          padding: EdgeInsets.all(10),
          child: Text(text),
        ),
      ),
    );
  }
}

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