Flutter16 Flutter 아키텍처 패턴 아키텍처 패턴이란? - 소프트웨어에 아키텍처의 공통적인 발생 문제에 대한 일반적인, 재사용이 가능한 해결책을 의미한다. 사용을 왜 해야하는가 ? - 프레임워크에 독립적이며 - 테스트를 쉽게 할 수 있고, - 기능 수정이나 추가가 용이하다 아키텍처 패턴 종류 - 대표적인 아키텍처 패턴으로는 MVC, MVP, MVVM 세 가지가 있다. MVC | 모델 - 뷰 - 컨트롤러 Model : 사용되는 데이터의 형태를 정의하고 데이터를 처리하는 부분 View : 사용자에게 보여지는 UI 부분 Controller : 사용자의 입력을 받고 처리하는 부분 동작 - Controller를 통해 사용자의 입력을 받고 Model을 업데이트하면 View는 Model을 통해 View를 업데이트한다. 특징 - 가장 단순한 패턴으로 구.. 2022. 12. 20. [flutter] Mac M1 에러: Searching for inspections failed: undefined method `map' for nil:NilClass 에러 해결법 해당 프로젝트 폴더 터미널에서 sudo arch -x86_64 gem install ffi cd ios arch -x86_64 pod install 2022. 12. 8. Flutter 라이브러리 정리 필수 패키지 get - 상태관리 패키지. Most Likes 1위. (대체, provider, flutter_bloc) shared_preferences - 디바이스에 단순 데이터 저장. Most Likes 3위. (비슷, sqflite(SQLite), hive(nosql)) http - api 연동 패키지. Most Likes 4위. (대체, dio) url_launcher - 기본 브라우저 url 열기, 기본 이메일 앱에서 이메일 보내기, 기본 전화앱을 사용해 전화걸기, 기본 메시징 앱을 이용해서 sms 메시지 보내기 등 지원 Most Likes 5위. flutter_launcher_icons - 앱 아이콘 한번에 바꿔주는 패키지 Most Likes 9위. image_picker - 앨범 또는 카메라.. 2022. 12. 4. GetX란 ? GetX Flutter를 위한 *state 관리 라이브러리이다. * state란? 간단하게 말하면 앱에서 사용되는 데이터들이라고 보면 된다. - 성능 : 성능과 리소스 소비의 최소화에 집중한다. Streams, ChangeNotifier를 사용하지 않는다. - 생산성 : 쉽고 간결한 구문을 사용한다. 사용하지 않는 리소스는 메모리에서 자동으로 제거해준다. 따라서 개발자가 메모리에서 컨트롤러를 제거하는 것을 신경쓰지 않아도 된다. - 조직화 : 화면, 프레젠테이션 로직, 비지니스 로직, 종속성 주입, 네비게이션을 분리할 수 있다. 프레젠테이션(보여지는 부분)과 비즈니스(데이터 처리) 로직에 대한 분리 - GetX는 statefulWidget을 사용하지 않아도 된다 ! 준비 작업 - pubspec.yaml .. 2022. 12. 4. Flutter 기본 위젯 StatelessWidget - 변수 값을 변경한다 하더라도 화면이 변경되지 않는다. 상태가 없는 위젯이기 때문이다. - 최초 앱 실행 시 한 번만 실행된다. StatefulWidget - 변수 값을 변경하게 되면 화면이 변경된다. 상태가 있는 위젯이다. - 앱이 실행되고 난 뒤에도 상태가 변경되면 다시 실행한다. - final 변수가 아닌 변경할 수 있는 일반적인 변수를 가질 수 있다. Scafflod - 사용자에게 좋은 경험을(UX) 줄 수 있도록 플렅처에게 개발자에 제공해주는 클래스, Scaffold로 감싸는 순간 휴대폰 화면에 구조가 만들어지고 쉽게 앱을 만들 수 있다. - MaterialApp 안에 Scaffold 구조를 가져야 한다. - AppBar : 해당 화면에 대한 메뉴나 이동 버튼, 그.. 2022. 11. 28. 애니메이션(3) 인트로 화면 만들기 애니메이션(1) 그래프, 색상 변경, 불투명도 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 그러려면 shinjoo95.tistory.com 애니메이션(2) 페이지 이동, 회전 애니메이션 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 shinjoo95.tistory.com 앞 게시물처럼 Hero를 이용하면 페이지 연결을 자연스럽게 표현할 수 있고, AnimatedBuilder와 Tween을 이용하면 원하는 동작으로 애니메이션을 만들 수 있다. 이러한 내용을 바탕.. 2022. 11. 20. 애니메이션(1) 그래프, 색상 변경, 불투명도 애니메이션은 위젯이 처음 위치에서 마지막 위치까지 어떻게 이동할 것인지를 정의하는 것이다. 이러한 동작을 매끄럽게 표현하려면 프레임 단위로 위젯의 위치를 구현해야 하지만 그러려면 복잡한 계산식이 필요하다. 하지만 플러터는 복잡한 계산식이 없어도 편리하게 애니메이션을 구현하는 기능을 제공한다. - 플러터가 제공하는 애니메이션 기능 중 하나인 AnimatedContainer 위젯을 사용하면 기존의 컨테이너 위젯과 똑같지만 애니메이션의 모양을 결정하는 curve와 재생 시간을 결정하는 duration 변수를 추가로 넣을 수 있다. - 다음 주소에 접속하면 플러터 API의 Curves 클래스가 제공하는 다양한 애니메이션 모양을 확인할 수 있다. Curves class - animation library - Da.. 2022. 11. 18. 간단한 todo_list 만들기 내비게이션 기능을 이용하여 할 일을 기록하는 todo_list 앱을 구현해보았다. - 아래 내용을 참고하여 SubDetail.dart, SecondDetail.dart, thirdPage.dart 페이지를 간단하게 만들어놓고 시작하였다. 내비게이션 한 페이지로도 앱을 만들 수 있지만 기능이 많으면 화면 구성이 어렵고 로딩이 느려지기도 한다. 내비게이션 기능은 앱이 제공하는 기능이나 메뉴별로 화면을 분리해서 개발하는 방법이다. - Fir shinjoo95.tistory.com 할 일 보기 기능 만들기 - 리스트뷰에 할 일을 보여주는 기능을 구현하였다. - InkWell 위젯은 탭, 더블탭, 롱탭 등, 다양한 터치 이벤트를 처리할 수 있다. - pushNamed() 함수로 페이지를 이동하면서 첫 번째 인자로.. 2022. 11. 15. 책 목록 불러오기 * 네트워크 통신을 하여 서버에 접속하고 데이터를 가져와 책 목록을 보여주는 기능을 구현하였다. 초기 셋팅 - pubspec.yaml 파일을 열고 dependencies 에 http 패키지를 추가후 pub get - main.dart에서 패키지 불러오기 네트워크 통신을 위한 셋팅 - 네트워크 통신을 하려면 접속할 대상 URL이 있어야 한다. - JSON은 파일 크기도 작으면서 태그를 이용하여 값을 확인할 수 있기 때문에 많이 사용한다. - 카카오에서 발급받은 REST API 키를 이용하여 구현하였다. (지워진부분) - 사용자가 버튼을 누르면 http.get을 통해 url에 입력한 주소에 데이터를 요청한다. 해당 주소의 서버가 응답하면 가져온 데이터를 result에 넣고 그중 본문을 출력한다. - asyn.. 2022. 11. 14. 이전 1 2 다음 반응형
