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

이번 포스팅에서 리스트를 탭하면 해당 리스트의 단어를 저장하거나 제외할 수 있도록 만들어보자.


Step 1.  _buildRow 함수에 onTap을 추가하자. onTap에서 setState()를 call하면 UI가 갱신된다.

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

Step 2.  onTap까지 완료를 하면 아래처럼 List를 선택할 때 하트가 같이 업데이트 된다.

Android

iOS

Step 3.  저장된 단어만 새로운 화면에서 볼 수 있도록 새로운 페이지를 추가해보자. 이를 위해 Navigator를 사용한다. Navigator는 기존 화면 위에 새로운 화면이 쌓이는 형태로 구성된다. 이전 화면으로 돌아갈때는 쌓였던 화면이 제거되면서 이전 화면이 나타난다.
새로운 화면을 보여주기 위한List icon  을  appBar에 추가해보자.

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

Step 4.  _RandomWordsState 클래스의 _pushSaved() 함수를 추가하자. _pushSaved() 함수에서는 Navigator.push를 통해 새로운 페이지를 추가한다.  _saved에 저장된 값을 ListTile로 생성하고, 이를 다시 divideTiles로 생성한다. builder는 타이틀과 ListView로 구성된 화면을 리턴한다.

  void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        // NEW lines from here...
        builder: (BuildContext context) {
          final tiles = _saved.map(
            (WordPair pair) {
              return ListTile(
                title: Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();

          return Scaffold(
            appBar: AppBar(
              title: Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        }, // ...to here.
      ),
    );
  }
}

Step 5.  여기까지 하면 다음처럼 저장된 리스트 화면을 볼 수 있다.

Main route

Saved suggestions route

#플러터 #flutter #리스트뷰 #ListView