[Flutter] Amity앱에 GetX 적용해보기

✅ 개요: 처음 Dart/Flutter 공부를 시작하면서 만들어 보았던 Amity앱에 여러 기능들을 추가와 GetX를 적용해서 만들어보자.

https://iconoding.tistory.com/22

Flutter Project : 오프라인 게임 지원 앱 만들어보기

✅ 목표

✔️ 심플하면서 깔끔한 디자인으로 UI 개편

✔️ 기존에 넣지 않았던 스플레쉬 스크린, 게임 진행간 효과음, 앱 아이콘 등 적용

✔️ GetX를 통한 상태관리 

✔️ 새로운 게임 추가

✔️ 파이어베이스와 연동하여 데이터 구축

✔️ 여러기능 추가해보기

0️⃣ 벌칙모드 기능

1️⃣ 커스텀 기능

2️⃣ 플레이어 설정 기능

✅프로젝트

기존에 있던걸 사용하려다 Flutter버전이 너무 낮아 새롭게 만들기로 결정했다.

 

기존이랑 구분하기위해 amity_getx로 프로젝트를 하나 생성

 

디자인은 잘 모르기 때문에 간단하게 Container의 decoration 옵션을 사용하여 심플하게 구현.

 

 

 

☑️ Assets

프로젝트 폴더 하위에 assets 폴더 생성 후, 하위에 fonts, images, musics 폴더를 생성,

그리고 필요한 폰트, 이미지와 효과음 등을 넣어주었다. 

 

 

 

 

 

 

 

 

☑️필요한 라이브러리(나중에 추가될 수 있음)

Getx (상태관리):https://pub.dev/packages/get

get | Flutter Package

Screenutil(동적인 화면 구성): https://pub.dev/packages/flutter_screenutil

flutter_screenutil | Flutter Package

shared_preferences(데이터 저장): https://pub.dev/packages/shared_preferences

shared_preferences | Flutter Package

✔️ 라이브러리와 assets를 pubspec.yaml 파일에 추가하기

 

☑️라우팅

Splash	Home
	Game1Setting	Game1	Result
		PlayerSetting
		PenaltySetting
	Game2Setting	Game2	Result
		PlayerSetting
		PenaltySetting
		Customizing
	Game3Setting	Game3(Solo)	DetailResult
		Game3(Team)	DetailResult
		PlayerSetting
		PenaltySetting
		Customizing
	Game4Setting	Game4	DetailResult
		PlayerSetting
		PenaltySetting
		Customizing

To Be Continue...