[Step1] 1단계 UI-로직 분리하기 #5
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import 'dart:async'; | ||
|
|
||
| import 'asset_name.dart'; | ||
|
|
||
| class FlipCardCore { | ||
| final _imageNames = [ | ||
| AssetImageName.orange, | ||
| AssetImageName.banana, | ||
| AssetImageName.apple, | ||
| AssetImageName.strawberry, | ||
| ]; | ||
|
|
||
| final List<String> _randomImageNames = []; | ||
| int _frontCardCount = 0; | ||
| final List<int> _frontCardIndexes = []; | ||
|
|
||
| final StreamController toggleCardToFrontStream = StreamController(); | ||
| final StreamController cardsMatchedStream = StreamController(); | ||
|
|
||
| List<String> getRandomCardImages() { | ||
| return _randomImageNames.map((e) => e).toList(); | ||
|
There was a problem hiding this comment. 여기서는 |
||
| } | ||
|
|
||
| void reset() { | ||
| // add 2 times | ||
| _randomImageNames.clear(); | ||
| _randomImageNames.addAll(_imageNames); | ||
| _randomImageNames.addAll(_imageNames); | ||
|
|
||
| // shuffle | ||
| _randomImageNames.shuffle(); | ||
| } | ||
|
|
||
| void flipCard(int cardIndex) { | ||
| _frontCardCount++; | ||
| _frontCardIndexes.add(cardIndex); | ||
| } | ||
|
|
||
| void checkCards() { | ||
| print('_frontCardCount : $_frontCardCount'); | ||
| print('_frontCardIndexes : $_frontCardIndexes'); | ||
|
|
||
| if (_frontCardCount == 2) { | ||
| toggleCardToFrontStream.add(true); | ||
| if (_frontCardIndexes.length >= 2) { | ||
| String firstCardName = _randomImageNames[_frontCardIndexes[0]]; | ||
| String secondCardName = _randomImageNames[_frontCardIndexes[1]]; | ||
| if (firstCardName == secondCardName) { | ||
| _randomImageNames[_frontCardIndexes[0]] = ''; | ||
| _randomImageNames[_frontCardIndexes[1]] = ''; | ||
|
|
||
| cardsMatchedStream.add(true); | ||
| } | ||
| } | ||
|
|
||
| _frontCardIndexes.clear(); | ||
| _frontCardCount = 0; | ||
|
Comment on lines
+52
to
+57
There was a problem hiding this comment.
처음 한 벌의 카드를 맞춘 뒤에 카드를 누르면, _frontCardCount는 3으로 초기화가 되지 않음을 확인했어요. |
||
| } | ||
| } | ||
|
|
||
| void dispose() { | ||
| toggleCardToFrontStream.close(); | ||
| cardsMatchedStream.close(); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| import 'package:flip_card/flip_card.dart'; | ||
| import 'package:flip_card_game/flip_card_core.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| void main() { | ||
|
|
@@ -31,37 +31,29 @@ class MyHomePage extends StatefulWidget { | |
| } | ||
|
|
||
| class _MyHomePageState extends State<MyHomePage> { | ||
| final FlipCardCore _flipCardCore = FlipCardCore(); | ||
|
There was a problem hiding this comment.
다만 1주차 때 배운 (시간 되실 때 보너스로 진행해보셔도 좋을 듯 해요! 😀) |
||
| final List<GlobalKey<FlipCardState>> _cardKeys = []; | ||
|
|
||
| @override | ||
| void initState() { | ||
| super.initState(); | ||
|
|
||
| print('initState'); | ||
| _flipCardCore.toggleCardToFrontStream.stream.listen((_) { | ||
| _toggleCardToFront(); | ||
|
There was a problem hiding this comment. 카드가 2장이 뒤집혔을 때, 첫번째 매칭 후 카드가 더 뒤집히지 않는 이슈와도 연관이 있을 듯 해요! |
||
| }); | ||
|
|
||
| reset(); | ||
| } | ||
|
|
||
| void reset() { | ||
| _flipCardCore.reset(); | ||
|
|
||
| // create global key | ||
| _cardKeys.clear(); | ||
| _cardKeys.addAll(_flipCardCore | ||
| .getRandomCardImages() | ||
| .map((_) => GlobalKey<FlipCardState>())); | ||
| } | ||
|
|
||
| @override | ||
|
|
@@ -70,66 +62,52 @@ class _MyHomePageState extends State<MyHomePage> { | |
| appBar: AppBar( | ||
| title: Text(widget.title), | ||
| ), | ||
| body: StreamBuilder( | ||
| stream: _flipCardCore.cardsMatchedStream.stream, | ||
| builder: (context, snapshot) { | ||
| List<String> _randomImageNames = _flipCardCore.getRandomCardImages(); | ||
|
There was a problem hiding this comment.
StreamBuilder<bool>(
stream: _flipCardCore.cardsMatchedStream.stream,
builder: (context, snapshot) {
// StreamBuilder의 제네릭 타입을 명시해주면, `snapshot.data`의 타입도 명확해집니다.
},
) |
||
|
|
||
| return Center( | ||
| child: Wrap( | ||
| spacing: 4, | ||
| runSpacing: 4, | ||
| children: List.generate( | ||
| _randomImageNames.length, | ||
| (index) { | ||
| if (_randomImageNames[index].isEmpty) { | ||
| return Container( | ||
| width: 100, | ||
| height: 150, | ||
| color: Colors.transparent, | ||
| ); | ||
| } | ||
| return FlipCard( | ||
| key: _cardKeys[index], | ||
| onFlip: () { | ||
| _flipCardCore.flipCard(index); | ||
| }, | ||
| onFlipDone: (_) { | ||
| _flipCardCore.checkCards(); | ||
| }, | ||
| front: Container( | ||
| width: 100, | ||
| height: 150, | ||
| color: Colors.orange, | ||
| ), | ||
| back: Container( | ||
| width: 100, | ||
| height: 150, | ||
| child: Image.asset( | ||
| _randomImageNames[index], | ||
| fit: BoxFit.cover, | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ), | ||
| floatingActionButton: FloatingActionButton( | ||
| onPressed: () { | ||
|
|
@@ -152,20 +130,9 @@ class _MyHomePageState extends State<MyHomePage> { | |
| } | ||
| } | ||
|
|
||
| @override | ||
| void dispose() { | ||
| super.dispose(); | ||
| _flipCardCore.dispose(); | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
StreamController를 사용할 때는 제네릭 타입을 명시해주는 것을 권장드려요!