Во Flutter текстовые кнопки — это распространенный элемент пользовательского интерфейса, используемый для запуска действий при нажатии. Это простые, но эффективные компоненты, которые предоставляют пользователям четкое представление об интерактивных элементах приложения. В этой статье мы рассмотрим различные методы создания текстовых кнопок во Flutter, сопровождаемые примерами кода.
- Использование виджета ElevatedButton:
Flutter предоставляет виджет ElevatedButton, который можно настроить для создания текстовых кнопок. Вот пример:
ElevatedButton(
onPressed: () {
// Action to perform when the button is clicked
},
style: ElevatedButton.styleFrom(
primary: Colors.blue, // Button background color
onPrimary: Colors.white, // Button text color
),
child: Text('Text Button'),
)
- Использование виджета FlatButton:
Виджет FlatButton также можно использовать для создания текстовых кнопок. Вот пример:
FlatButton(
onPressed: () {
// Action to perform when the button is clicked
},
color: Colors.blue, // Button background color
textColor: Colors.white, // Button text color
child: Text('Text Button'),
)
- Использование виджета TextButton:
Начиная с Flutter 2.0, виджет TextButton является рекомендуемым способом создания текстовых кнопок. Вот пример:
TextButton(
onPressed: () {
// Action to perform when the button is clicked
},
style: TextButton.styleFrom(
primary: Colors.blue, // Button text color
),
child: Text('Text Button'),
)
- Настройка стилей кнопок.
Вы можете дополнительно настроить внешний вид текстовых кнопок, настроив такие свойства, как размер шрифта, отступы и форму. Вот пример настройки фигуры с помощью RoundedRectangleBorder:
TextButton(
onPressed: () {
// Action to perform when the button is clicked
},
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text('Text Button'),
)
Текстовые кнопки являются важными компонентами разработки приложений Flutter для создания интерактивных пользовательских интерфейсов. В этой статье мы рассмотрели несколько методов создания текстовых кнопок, в том числе использование виджетов ElevatedButton, FlatButton и TextButton. Мы также продемонстрировали, как настроить стили кнопок в соответствии с требованиями к дизайну вашего приложения. Используя эти методы, вы можете улучшить взаимодействие с пользователем и создать эстетически привлекательные текстовые кнопки в своих приложениях Flutter.