Your first Flutter app  |  Google Codelabs

이 앱은 작동하며 때때로 흥미로운 단어 쌍을 제공하기도 합니다. 하지만 사용자가 Next 버튼을 클릭할 때마다 각 단어 쌍은 영원히 사라집니다. '좋아요' 버튼과 같이 최고의 제안을 "기억"할 수 있는 방법이 있으면 더 좋을 것 같습니다.

비즈니스 로직 추가

MyAppState로 스크롤하여 다음 코드를 추가합니다:

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  // ↓ Add the code below.
  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

// ...

변경 사항을 검토합니다:

• MyAppState에 favorites라는 새 속성을 추가했습니다. 이 속성은 빈 목록으로 초기화됩니다: [].
• 또한 목록에 단어 쌍만 포함할 수 있도록 지정했습니다: <WordPair>[], 제네릭을 사용했습니다. 이렇게 하면 앱을 더욱 강력하게 만들 수 있습니다. WordPair 이외의 다른 것을 추가하려고 하면 앱 실행조차 거부합니다. 따라서 즐겨 찾기 목록에 원치 않는 개체(예: nulldsad)가 숨어 있지 않다는 것을 알고 즐겨 찾기 목록을 사용할 수 있습니다.

<aside> 💡 참고: Dart에는 List([]로 표현됨) 이외의 컬렉션 유형이 있습니다. 즐겨찾기의 컬렉션에는 Set({}로 표현)이 더 적합하다고 주장할 수 있습니다. 이 코드랩을 가능한 한 간단하게 만들기 위해 목록을 사용하기로 했습니다. 하지만 원하는 경우 Set을 대신 사용할 수 있습니다. 코드는 크게 달라지지 않습니다.

</aside>

• 또한 즐겨찾기 목록에서 현재 단어 쌍을 제거하거나(이미 있는 경우), 추가하는(아직 없는 경우) 새로운 메서드 toggleFavorite()를 추가했습니다. 두 경우 모두 코드가 notifyListeners(); 를 호출합니다.

버튼 추가

'비즈니스 로직'을 정리했으니 이제 사용자 인터페이스에 대해 다시 작업할 차례입니다. '좋아요' 버튼을 '다음' 버튼의 왼쪽에 배치하려면 Row 위젯이 필요합니다. Row 위젯은 앞서 살펴본 Column 위젯의 가로 버전입니다.

먼저 기존 버튼을 Row로 감쌉니다. MyHomePage의 build() 메서드로 이동하여 커서를 ElevatedButton에 놓고 Ctrl+. 또는 Cmd+.로 Refactor 메뉴를 불러온 Wrap with Row을 선택합니다.