Przyciski z ikonami
Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 4 z 34.
Niektóre przyciski zawierają tylko ikonę: serce, kosz na śmieci, strzałkę udostępniania. To jest IconButton:
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
print('Deleted');
},
)Nie ma właściwości child:. Zamiast tego przyjmuje icon:, czyli ten sam widżet Icon, którego użyto w pierwszej sekcji. Dotknięcie powoduje pojawienie się okrągłego efektu fali wokół ikony.
Zwykłej ikony Icon nie można dotknąć — tylko rysuje obraz. IconButton zmienia ją w element, który można nacisnąć.
Wyzwanie
ŁatwyPo tekście Like this post dodaj przycisk IconButton z ikoną Icons.thumb_up, który po naciśnięciu wyświetli Liked.
Spróbuj swoich sił
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'),
],
),
),
),
);
}
}
Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Dodajemy interaktywność
1Przyciski
Twój pierwszy przyciskWyświetlanie tekstu w konsoliPrzyciski tekstowe i konturowePrzyciski z ikonamiPływający przycisk akcji7Przełączniki i suwaki
Włączanie i wyłączanie przełącznikiemZaznacz pole wyboruWybierz wartość za pomocą suwakaPoćwicz samodzielnie: Kompilator Flutter online