Flutter: Иконки, кнопки, контейнеры (урок 6)

Встроенные иконки

Для вывода иконок используется класс Icon. Он принимает обязательный параметр – иконку из перечисления Icons. Перечисление Icons содержит множество иконок, доступных в Android Studio и официальной документации.

Например, иконка настроек (шестеренки) выводится с помощью Icons.settings. Размер и цвет настраиваются:

Icon(Icons.settings, size: 45, color: Colors.deepOrangeAccent),

Кнопки

В Flutter доступны различные типы кнопок. FlatButton и RaisedButton устарели, но могут встречаться в старом коде. Рекомендуется использовать ElevatedButton, OutlinedButton и TextButton. Подробности в официальной документации.

FlatButton: Простая кнопка. Цвет фона и дочерний элемент (например, текст) задаются через child, обработка нажатия – через onPressed.

FlatButton(
  onPressed: () { /* Код, выполняемый при нажатии */ },
  child: Text('Нажми на меня'),
  color: Colors.deepOrangeAccent,
)

RaisedButton: Отличается от FlatButton наличием тени и обводки. Использование аналогично.

RaisedButton(
  onPressed: () { /* Код, выполняемый при нажатии */ },
  child: Text('Нажми'),
  color: Colors.deepOrangeAccent,
)

RaisedButton с иконкой:

RaisedButton(
  onPressed: () { /* Код, выполняемый при нажатии */ },
  child: Row(
    children: <Widget>[
      Icon(Icons.settings, color: Colors.white),
      Text('Settings', style: TextStyle(color: Colors.white)),
    ],
  ),
  color: Colors.deepOrangeAccent,
)

ElevatedButton без иконки:

ElevatedButton(
  onPressed: () { /* Код, выполняемый при нажатии */ },
  child: Text('Нажми'),
)

ElevatedButton с иконкой:

ElevatedButton.icon(
  onPressed: () { /* Код, выполняемый при нажатии */ },
  icon: Icon(Icons.settings),
  label: Text('Settings'),
)

OutlinedButton: Кнопка с обводкой, без заливки.

TextButton: Простая текстовая кнопка без обводки и заливки.

Изображения

Для отображения изображений используется класс Image.

Изображение из интернета: NetworkImage принимает URL изображения.

Image(image: NetworkImage('URL изображения'))

Изображение из проекта: Создайте папку assets в корне проекта, добавьте туда изображение и укажите путь в pubspec.yaml:

flutter:
  assets:
    - assets/images/mountain.jpg

Отображение изображения:

Image(image: AssetImage('assets/images/mountain.jpg'))

Контейнеры

Container группирует виджеты и добавляет отступы. padding задаёт внутренние, margin – внешние отступы. EdgeInsets позволяет настраивать отступы: all, symmetric, only, fromLTRB.

Container(
  padding: EdgeInsets.all(20.5), // внутренние отступы
  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 50), // внешние отступы
  color: Colors.deepOrangeAccent,
  child: Text('Пойти против'),
)

Рассмотрены основы работы с изображениями, кнопками и контейнерами в Flutter. В следующих уроках будут изучены более сложные элементы.