목록플러터 (13)
drexqq
진행중에 아키텍쳐 선택, 패키지 설치, 권한 설정 등등 매번 프로젝트를 진행하려 할 때마다 해야하는 귀찮은 작업들이 많이 있다고 생각이 들었습니다 ! 그래서 본 프로젝트에 대한 코딩을 진행하기 전에 boiilerplate를 만들어 두기로 했습니다...! 레퍼런스로 참고한 github 프로젝트의 주소를 남겨두겠습니다 ! https://github.com/SimpleBoilerplates/Flutter GitHub - SimpleBoilerplates/Flutter: A boilerplate project for Flutter using RiverPod, Dio, auto_route, Freezed and generated wi A boilerplate project for Flutter using Rive..
프로젝트에서 사용할 폰트를 적용해보겠습니다. CDN방식이 아닌 다운받아서 사용할 계획이기 때문에 폰트를 다운받아 줍니다. Pretendard폰트를 선택했습니다 ! https://github.com/orioncactus/pretendard GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform - GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui..
사이드프로젝트를 시작하기로 생각을 하였읍니다.. 간단하게 설명을 해보면 지도 기능을 기반으로한 모바일 앱을 플러터로 만들어서 배포해볼 생각입니다. 배포가 완료되면 공유를 해보겠읍니다.. !
플러터에서 google map api를 사용하는 방법을 알아보겠습니다. 일단 사용할 패키지를 설치해줍니다. google_maps_flutter: ^2.2.1 https://console.cloud.google.com Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 설치후에 위 링크로 이동하여 구글 클라우드 플랫폼에 접속해서 API키를 발급받아야합니다. 기존 프로젝트가 있다면 사용하셔도 괜찮지만 새 프로젝트를 기준으로 포스팅을 해보겠습니다. 만들기를 완료하였다면 만든 프로젝트로 이동한 후에 좌측 상단에 있는 햄버거 메뉴를 눌러서 API및 서비스의 라이브러리를 클릭합니다. 해당 화면에 접속하였다면 빨간색 박스 두 부분에 들어가서 사용버튼을 눌러줍니..
플러터에서 HTTP프로토콜을 이용한 통신을 하기 위해서는 http 패키지를 사용하면 됩니다. https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev 설치방법은 cmd를 이용한 설치와 pubspec.yaml파일을 이용한 설치가 있습니다. 두 방법중 편한 방법을 선택해 사용하시면 됩니다. cmd flutter pub add http pubspec.yml 간단한 사용법을 알아보겠습니다. 위 코드에서 http 통신을 위한 부분은 3, 8, 9, 12, 13번 줄입니다. 차례로 설명을 해드리자면 3번은 사용할 http패키지를 import해주는 부분 ..
Flutter에서 주로 사용되는 비동기통신인 Future와 Stream에 대해서 작성을 해보겠습니다. 비동기 프로그래밍이란 - 파일읽기, DB I/O, 네트워크 데이터 가져오기 등 시간이 오래 걸리는 작업을 수행할 때 사용하는 방법입니다 - 비동기 작업을 통해 다른 작업이 완료되기를 기다리는 동안 프로그램이 작업을 완료할 수 있습니다. - 플러터에서의 비동기 프로그래밍은 일반적으로 결과를 Future로 제공하거나 결과에 여러 부분이 있는 경우 Stream으로 제공합니다. Future은 일회성 응답 (ex: 파일 하나 읽기, http requrest etc..) Stream은 여러번의 응답 (ex: 계속해서 변하는 데이터) 동기 작업: 동기 작업은 완료될 때까지 다른 작업의 실행을 차단합니다. 동기 함수:..
Flutter에서 자주 사용되는 대표적인 디자인 패턴이다. BLoC Pattern - Bussiness Logic Component의 줄임말이다. - 상태관리, UI, 비즈니스 로직을 분리해준다. - stream을 통해 상태를 업데이트하고 이것을 통해 stateful,stateless나 setState()가 필요 없어진다. (stream에 대한 설명) - 하나의 UI에서 여러가지의 BLoC이 존재할 수 있다. (재사용하기가 좋다) - 단순한 로직을 짜려해도 최소 4개의 클래스가 필요하다. (ex: model, provider, repository, bloc) Provider Pattern - BLoC패턴과 사용이유는 같지만 데이터의 공유나 로직의 분리 등을 조금 더 간단하게 할 수 있다.
플러터에는 final과 const가 존재한다. 둘 다 변경할 수 없는 값을 의미하지만 final은 실행 중에 값이 결정되고 const는 컴파일 중에 값이 결정된다. 실행이 되면서 값이 정해지는 상수는 final을 사용하고, 정말 변하면 안되는 상수는 const를 사용하자
플러터에서 ListView를 구성하는 방법은 총 4가지가 있습니다. 1. The default constructor takes an explicit List of children. - 기본 생성자인 ListView를 호출하고 children으로 전달하는 방법. - 적은 양의 데이터를 보는데에 적합합니다. ListView( padding: const EdgeInsets.all(8), children: [ Container( height: 50, color: Colors.amber[600], child: const Center(child: Text('Entry A')), ), Container( height: 50, color: Colors.amber[500], child: const Center(child..
InkWell과 GestureDetector 위젯은 사용자의 동작을 감지할 수 있는 위젯입니다. onTap, onDoubleTap 등 여러가지 동작들을 감지해서 유저와 상호작용이 가능합니다. 더 많은 액션들은 공식 홈페이지에 나와있습니다. [InkWell] https://api.flutter.dev/flutter/material/InkWell-class.html InkWell class - material library - Dart API A rectangular area of a Material that responds to touch. For a variant of this widget that does not clip splashes, see InkResponse. The following diag..