Flutter — популярная кроссплатформенная среда, позволяющая разработчикам создавать красивые и интерактивные пользовательские интерфейсы. Одним из важных виджетов Flutter является TextButton, который позволяет пользователям взаимодействовать с приложением с помощью простой кнопки с текстом. В этой статье мы рассмотрим различные методы виджета TextButton с примерами кода, которые помогут вам понять его функциональность и способы эффективного его использования в ваших приложениях Flutter.
Метод 1: создание базовой текстовой кнопки
Самый простой способ создать TextButton — определить его обратный вызов onPressed, который срабатывает при нажатии кнопки. Вот пример:
TextButton(
onPressed: () {
// Add your desired functionality here
},
child: Text('Press Me'),
)
Метод 2. Настройка внешнего вида TextButton
Вы можете настроить внешний вид TextButton, указав его стиль, цвет, отступы и т. д. Вот пример:
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(10)),
textStyle: MaterialStateProperty.all<TextStyle>(
TextStyle(fontSize: 16),
),
),
onPressed: () {
// Add your desired functionality here
},
child: Text('Press Me'),
)
Метод 3: отключение TextButton
Вы можете отключить TextButton, установив для его обратного вызова onPressed значение null. Это предотвращает нажатие кнопки. Вот пример:
TextButton(
onPressed: null,
child: Text('Disabled Button'),
)
Метод 4: добавление значков в TextButton
Вы можете включить значки в TextButton с помощью виджета Icon. Вот пример:
TextButton.icon(
onPressed: () {
// Add your desired functionality here
},
icon: Icon(Icons.add),
label: Text('Add Item'),
)
Метод 5: применение TextButton внутри ButtonBar
Чтобы отобразить несколько кнопок подряд, вы можете использовать виджет ButtonBar. Вот пример:
ButtonBar(
children: [
TextButton(
onPressed: () {
// Add your desired functionality here
},
child: Text('Button 1'),
),
TextButton(
onPressed: () {
// Add your desired functionality here
},
child: Text('Button 2'),
),
],
)
Виджет TextButton во Flutter предлагает различные методы и параметры настройки для повышения интерактивности и эстетики ваших приложений. Изучая упомянутые выше методы, вы сможете создавать динамичные и визуально привлекательные кнопки, адаптированные к конкретным требованиям вашего приложения. Поэкспериментируйте с различными стилями, функциями и макетами, чтобы создать привлекательный пользовательский опыт в своих проектах Flutter.