[Must Have 코드팩토리의 플러터 프로그래밍] 11

11 디지털 주사위

#가속도계 #자이로스코프 #Sensor_Plus 핸드폰을 흔들어 주사위를 굴리는 앱. 가속 수치를 인식해 특정 수치를 넘으면 특정행동을 실행하도록 한다. 11.1 사전 지식11.1.1 가속도계특정 물체가 특정 방향으로 이동하는 가속도가 어느 정도인지 숫자로 측정하는 기기.3개의 축(x: 좌우, y: 위아래, z: 앞뒤)으로 방향에 따른 가속도를 측정한다. 물론 하나의 축으로 흔드는 건 불가능하기에 움직임 이벤트는 x,y,z축의 측정 결과가 모두 double값으로 반환된다. 11.1.2 자이로스코프가속도계는 각 축으로의 직선 움직임만 측정하기에, 자이로스코프로 회전을 측정해 보완한다. 11.1.3 Sensor_Plus 패키지핸드폰의 가속도계와 자이로스코프 센서를 사용할 수 있는 패키지. 센서의 데이터는 x..

10 만난 지 며칠 U&I

#상태관리 #CupertinoDatePicker #Dialog #DateTime 10.1 사전 지식10.1.1 setState() 함수State를 상속하는 모든 클래스에서 사용 가능StatefulWidget의 렌더링이 끝난 클린 상태의 State ➡️ setSate()로 원하는 속성 변경 ➡️ 위젯이 더티 상태로 설정 ➡️ build() 재실행 ➡️ State가 클린 상태로 돌아옴 setState()는 매개변수로 콜백 함수를 입력받고, 이 콜백 함수에 변경하고 싶은 속성들을 입력해주면 해당 코드가 반영된 뒤 build()가 실행된다. 콜백 함수는 비동기로 작성될 수 없다. 10.1.2 showCupertinoDialog() 함수다이얼로그를 실행하는 함수. 실행 시 모든 애니메이션과 작동이 iOS 스타일로..

09 전자액자

#위젯생명주기 #PageView #Timer #SystemChrome #StatefulWidget 이미지 5개를 롤링해 보여주는 액자 앱 만들기- 좌우 스와이프 기능- 특정 주기마다 반복적인 함수 실행  9.1 사전 지식9.1.1 위젯 생명주기- StatelessWidget빌드되면 생성자가 실행되고, build() 함수가 실행되어 build()가 반환한 위젯이 화면에 렌더링됨모든 위젯은 Widget 클래스를 상속하고, Widget 클래스는 불변 특성을 갖는다. (한 번 생성하면 속성 변경 x) -> 한번 생성된 인스턴스의 build() 함수는 재실행되지 않음 - StatefulWidget외부에서 위젯 생성자의 매개변수를 변경해주면 위젯이 새롭게 생성되고 build()가 실행되기까지는 Stateless와 ..

08 블로그 웹 앱

#콜백함수 #웹뷰 #네이티브설정 8.1 사전 지식8.1.1 콜백 함수일정 작업이 완료되면 실행되는 함수. 정의 시 바로 실행되는 것이 아닌, 특정 조건이 성립될 때 실행된다.ex) onPageFinished()에 작성한 함수는 웹뷰에서 페이지 로딩이 완료되면 실행된다. 8.1.2 웹뷰 위젯웹뷰 : 프레임워크에 내장된 브라우저를 앱의 네이티브 컴포넌트에 임베딩하는 기능. 앱에서 웹 브라우저 기능을 구현해주는 기술네이티브 컴포넌트에 비해 속도가 느리고 애니메이션이 부자연스럽지만, 기존 웹사이트를 손쉽게 활용할 수 있음웹뷰 위젯은 controller 파라미터에 WebViewController 객체를 입력해야 한다. 웹뷰 컨트롤러는 웹뷰 위젯을 제어하는 데 필요한 기능들을 제공한다.*웹뷰 위젯의 속성- setJ..

07 앱을 만들려면 알아야 하는 그 밖의 지식

7.1 앱 만들기 프로세스기획(프로젝트 개요) - 사전 지식(필요한 지식 학습) - 사전 준비(프로젝트 생성 및 설정) - 레이아웃 구상 - 구현 - 테스트 * UI 프로토타입 도구- 피그마 : UI 디자인 특화. UI를 간단하게 구현하고 CSS나 플러터 코드로 받아볼 수 있는 기능 제공- 어도비 XD- 플러터 플로우 : 플러터에 특화된 UI 구현 툴. 웹에서 UI를 구현하면 플러터 앱을 반환해주는 노코드 솔루션 * 폴더 구조 참고- screen : 스크린 전체에 해당되는 위젯들을 모아두는 폴더- component : 스크린을 구성하는 데 공통으로 사용될 만한 요소의 위젯들을 모아두는 폴더- model : 모델- const : 상수 7.2 플러그인 추가 방법dependencies에 사용할 플러그인 추가 ..

06 기본 위젯 알아보기

6.1 위젯 소개위젯은 현재 주어진 상태(데이터)를 기반으로 어떤 UI를 구현할지를 정의한다.위젯의 상태가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려준다. 이때 플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교해서 UI 변화에 최소한의 변경사항을 산출해 그려낸다. (즉 퍼포먼스가 높음) 자식을 하나만 갖는 대표적인 위젯 (대체로 child 입력받음)- Container : 자식을 담는 컨테이너- GestureDetector : 제스처 기능을 자식 위젯에서 인식- SizedBox : 높이와 너비 지정 다수의 자식을 입력할 수 있는 대표적인 위젯 (children 입력받음, 리스트로 여러 위젯 입력 가능)- Column / Row : children들을 세로 / 가로로 배치..

05 플러터 입문하기

5.1 플러터 소개구글이 구현한 크로스 플랫폼 프레임워크. 한 소스 코드로 여러 플랫폼에 대응할 수 있어 개발 비용 절감, 관리 부담 감소플러터는 스키아 엔진이라는 2D 렌더링 엔진과 직접 통신하기 때문에 스키아 엔진이 실행되는 플랫폼에서는 똑같은 API를 사용해 프로그래밍할 수 있다. 즉 어떤 플랫폼이든 일관된 UI를 제공할 수 있다. 플러터 구조 : 프레임워크(Dart) / 엔진(C/C++) / 임베더(Platform-specific)임베더: 로우 레벨 계층. 플러터가 지원하는 플랫폼의 네이티브 플랫폼과 직접 통신, 운영체제의 자체적 기능을 모듈화엔진: 중간 계층. 대부분 C++로 작성됨. 플러터 코어 API와 스키아 그래픽 엔진, 파일시스템, 네트워크 기능 등을 정의프레임워크: 플러터 프레임워크를 ..

04 다트 3.0 신규 문법

4.1 레코드다트 3.0 이상부터 사용할 수 있는 새로운 타입. 포지셔널 파라미터나 네임드 파라미터 중 한가지 방식을 적용하여 사용할 수 있고, 모두 괄호 안에 쉼표로 구분하여 작성한다. 4.1.1 포지셔널 파라미터를 이용한 레코드포지셔널 파라미터로 표시한 타입 순서를 반드시 지켜야 한다.void main() { //첫 번째 값은 String 타입, 두 번째 값은 int 타입인 레코드 (String, int) cado = ('카도', 6); print(cado); //(카도, 6)} 두 개 이상의 값을 조합해서 레코드를 만들 수도 있다. 정의할 수 있는 값의 개수 제한 Xvoid main() { (String, int, bool) cado = ('카도', 6, true); print(cado);..

03 다트 비동기 프로그래밍

3.1 동기 vs. 비동기 프로그래밍동기 : 요청 후 응답을 받을 때까지 대기. 응답을 받은 후 다음 코드를 실행비동기 : 응답을 대기하지 않으며 응답 순서 또한 요청 순서와 다를 수 있음 3.2 FutureFuture 클래스 : 미래에 받아올 값을 뜻함. 제네릭으로 어떤 미래의 값을 받아올지를 정할 수 있다ex) Future name; //미래에 받을 String값ex) Future number; //미래에 받을 int값비동기 프로그래밍에서는 요청 처리가 오래 걸리는 작업을 기다린 후 값을 받아와야 하기 때문에 미래값을 표현하는 Future 클래스를 사용.void main() { addNumbers(1,1);}void addNumbers(int num1, int num2){ print('계산 시작'..

02 다트 객체지향 프로그래밍

2.1 객체지향 프로그래밍의 필요성- 변수와 메서드를 특정 클래스에 종속되게 코딩할 수 있어 코드 관리가 용이함- 인스턴스: 클래스를 이용해 선언한 객체- 인스턴스화: 클래스에서 인스턴스(객체)를 생성하는 과정 2.2 객체지향 프로그래밍의 시작, 클래스class Idol { String name = '아보카도'; //클래스에 종속되는 변수 void sayName() { //클래스에 종속되는 함수(메서드) print('I am ${this.name}.'); //this: 클래스 내부 속성 지칭 print('I am $name.'); //스코프 안에 같은 속성 이름이 하나뿐이라면 this 생략 가능 }}void main() { Idol blackPink = Idol(); //Idol의 인스..