screen not re-rendering after changing state

Question

I'm just starting with Flutter, finished the first codelab and tried to add some simple functionality to it.

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(primaryColor: Colors.deepOrange),
      home: new RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _biggerFont = new TextStyle(fontSize: 18.0);

  final _saved = new Set<WordPair>();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.list),
            onPressed: _pushSaved,
          )
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();

        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );
  }

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
        title: new Text(
          pair.asPascalCase,
          style: _biggerFont,
        ),
        trailing: new IconButton(
          icon: new Icon(alreadySaved ? Icons.favorite : Icons.favorite_border),
          color: alreadySaved ? Colors.red : null,
          onPressed: () {
            setState(() {
              if (alreadySaved) {
                _saved.remove(pair);
              } else {
                _saved.add(pair);
              }
            });
          },
        ));
  }

  void _pushSaved() {
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) {
          final tiles = _saved.map(
            (pair) {
              return _buildRow(pair);

              // new ListTile(
              //   title: new Text(
              //     pair.asPascalCase,
              //     style: _biggerFont,
              //   ),
              // );
            },
          );
          final divided = ListTile
              .divideTiles(
                context: context,
                tiles: tiles,
              )
              .toList();

          return new Scaffold(
            appBar: new AppBar(
              title: new Text('Saved Suggestions'),
            ),
            body: new ListView(children: divided),
          );
        },
      ),
    );
  }
}

In the Save suggestions screen I built the same row as in the Sugestions Screen.

In the Saved Sugstions screen when you click the heart icon the element is removed from the array of saved items but the screen is not re-rendered.

what am I doing wrong here?

thanks!

Shady Aziza Shady Aziza · Accepted Answer · 2018-03-01T06:39:55

Update

Actually your app is working perfectly fine with me :/

Because you are not communicating the state change with the icon change. You are already changing state based on alreadySaved, notice how you managed setState()

setState(() {
              if (alreadySaved) {
                _saved.remove(pair);
              } else {
                _saved.add(pair);
              }
            });

In the previous block you are only removing or adding to your favourite list based on the boolean value of alreadySaved and you are not telling setState to change anything else. That is why the following does not produce a re-render even though alreadySaved is switching values

///These two lines do not know what is happening    
icon: new Icon(alreadySaved ? Icons.favorite : Icons.favorite_border),
              color: alreadySaved ? Colors.red : null,

So you can instead do the following

icon: new Icon(_whichIcon), //initialized var _whichIcon = Icons.favorite_border 
          color: _whichIconColor, //Initialized var _whichIconColor = Colors.transparent

And your setState would be:

setState(() {
              if (alreadySaved) {
                _saved.remove(pair);
                _whichIcon = Icons.favorite_border ;
                _whichIconColor = Colors.transparent; 
             } else {
                _saved.add(pair);
                _whichIcon = Icons.favorite ;
                _whichIconColor = Colors.red;
              }
            });

Or simpler you can do it like this, and keep your icon logic unchanged:

bool alreadySaved = false;

...

setState(() {
              if (_saved.contains(pair)) {
                _saved.remove(pair);
                alreadySaved = false;
              } else {
                _saved.add(pair);
                alreadySaved = true;
              }
            });

screen not re-rendering after changing state

1 Answers