이코노딩

[Flutter Project] 복권번호 예측기 제작 본문

프로젝트/원샷

[Flutter Project] 복권번호 예측기 제작

떼이로 2023. 3. 31. 17:10

✅개요

문자로 자꾸 로또번호랑 복권번호 예측 프로그램으로 어쩌구하면서 광고가 날라 옴.

그래서 만들려고보니 연금복권 데이터를 사용하는게 가장 심플해보여 바로 제작에 들어갔다.

 

✅구상

 

✔️화면구상

다양한 기능이 아닌 데이터를 토대로 번호만 출력하면 한 들어가서 한 페이지에 나올 수 있어야게 만들어야 하겠고,

또 근거에따라 여러가지 번호 조합이 있으면 좋겠다 싶어 여러 옵션으로 만들었다.

 

✔️상태관리

이번엔 GetX 말고 Provider를 사용하여 제작하기로 하였다. (솔직히 만들려는 프로젝트 크기가 작아서 GetX가 더 유용해 보이긴 하지만 전 프로젝트에서 너무 많이 사용해서 Provider로 가기로 함.)

https://pub.dev/packages/provider

 

provider | Flutter Package

A wrapper around InheritedWidget to make them easier to use and more reusable.

pub.dev

예전에 한번 정리해본게 있어서 참고함

https://iconoding.tistory.com/39

 

[Flutter] 내가 보려고 정리한 Provider 예시

간단한 상태관리를 하기 위한 Provider 예시 1. ChangeNotifier 클래스 만들기 위젯에 쓰일 상태변경이 필요한 함수, 변수 등을 모아 클래스로 만들어 준다. 예를 들어 배달의 민족과 같은 앱을 모델로

iconoding.tistory.com

✔️수익모델

개인개발에서 가장 좋은 수익구조는 광고가 아닐까 싶어 광고를 넣어 보기로했다.

기본적으로 배너광고와 번호를 받기 위한 리워드형 광고 2개로 선택했다.

 

✅시작

기본적으로 데이터가 필요할거 같아서 FireBase FireStore에 데이터를 전부 넣어 주었다.

파이어베이스 연동 및 데이터 불러오는건 저번 글에서 다룸.

https://iconoding.tistory.com/50

 

[Flutter Project] FireBase와 앱 연동해보기 <앱 등록>

애미티 내에 필요한 데이터(게임 내 주제)가 내부에 있으면 업데이트가 너무 빈번하게 일어나기에 파이어베이스에서 FireStore을 사용할거다. ✅진행 먼저 패키지를 다운로드 하고 Install 1️⃣Packa

iconoding.tistory.com

다 넣어 준 후 프로젝트 내에 Provider 폴더를 만들어 준 후, 알고리즘을 짜봤다.

일단 넣어 놨던 데이터를 각각의 번호에 맞는 리스트에 넣어주고,

//getDataList
List<String> firstList = [];
List<String> secondList = [];
List<String> thirdList = [];
List<String> fourthList = [];
List<String> fifthList = [];
List<String> lastList = [];

처음에는 int형으로 만들다가 데이터넣는게 너무 노가다가 되버려서 String으로 넣은 후 안에서 int로 바꿔서 다뤘다.

 

다음에는 계산이 완료되어 보여질 리스트를 선언해주고 계산이 완료되면 각자리에 맞게 add해서 넣어 주었다.

//showList
List<Widget> today =[];
List<Widget> recentMax = [];
List<Widget> recentMin = [];
List<Widget> numberMax = [];
List<Widget> numberMin = [];

처음에는 int형으로 넣었었는데, 공모양에 각 숫자마다 색상을 다르게 주고 싶어서 widget리스트로 만들었다.

 

makeBall(int n){
  switch(n){
    case 0 : return const Zero();
    case 1 : return const One();
    case 2 : return const Two();
    case 3 : return const Three();
    case 4 : return const Four();
    case 5 : return const Five();
    case 6 : return const Six();
    case 7 : return const Seven();
    case 8 : return const Eight();
    case 9 : return const Nine();
    default : return Text('$n');
  }
}

계산하는 부분 생략

 

✅진행

이제 구상된 화면을 만들거다.

디자인은 CustomScrollView에 Container들을 얹어서 버튼을 누르면 번호가 출력되게 만들 생각이다.

처음 구상했던건 RefreshButton을 주고 누르면 번호가 다시 계산되는걸 생각했는데, 너무 뻔한 기능인거 같아 데이터 표본을 조절하는 기능을 넣었다.

 

최근 30<n<100회 까지의 데이터를 가지고 계산 할 수 있는 기능을 넣어 보겠다.

✔️사용한 Package

https://pub.dev/packages/another_xlider

 

another_xlider | Flutter Package

(Another Xlider) A material design slider and range slider, horizontal and vertical, with RTL support and lots of options and customizations for flutter

pub.dev

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('최근 ${dataProvider.recent}개의 데이터', style: TextStyle(fontSize: 20.sp),),
    FlutterSlider(
        touchSize: 35.r,
        handlerHeight: 30.r,
        handlerWidth: 30.r,
        values: [dataProvider.recent.toDouble()],
        max: 100,
        min: 30,
        onDragging: (index, lowValue, upperValue){
          dataProvider.changeSlider(lowValue);
        },
    ),
    InkWell(
      onTap: ()=> dataProvider.data30Change(),
      child: Container(
        height: 40.h,
        width: 80.w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25),
          color: const Color(0xffa3b585),
        ),
        alignment: Alignment.center,
        child: Text('적용하기', style: TextStyle(fontSize: 16.sp, color: Colors.white, fontWeight: FontWeight.bold),),
      ),
    )
  ],
)

조절하면 povider에있는 changeSlider함수를 호출하여 recent변수를 바꿔주었다.

계산은 따로 버튼을 만들어서 적용하기를 눌러야 바뀌게 만들어 주었다.

 

 

✅결과


다음은 광고를 넣는 것으로 시도해 보겠다.