이코노딩

😶기존의 Drawer와 DropDown 기능을 Custom하기 힘들어 원하는 디자인을 직접 구현해보기로 하였다. 라이브러리를 가져와 쓰려고 했다가, 간단하게 만들 수 있을 것 같아서 그대로 사용하기로했다. ✅CustomDrawer 기존 앱들에서 좌측에 숨겨져있다가 어떠한 액션 이벤트에 반응하여 나오는 서랍 느낌이다. 버튼을 눌렀을 나오는 더보기 버튼 처럼 만들었다. ☑️동작 구상 동작은 간단하게 버튼을 눌렀을 때, 페이지를 이동하는데 애니메이션을 주고 또 이동 옵션 중, opaque를 false로 주어서 이전 화면이 그대로 유지 될 수 있도록하였다. 그리고 Drawer페이지에서는 Stack과 Position위젯으로 위치를 조정해 주었다. ☑️라우팅 코드 페이지 이동시 애니메이션은 fade가 가장 자연스러..

✅UI 구상하기 ☑️ Class - Home() : 필요한 위젯 ✔️ Home은 안에 PageView Widget과 Page 이동을 시각적으로 보여주는 Widget ✔️ Drawer를 꺼낼 수 있는 Button ✔️ 애니메이션을 라이브러리 위젯 DelayedWidget: https://pub.dev/packages/delayed_widget ☑️Class - Home() : Code ✔️ StatelessWidget에서 화면 구상, GetxController로 상태관리 class Home extends StatelessWidget { Home({Key? key}) : super(key: key); final controller = Get.put(HomeController()); ✔️ 가장 상단(AppBa..

✅ 개요: 처음 Dart/Flutter 공부를 시작하면서 만들어 보았던 Amity앱에 여러 기능들을 추가와 GetX를 적용해서 만들어보자. https://iconoding.tistory.com/22 Flutter Project : 오프라인 게임 지원 앱 만들어보기 ▶ 프로젝트 생성 적당히 새 Flutter 프로젝트 하나 생성해주고 시작 먼저 필요한 이미지들을 프로젝트 폴더 내에 assets/image 폴더를 만들어 넣어줌 넣어 주고 이미지를 사용하기 위해 pubspec.yaml 파 iconoding.tistory.com ✅ 목표 ✔️ 심플하면서 깔끔한 디자인으로 UI 개편 ✔️ 기존에 넣지 않았던 스플레쉬 스크린, 게임 진행간 효과음, 앱 아이콘 등 적용 ✔️ GetX를 통한 상태관리 ✔️ 새로운 게임 ..

▶상태관리 플러터에서 상태변화는 setState()메소드를 호출하여 변화 시켜주는게 기본 하지만, setState는 화면 전체를 리빌드 시키기 때문에 상태변화가 일어나지 않는 부분 까지도 리빌드가 이루어져, 자원낭비가 높다. 이를 위한 여러 라이브러리가 있는데 그 중, GetX에 대하여 공부해보겠다. ▶GetX https://pub.dev/packages/get get | Flutter Package Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX. pub.dev GetX를 사용하면서 느낀건, context를 안쓰는게 너무 편하다는 점이다. 예를 들어 화면 라우팅을 할 ..

✔ Flutter Scroll Widget 옵션 중 Physics 종류 1️⃣ NeverScrollableScrollPhysics 기능: 스크롤 잠금, 2️⃣ AlwaysScrollableScrollPhysics 기능: 3️⃣ BouncingScrollPhysics 기능: Edge부분에서 바운싱되는 효과 4️⃣ ClampingScrollPhysics 기능: 5️⃣ FixedExtentScrollPhysics 조건: FixedExtextScrollController를 사용한 ScrollView에서만 사용가능 기능: 6️⃣ PageScrollPhysics 기능: 구역을 페이지로 나눠서 이동 즉, 조금씩 스크롤 불가능 7️⃣ RangeMaintainingScrollPhysics 기능: 8️⃣ ScrollPhy..

간단한 상태관리를 하기 위한 Provider 예시 1. ChangeNotifier 클래스 만들기 위젯에 쓰일 상태변경이 필요한 함수, 변수 등을 모아 클래스로 만들어 준다. 예를 들어 배달의 민족과 같은 앱을 모델로 생각했을 때, 장바구니로 기준을 잡고 모델을 구축한다. 장바구니에 필요한 모델 예시) 주문리스트, 부분선택 체크박스 리스트, 전체선택 값 등 ▶Model class Order{ String productName; int price; int count; Order({ required this.price, required this.productName, required this.count, }); } ▶Provider (ChangeNotifier은 with을 해도되고 extends해도된다 상황에..

▼자세한 내용▼ https://pub.dev/packages/connectivity_plus/changelog connectivity_plus | Flutter Package Flutter plugin for discovering the state of the network (WiFi & mobile/cellular) connectivity on Android and iOS. pub.dev 1. 설치 dependencies: connectivity_plus: ^3.0.2 pubspec.yalm 파일에 dependence해준 후 Pub get import 'package:connectivity_plus/connectivity_plus.dart'; 2. Example Code 먼저, 사용할 변수를 선언 //..

▶Game3(몸으로말해요) 옵션 페이지 몸으로 말해요 게임은 분 단위로 타이머 지정과 게임의 난이도를 위해 주제를 선정 할 수 있게 만들었다. 랜덤은 모든 주제를 섞인채로 진행되게 모든 리스트를 하나의 List로 만들어서 선택창에 넣었다. ●필수 기능 1. 타이머 지정 2. 주제지정 ▶코드 class Game3Option extends StatefulWidget { const Game3Option({Key? key}) : super(key: key); @override Game3OptionMenu createState() => Game3OptionMenu(); } class Game3OptionMenu extends State{ final List_ListCon = ['동물', '음식', '스포츠', '..