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");
},
),
),
),
);
}
Используйте иконки для привлечения внимания к элементам, а так же в местах, где не помещается текст (например в навигационных панелях или табах).
Подбирайте иконки по смыслу, чтобы по одному взгляду было понятно, что за действие последует за нажатием. Но бывают ситуации, когда лучше все-таки написать текстом.