Кнопка ElevatedButton

Виджет ElevatedButton представляет кнопку, основная задача которой - реагировать на нажатия и по нажатию выполнять некоторое действие.

Этот виджет имеет два конструктора. Первый конструктор:

ElevatedButton({Key key, @required VoidCallback onPressed, VoidCallback onLongPress, ButtonStyle style, 
FocusNode focusNode, bool autofocus: false, Clip clipBehavior: Clip.none, @required Widget child})

Рассмотрим некоторые параметры:

• key: ключ элемента

• onPressed: описывает действие, которое вызывается при нажатии

• onLongPress: описывает действие, которое вызывается при долгом нажатии

• style: стиль кнопки

• focusNode: объект, который используется для получения фокуса клавиатуры и для обработки событий клавиатуры

• autofocus: указывает, будет ли кнопка получать фокус по умолчанию

• clipBehavior: указывает, как содержимое кнопки будет обрезаться

• child: содержимое кнопки в виде другого виджета (обычно надпись на кнопке)

Второй конструктор позволяет дополнительно добавить иконку в виде виджета из параметра icon:

ElevatedButton.icon({Key key, @required VoidCallback onPressed, VoidCallback onLongPress, ButtonStyle style, 
FocusNode focusNode, bool autofocus, Clip clipBehavior, @required Widget icon, @required Widget label})

Создание простейшей кнопки ElevatedButton:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home:  Scaffold(
      body: ElevatedButton(
          child:Text("Click", style: TextStyle(fontSize: 22),)
      ),
      appBar: AppBar(title:Text("METANIT.COM")),
    )
  ));
}

Как видно из скриншота, по умолчанию кнопка не активна, потому что мы не задали для нее действие, вызываемое при нажатии - то есть параметр onPressed.

Этот параметр по сути представляет функцию void Function(), которая ничего не возвращает и не принимает никаких параметров. Например, мы можем даже использовать пустую функцию:

ElevatedButton(
  child: Text("Click", style: TextStyle(fontSize: 22)),
  onPressed:(){}
)

В качестве простейшего примера сделаем по нажатию на кнопку вывод на консоль некоторой строки:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home:  Scaffold(
      body: ElevatedButton(
          child: Text("Click", style: TextStyle(fontSize: 22)),
          onPressed:(){ print("Clicked!!!");}
      ),
      appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

Функция print() вывод информацию на консоль при нажатии кнопки:

Виджет Directionality

При размещении кнопки ElevatedButton в некоторых контейнерах мы можем столкнуться с ошибкой

No Directionality widget found.

В этом случае можно обернуть родительской контейнер в виджет Directionality:

import 'package:flutter/material.dart';

int count = 0;
void main() {
  runApp(Directionality(
      textDirection: TextDirection.rtl,
      child: Container(
    color: Colors.white,
    padding: EdgeInsets.only(top:25),
    child: ElevatedButton(
        child:Text("Click", textDirection: TextDirection.ltr)
    )),
  ));
}

Либо использовать другие виджеты, которые неявно применяют Directionality, например, MaterialApp.