Стиль кнопок играет решающую роль в повышении визуальной привлекательности вашего приложения Flutter. В этой статье мы рассмотрим различные способы скругления приподнятых кнопок во Flutter. Мы предоставим примеры кода и будем использовать разговорный язык, чтобы сделать процесс обучения приятным и простым. Итак, приступим!
Метод 1: использование свойства shape
Один из способов скруглить кнопку с повышенным уровнем — использовать свойство shape
. Свойство shape
позволяет нам определить форму нашей кнопки. Мы можем использовать класс RoundedRectangleBorder
для создания закругленной кнопки. Вот пример:
ElevatedButton(
onPressed: () {
// Button action
},
child: Text('Round Button'),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
)
Метод 2. Применение пользовательской темы кнопки.
Другой подход заключается в определении пользовательской темы кнопки для вашего приложения. Таким образом, все приподнятые кнопки в вашем приложении будут иметь закругленные углы. Вот пример:
MaterialApp(
theme: ThemeData(
buttonTheme: ButtonThemeData(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
home: MyHomePage(),
)
Метод 3. Создание многоразового виджета.
Если вы часто используете закругленные приподнятые кнопки, вы можете создать многоразовый виджет, чтобы упростить процесс. Вот пример пользовательского виджета RoundedElevatedButton
:
class RoundedElevatedButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
RoundedElevatedButton({required this.text, required this.onPressed});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text(text),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
);
}
}
Стилизацию приподнятых кнопок во Flutter можно выполнить различными способами. Используя свойство shape
, настраиваемые темы кнопок или создавая многоразовые виджеты, вы можете легко добиться закругленных кнопок в своем приложении. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта. Наслаждайтесь созданием красивых интерфейсов во Flutter!