Menu
CoddyTech

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ąć.

challenge icon

Wyzwanie

Łatwy

Po 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'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconSprawdź się

Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.

Wszystkie lekcje w sekcji Dodajemy interaktywność

Poćwicz samodzielnie: Kompilator Flutter online