Кнопки с иконками
Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 4 из 34.
Некоторые кнопки состоят только из значка: сердца, корзины или стрелки «Поделиться». Это IconButton:
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
print('Deleted');
},
)У неё нет child:. Вместо этого она принимает icon: — тот же виджет Icon, который ты использовал в первом разделе. При нажатии вокруг значка появляется круглая рябь.
На обычный Icon нельзя нажать: он только отображает изображение. IconButton превращает его в элемент, на который можно нажать.
Задание
ЛегкоПосле текста Like this post добавь IconButton с Icons.thumb_up, который выводит Liked при нажатии.
Попробуйте сами
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('Like this post'),
],
),
),
),
);
}
}
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Добавляем интерактивность
1Кнопки
Ваша первая кнопкаВывод в консольТекстовые и контурные кнопкиКнопки с иконкамиПлавающая кнопка действия7Переключатели и ползунки
Включаем и выключаем переключателемОтмечаем флажокВыбираем значение ползунком
Потренируйтесь самостоятельно: Онлайн-компилятор Flutter