[ 플러터 ] 가챠 게임을 코린이도 만들 수 있다 -2
$$ 이 포스팅은 노 베이스를 대상으로 하지 않는다 $$
$$ 노 베이스는 다른 포스팅을 먼저 보고 오도록 하자 $$
저번 시간에
이렇게 레이아웃 작업을 진행했다
이번엔 필요한 외부 패키지들을 설치해보자
외부패키지에 간단히 설명하자면
모든 기능을 내가 구현할 수 있지만
남들이 만들어둔 유용한 패키지들을 가져와
내 프로젝트에서 사용할 수 있는 유용한 기능을 얘기한다
좌측에 보면
pubspec.yaml 파일이 보일것이다
yaml파일은 기본적으로 설정파일을 얘기하며
이곳에 패키지 설치 등 외부와 관련된 내용들이 기술된다 보면된다
패키지를 살펴보면
참 뭐가 많은데
우리가 건들일 부분만 살펴보도록 하자
이 부분에 설치할 패키지 이름과 버전을 기술할 것이다
우리는 기기에 저장하기 위해
Shared_preference 라는 패키지와
데이터를 보다 효율적으로 관리하기 위한 Provider를 설치할 것이다
이때 위치를 잘 맞춰준다
그렇지 않으면 에러가 뜰 것이다
Provider와 get_it 패키지는 같이 쓰는 패키지라고 보면된다
intl 패키지는 데이터 포맷을 지정하거나 할때 쓴다
설치가 끝나면
하단 OUTPUT에 오류 없이 설치 된 것을 확인할 수 있다
그러면 패키지 사용을 위해 사전 준비를 해보자
이번에 먼저 준비할 패키지는
Provider와 GetIT 패키지다
Get_it 패키지는 싱글톤이라는 방법으로 Provider를 지정하게 해주고
해당 방식으로 데이터를 관리해 보다 편하게 사용할 수 있다
lib 파일에 새롭게 폴더를 하나 만들어준다
뉴 폴더를 눌러 폴더명을
Config로 만들어주자
그리고 폴더 안에 파일을 만들어준다
파일명은
dataConfigProvider.dart 와
singleTon.dart로 만들어준다
해당 파일을 지정했으면 이제 데이터도 지정하고 해야하지만
간단하게 프로바이더에 대해 알고 가자
플러터에서 각 위젯간 혹은 파일간에 변수값을 공유하려면
public 을 사용하거나 부모 → 자식 으로만 보낼 수 있다
물론 간단한 파일에서는 해당 방법이 유용할 수 있으나
살짝의 복잡도만 추가되어도 사용할 수 없는 수준까지 된다
본인이 코딩의 신이라 네이티브하게 쓸 수 있다면 모르겠는데
보통 99%의 사람들은 그게 안되므로 그냥 편하게 패키지를 사용하도록 하자
Provider말고도 변수를 공유하거나 할 수 있는 방법은 많지만
필자는 주로 Provider를 사용하는 경우가 많다
왜냐고?
먹던 맛이 무섭다
버릇들었으니까 자주 쓰는거지 뭐
다른거 써도 상관은 없다
이제 파일에 기술을 해줘야 하는데
4가지 과정을 거쳐야한다
1. Provider 파일 생성
2. 싱글톤 등록
3. 앱 실행시 main.dart 에서 싱글톤 실행
4. 등록한 싱글톤을 정상적으로 사용하기 위한 설정
한번 만들어두면 복사붙여넣기를 통해
다양한 프로젝트에 쓸 수 있으니
한번 잘 배워두길 바란다
정공법은 아니므로
정공법이 궁금하다면
우리의 친구 구글 혹은 챗GPT를 이용하도록 하자
파일에
class DataConfigure with ChangeNotifier {} 를 작성한다
이러면 상단에 import 되는건 기본적으로 될 것이다
조금 풀어서 설명하자면
ChangeNotifier를 사용해 데이터가 변화하면 화면을 업데이트 하도록 만드는 과정이다
이때 어떤 데이터가 어디에 담겼는지 확인하기 위해 DataConfigure라는 이름을 만들었다
우리가 기존까지 데이터를 변화시키려면
Stateful 위젯에 setState를 사용해야 한다고 알고 있었는데
이 방식은 Stateless 위젯에서도 작동하는 어-썸한 방식이다
프로바이더를 하나 만들었다면
이제 싱글톤을 만들러 가자
singleTon.dart 파일에서
패키지를 import 하고
인스턴스를 하나 만들어준다
인스턴스는 쉽게 말해
나 이거 쓸거임 하고 등록해두는 과정이라고 보면 된다
serviceLocator라는 이름을 사용하면 GetIt.instance라는 기능이 따라온다고 보면 되는 것이다
그 다음 파일에
이렇게 함수를 하나 만들어준다
함수를 전에 배웠던걸 기억하길 바란다
void란 반환이 없는
즉 Return 이라는 것을 사용하지 않아 돌아오는게 없는 함수를 얘기한다
이제 setupServiceLocator 라는 함수를 실행하면 이 안에 기술된 내용들이 실행되는 구조다
그러면 안에 기술하도록 하자
기본적인 룰은 다음과 같다
serviceLocator 에서 인스턴스 Getit 서비스를 이용하기 위한 준비를 하고
준비가 되었다면 이제 기술될 프로바이더를 가져와 싱글톤에 등록을 진행한다
우리는 어떤 프로바이더를 등록해야하느냐
아까 만들어둔 프로바이더 DataConfigure가 있으니 이 것을 등록하도록 한다
등록하려고 봤더니 오류가 생긴다
당연하다
안불러왔으니까
패키지를 불러와야만 한다
이제 오류가 없음을 확인했다
함수를 만들면 뭐해야하는지 생각해보자
뭐겠는가 실행이겠지
띡 만들어놓는다고 알아서 실행 안된다
컴퓨터도 전원 스위치를 눌러야 시작되듯 이것도 마찬가지로 눌러줘야한다
main.dart로 이동한 다음 작업을 진행한다
참으로 간단한 main.dart 다
여기서 함수를 불러와 등록해주도록 한다
근데 다른 파일에 있는 함수를 가져오려면 어떻게 해야하지?
똑같다
import 하면 된다
그냥 외워두자
다른파일에 있는 기능 쓰고싶으면 불러와야한다
싱글톤 등록은 끝났다
다음 작업은 프로바이더를 정상적으로 사용하기 위한 작업이다
아까 봤던 구조랑 같다
DataConfigure 프로바이더는 다른파일에 있다
다른파일에 있으면 어째야한다고?
불러와야지
이제 버그는 없어졌다
이렇게 하면 프로바이더 설정 기본이 끝난다
프로바이더는 기본적으로 사용하기 전
시스템에서 등록작업이 필요하다
이때 필요한게 MultiProvider라는 기능인데
이 부분은 runApp에 작성된다
runApp을 비워두고 작업을 진행한다
이때 저장은 하지 말자
저장하면 위에 Unused 경고뜬거 지워져서 다시 적어야한다
runApp안에 MultiProvider를 하나 만든다
이때 오류에 defined 에러가 있을텐데
상단에 패키지를 하나 불러와준다
이제 경고 메세지가 변했다
MultiProvider는 안에 꼭 채워야 할 내용이 있는데
프로바이더를 추가해준다
자 우리는 여기서 빨간 에러메세지가 사라진것을 확인할 수 있다
이로써 프로바이더를 사용하기 위한
전제 조건은 완성이 되었다
갑자기 뭐가 많아졌다고 놀래지 말아라
그저 안에 ChangeNotifierProvider 가 추가됐을 뿐이다
저 양식은 그대로를 따라가고 dataConfigure는 위에서 만든 변수 이름이다
이렇게 함으로써 우리는 ChangeNotifierProvider 즉 화면 변화를 감지할 수 있게 됐다
이제 dataConfigure 에 데이터가 변화하면 화면이 알아서 갱신해줄 것이다
그러면 이제 프로바이더 설정도 끝났고 싱글톤 설정도 끝났는데
문제가 있다
homePage()위젯이랑 연결 안했다
멀티 프로바이더 안에 child 즉 자식을 하나 만들어준다
이는 기본 속성이므로 지정이 가능하다
근데 여기에 마테리얼 앱 , 조상도 만들고 자식도 만들고 할 수가 없다
그래서 위젯을 하나 main.dart에 만든다
이렇게 Stateless 위젯으로 하나 만들고 child에 연결해준다
자 이제 경고도 없어졌겠다
한번 리스타트 해보자
패키지 설치 후 안정성을 위해
Stop 후 main.dart 에서 재 시작을 권장한다
화면이 우리가 전에 만든 그게 아니다
어떻게 해야할까
연결하면 되는거지
기존에
부모인
MaterialApp을 지정하고 home을 만들어 지정했던걸 기억해야만 한다
일단 조상을 만들고
거기에 home을 만들어준다
이제 HomePage를 연결하자
이제 화면에
우리가 아까 만든 페이지가 떠 있는걸 볼 수 있다
여기까지 에러가 있으면
댓글을 남기길 바라며
간단하게 화면에 숫자를 바꿔보도록 하자
아까 만든 프로바이더로 와준다
dataConfigure로 오면된다
이제 여기에 변수를 하나 만든다
이 변수 앞에는 _가 붙어있는데
_ 가 붙은 변수는 DataConfigure에서만 쓸 수 있다
왜 이런걸 만드냐면
혹시라도 변수끼리 이름이 같거나 했을때
충돌을 방지하고 유지보수가 쉽게 하기 위함이다
그러면 다른파일에서 못꺼내쓰지 않냐고?
당연하다 _가 있어서 못쓴다
그러면 쓸 수 있게 해야하는데 해당 방법을 소개한다
이렇게 get을 사용해 setter를 만들어주면 다른파일에서 사용이 가능하다
그냥 int upStage = 0; 하면 안되냐고?
된다
본인 편한방식대로 하도록 하자
이제 값을 증가시켜줄 함수하나를 만든다
해당 함수를 살짝 설명해보자면
void기 때문에 반환은 없다
upStage는 실행되면
_upStage += 1; 코드를 실행시킨다
해당 내용은 풀어보면
_upStage = _upStage + 1 ; 와 같다
즉 기존 _upStage에 1을 계속 더하란 얘기다
한번 함수가 실행될때마다 숫자가 증가 할 텐데
그러면 실제로 증가하는지 봐야하는데
콘솔에서 표시하지 말고 바로 화면으로 가도록 하자
홈페이지 파일로 넘어와서
상단에
Widget build(BuildContext context) 를
찾도록 하자
내가 프로바이더를 다른 파일에서 쓰기 위해선
양식을 맞춰서 사용해야 한다
프로바이더를 사용하기 위해선
기본적으로 context라는게 있어야하고
그게 있는 위치에서 프로바이더를 불러와야한다
근데 또 오류가 있다
패키지 두개를 불러와야 한다
지금 프로바이더 기능을 사용하려면
main.dart 에서 불러온
프로바이더 패키지를 추가하고
dataConfigure 의 기능을 사용할 것이기 때문에 해당 파일도 불러와야한다
main.dart에서 복사해왔다
이제 오류가 없는걸 볼 수 있다
저기 노란색으로 isn't used 경고가 있는데
이건 안쓰니까 지우란 얘기다
근데 우린 써줄거니까 무시하도록 한다
아까 만들어둔 _upStage 변수를 사용하기 위해선 get으로 연결해둔
getUpStage 변수를 사용해야한다
따라서
. 을 기준으로
앞은 불러올 주소 . 뒤는 불러올 내용 이렇게 보면 된다
dataConfigure라는 변수는 아까 만든 프로바이더를 담고 있고
그 안에서 getUpStage를 가져오란 얘기다
근데 오류가 있다
왜냐면
text라는 위젯은 String 즉 , 문자열만 지원하기 때문이다
그럼 못쓰냐고? 다 방법이 있다
int는 숫자이기 때문에 문자열로 변환만 해주면 된다
.toString을 뒤에 붙여준다
근데 또 오류가 있다
오류를 읽어보면
constant 관련 오류인데
이건 데이터가 변화할 수 있는 변수를 텍스트에 지정하면서
데이터를 변화시킬 수 없는 const 키워드가 포함되었을때 경고가 뜬다
그냥 const 지우면 된다
이제 버그가 없다
화면을 한번 확인하면
0 이 화면에 뜬걸 볼 수 있다
여기서 왜 0 으로 뜨냐면
우리는 앞서 _upStage 변수를 0 으로 초기화 했기 때문이다
이제 아까 만든 upStage 함수만 버튼에 연결하면 된다
강화버튼을 찾아보자
여기 onPressed 에 함수를 연결하도록 한다
이제 버튼을 눌러보자
아 홈페이지 파일도 저장하는거 잊지말자
강화 버튼을 누르면 화면은
변화가 없다
리스타트나 핫 리로드를 눌러보자
바뀌긴한다
근데 뭐임?
왜 바로 안바뀜?
아깐 바뀐다매
사기 포스팅인가
아니다
dataConfigure로 넘어와서 함수를 한번 살펴보자
변수 값은 확실히 증가시키고 있다
다만 데이터가 바뀌었으니까 화면보고 갱신하라고 하는 코드가 빠져있다
그럼 왜 이렇게 알려줬냐고?
그게 뭐 하는건지 모르고 쓰라니까 쓰면
무슨의미가 있는가
알아야 쓰는거지
추가할 건 별거 없다
notifyListeners();
하나만 추가하면 끝난다
이제 버튼을 다시 눌러보자
숫자가 변하는걸 볼 수 있다.
이번 시간에는 과제가 있다
숫자를 다시 0으로 만드는 함수를 하나 만들고 리셋버튼에 연결해오자
답은 다음시간에
끝내며
오늘 처음 외부 패키지를 설치했다
아마 따라오느라 힘들었을 수도 있을거라 생각한다
참 많은 패키지를 설치하면서 사용하게 될테니
잘 익혀두길 바란다