외로운 Nova의 작업실

안녕하세요, 이번장에서는 저번에는 로컬DB에 연결했지만 이번에는 서버와 연동하겠습니다. - 사전 지식 상태 관리를 영어로 State Management라고 부릅니다. 상태는 데이터를 의미하니 결국 상태관리는 데이터 관리입니다. 즉, 현재 상태의 데이터를 관리하는 것입니다. 이제까지 클래스 내부에서 setState()함수를 실행해서 상태를 업데이트해줬습니다. 하지만, 이러한 방식은 작은 프로젝트에서는 아주 효율적이지만 프로젝트가 커지면 커질 수록 같은 변수를 반복적으로 서브 위젯으로 넘겨줘야하니 데이터 관리가 어렵습니다. 따라서 글로벌 상태 관리를 통해 한번 넘겨주는 방법을 이용해야합니다. 이를 구현하는 방법에는 플러터에서 Bloc, GetX, 리버팟, 프로바이더와 같은 상태 관리 플러그인이 있습니다. 이..

안녕하세요, 이번장에서는 일정 관리 앱에 로컬 DB를 적용하고 로컬 DB를 사용하여 일정을 저장하고 불러오는 기능을 사용해보겠습니다. - 사전 지식 드리프트 플러그인을 사용하면 직접 SQL을 작성하지 않도록 SQLite를 사용할 수 있습니다. 드리프트와 같은 객체-관계 모델을 사용하면 테이블을 클래스로 표현하고 쿼리를 다트언어로 표현하면 드리프트가 자동으로 해당되는 테이블과 쿼리를 생성합니다. 아래는 관련한 자료입니다. @DataClassName('User') class Users extends Table { IntColumn get id => integer().autoIncrement()(); TextColumn get name => text().customConstraint('UNIQUE')(); T..

안녕하세요, 이번시간에는 일정 관리 앱을 만들고 12, 13, 14장을 지나며 로컬 DB, 원격 DB, 파이어베이스등을 이용해보는 과정을 학습해보도록 하겠습니다. - 프로젝트 구상 - 사전 지식 이번에 사용해볼 tale_calendar 플러그인은 달력을 쉽게 구현할 수 있도록 해주는 플러그인입니다. 직접 달력을 구현할 수 도 있겠지만 시간이 너무 오래걸리니 잘 개발되어있는 오픈소스를 이용해서 달력 기능을 구현해보겠습니다. - 사전 준비 프로젝트 이름 : calendar_schedular 이제 pubspec.yaml을 설정해보겠습니다. 이때 플러그인을 추가할 수 있는 키값은 dependencies말고도 dev_dependencies가 하나더 있습니다. 전자는 빌드할때 앱에 함께 패키징 되지만 dev_dep..

안녕하세요, 이번 장에서는 코드팩토리 유튜브를 api로 가져오고 ListView로 뿌려주는 앱을 만들어보겠습니다. - 사전 지식 플러터에서는 http 플러그인이나 dio 플러그인을 사용합니다. - 사전 준비 프로젝트 이름 : cf_tube 이제 유튜브 API를 설정해야합니다. 이는 구글 클라우드 플랫폼에서 발급한 토큰이 필요합니다. 먼저 구글 클라우드 플랫폼에 가입하고 프로젝트를 생성해줍니다. 그리고 검색을 통해 유튜브 api를 사용해줍니다. 사용자 인증 정보를 만들어서 API키를 발급해줍니다. API키값을 잘 저장해줍니다. - pubspec.yaml 파일 설정 flutter 패키지들을 설정해줍니다. dependencies: flutter: sdk: flutter # The following adds t..

안녕하세요, 이번 장에서는 포토 스티커를 사진에 붙이고 수정한 다음, 저장하는 앱을 만들어보겠습니다. - 준비하기 프로젝트 명 : image_editor - 이미지와 폰트 추가 포토 스티커로 사용할 이미지와 폰트를 추가하도록 하겠습니다. - pubspec.yaml 설정하기 이번 프로젝트에서 사용하는 image_picker와 image_gallery_server 패키지를 적용해주겠습니다. name: image_editor description: "A new Flutter project." # The following line prevents the package from being accidentally published to # pub.dev using `flutter pub publish`. This ..

안녕하세요, 이번 장에서는 동영상 플레이어를 간단하게 Flutter로 만들어보겠습니다. - 구상하기 첫 화면에서는 동영상 플레이어 logo와 아래 VideoPlayer라는 텍스트를 만들고 Logo를 클릭하면 영상을 플레이하며, 영상 컨트롤러(뒤로, 정지/재생, 앞으로, 다른 영상선택)버튼을 영상위에 표시할 것입니다. 이러한 구조는 화면을 2개 써야할 것 같지만, 이번에는 하나의 위젯으로 2개의 함수를 구현하여 각 화면을 표시하도록 구현해보겠습니다. - 준비하기 프로젝트 이름 : vid_player Logo 이미지를 추가하겠습니다. 그리고 pubspec.yaml 설정하겠습니다. dependencies 부분에 필요한 패키지들을 추가하고 asset을 추가해줍니다. name: vid_player descript..

이번 장에서는 디지털 주사위를 만들어보겠습니다. - 사전 지식 가속도계란 말 그대로 물체가 특정 방향으로 이동하는 가속도가 어느 정도 인지를 숫자로 측정하는 기기입니다. 대부분의 핸드폰에 가속도계가 장착 되어있으며 좌우는 x축, 위아래는 y축, 앞뒤로는 z축을 의미합니다. 자이로스코프는 가속도계의 단점인 회전 미측정이라는 점을 극복하기위해서 탄생했습니다. x축은 좌우로 회전하는 방향이며 y축은 위아래로 회전하는 방향, z축은 앞뒤로 회전하는 방향을 가르키게되며 회전값을 얻어낼 수 있습니다. Sensor_Plus 패키지를 사용하면 핸드폰의 가속도계와 자이로스코프 센서를 간단하게 사용할 수 있습니다. 전반적인 핸드폰의 움직임을 측정하려면 정규화가 필요한데, 이부분은 shake 패키지를 이용합니다. - 사전 ..

이번 장에서는 만난지 며칠지난지 알려주는 앱을 만들어보겠습니다. 이미지, 폰트등을 써서 예쁘게 만들어볼 예정입니다. 그리고 처음 만난날을 지정할때는 다이얼로그를 사용해서 만들어보겠습니다. - 사전지식 다이얼로그중에서 IOS 스타일로된 showCupertinoDialog()함수를 사용할 예정입니다. 이 함수는 IOS 스타일로 실행되며 실행 시 모든 애니메이션과 작동이 iOS 스타일로 적용됩니다. - 사전 준비 프로젝트 이름 : u_and_i 네이티브 언어 : 코틀린, 스위프트 이미지와 폰트를 pubspec.yaml 파일에 추가하겠습니다. 아래는 home_screen.dart 파일입니다. import 'package:flutter/material.dart'; class HomeScreen extends St..

안녕하세요, 이번장에서는 flutter로 전자액자를 3초마다 옆으로 넘어가고 옆으로 슬라이드하면 넘어가는 액자로 총 5개의 사진을 넣어서 만들어보도록 하겠습니다. 사전지식을 익히고 바로 만들어보겠습니다. - 사전 지식 위젯 생명주기는 위젯이 화면에 그려지는 순간부터 삭제되는 순간까지의 주기를 의미합니다. 플러터에서 UI를 표현할때 사용되는 대표적인 위젯인 StatlessWidget과 StatefulWidget의 생명주기를 알아보겠습니다. 상태가 없는 위젯으로 화면 변경이 안됩니다. 따라서 생명주기는 간단합니다. 스테이트리스 위젯은 불변이기 떄문에 한번 생성된 인스턴스의 build() 함수는 재실행되지 않습니다. 대신 인스턴스를 아예 새로 생성한 기존 인스턴스를 대체해서 변경 사항을 화면에 반영합니다. 스..

안녕하세요, 이번 장에서는 블로그 웹을 띄우는 앱을 만들어보겠습니다. 블로그 웹을 띄우고 앱바에 홈버튼을 두어서 홈버튼을 누르면 블로그의 홈화면으로 가게끔 기능도 넣어보겠습니다. - 사전 지식 콜백 함수는 일정작업이 완료되면 실행되는 함수입니다. 예를 들어 유저가 화면을 터치했을떄 실행할 함수나 웹뷰의 로딩이 완료됐을 때 실행할 콜백 함수를 다음과 같이 정의할 수 있습니다. Webview( //로딩 완료후 실행되는 콜백함수 onPageFinished: (String url){ print(url); }, ) onPageFinished()는 웹뷰에서 페이지 로딩이 완료된 뒤에 실행되는 콜백 함수입니다. 이 함수는 첫번째 매개변수로 로딩된 페이지의 URL을 반환해줍니다. 페이지가 로딩 후 실행하고 싶은 작업이..