첫번째 플러터 앱 개선하기 (1)

이번에 만들어 볼 앱은 하트를 눌러서 원하는 단어를 따로 모아서 볼 수 있도록 하는 앱이다.


Step 1.   선택한 단어를 저장할 _saved를 추가한다.

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _saved = Set<WordPair>();     // NEW
  final _biggerFont = TextStyle(fontSize: 18.0);
  ...
}

Step 2.  _buildRow 함수에 alreadySaved 변수를 추가한다. alreadySaved는 _saved에 WordPair가 있는지 없는지를 체크해서 있으면 true, 없으면 false를 가지게 된다.

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);  // NEW
  ...
}

Step 3.  _buildRow 함수는 ListView의 List item을 만들어서 추가하는 함수이다. 우리가 원하는 List item은 title과 icon으로 구성되었다. 이를 구현한다. Icon은 alreadySaved를 체크하여 이미 저장되어 있다면 채워진 하트로, 저장되어 있지 않다면 테두리만 있는 하트를 적용한다. 채워진 하트는 red로 채운다.

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: Icon(   // NEW from here... 
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),                // ... to here.
  );
}

Step 4.  여기까지 따라오면 아래와 같이 나온다.

Android

iOS