Рубрики
Flutter

Flutter Icons — использование иконок во Flutter

Flutter Icons — это идентификатор для поддерживаемых значков Материал дизайна.

Используйте с классом Icon для отображения определенных значков.

Значки идентифицируются по их названию, как указано на сайте api.flutter.dev/flutter/material/Icons-class.html.

Чтобы использовать этот класс, убедитесь, что вы установили uses-material-design: true в pubspec.yaml вашего проекта, в разделе flutter. Это гарантирует, что шрифт Material Icons будет включен в ваше приложение. Этот шрифт используется для отображения значков. Пример pubspec.yaml:

name: my_awesome_application
flutter:
  uses-material-design: true

В этом примере показано, как создать Row ряд значков разных цветов и размеров. Первая Icon использует семантическую метку, чтобы объявить режимы доступности, такие как TalkBack и Voice Over.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const <Widget>[
    Icon(
      Icons.favorite,
      color: Colors.pink,
      size: 24.0,
      semanticLabel: 'Текст для показа в режиме доступности',
    ),
    Icon(
      Icons.audiotrack,
      color: Colors.red,
      size: 30.0,
    ),
    Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    ),
  ],
)

Flutter Icons Button

Кнопка c иконкой Material Design.

Кнопка-иконка — это изображение на виджете, которое реагирует на прикосновения, заполняясь цветом.

Кнопки значков обычно используются в поле Appbar.actions, но они могут быть использованы и во многих других местах.

Если обратный вызов onPressed равен null, то кнопка будет отключена и не будет реагировать на прикосновение.

IconButton требует, чтобы один из его родителей был Material Widget.

Область попадания кнопки значка, если это возможно, будет иметь размер не менее kMinInteractiveDimension пикселей, независимо от фактического размера значка, чтобы удовлетворить требованиям целевого размера сенсорного экрана в спецификации Material Design. Выравнивание определяет положение самого значка в области попадания.

double _volume = 0.0;

// ...

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.volume_up),
            tooltip: 'Increase volume by 10',
            onPressed: () {
              setState(() {
                _volume += 10;
              });
            },
          ),
          Text('Громкость: $_volume')
        ],
      ),
    ),
  );
}

Добавление заполненного фона

Кнопки Flutter IconButton не поддерживают указание цвета фона или другого фонового оформления, поскольку обычно значок отображается только поверх фона родительского виджета. IconButton, которые появляются в Appbar.actions являются примером этого.

Достаточно просто создать иконку кнопки с заполненным фоном, используя виджет Ink. Виджет Ink (чернила) отображает украшение на базовом материале вместе с ответом «всплеск» и подсветкой InkResponse, предоставленным виджетами-потомками.

В этом примере цвет фона кнопки значка определяется с помощью виджета Ink, дочерним элементом которого является IconButton. Заполненный фон кнопки значка-это светлый оттенок синего, это заполненный круг, и он такой же большой, как кнопка.

Widget build(BuildContext context) {
  return Center(
    child: Container(
      child: Ink(
        decoration: ShapeDecoration(
          color: Colors.lightBlue,
          shape: CircleBorder(),
        ),
        child: IconButton(
          icon: Icon(Icons.android),
          color: Colors.white,
          onPressed: () {
            print("filled background");
          },
        ),
      ),
    ),
  );
}

Используйте иконки для привлечения внимания к элементам, а так же в местах, где не помещается текст (например в навигационных панелях или табах).

Подбирайте иконки по смыслу, чтобы по одному взгляду было понятно, что за действие последует за нажатием. Но бывают ситуации, когда лучше все-таки написать текстом.