W tej części poradnika dodamy klikalną akcje do każdego wiersza listy tak aby zapisywać nasze ulubione piosenki!
Pomyślmy jak to zrobić od strony logicznej. Powinniśmy przede wszystkim gdzieś przechowywać listę ulubionych piosenek, oraz dodać akcje, która po kliknięciu będzie dodawać/usuwać tytuł z tej listy. Również musimy dodać ikonkę polubienia do wiersza, która będzie zależna od listy ulubionych piosenek.
Oto cześć kodu ze zmianami względem ostatniej wersji kodu. Zmiany są oznaczone komentarzem z wyjaśnieniem. Je należy dodać do wszcześniejszej wersji.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | class _MusicListState extends State<MusicList> { final _songs = <String>[ "Save Your Tears", "See You Again", "Shape of You", "Despacito", "Gangnam Style", "Sorry", "Sugar", "Roar" ]; final _saved = <String>{}; // Lista ulubionych piosenek final _biggerFont = TextStyle(fontSize: 18.0); Widget _buildSuggestions() { return ListView.builder( padding: EdgeInsets.all(16.0), itemCount: _songs.length * 2, itemBuilder: /*1*/ (context, i) { if (i.isOdd) return Divider(); /*2*/ final index = i ~/ 2; /*3*/ return _buildRow(_songs[index]); }); } Widget _buildRow(String pair) { final alreadySaved = _saved.contains(pair); // wartość true/falsa mówiąca czy piosenka jest polubiona czy nie return ListTile( title: Text( pair, style: _biggerFont, ), // Nowy kod od tego momentu trailing: Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red : null, ), onTap: () { setState(() { if (alreadySaved) { _saved.remove(pair); } else { _saved.add(pair); } }); }, // do tego momentu. Robi on dwie rzeczy, pierwsza część jest odpowiedzialna za dodanie ikony, ktora jest zależna od tego czy utwór jest polubiony. Druga rzecz to dodanie interaktywności do komórki. Jeśli bedzie ona kliknieta to doda się lub usunie wartość z listy zapisanych piosenek ); } |