DAMPER's blog

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다. material design은 구글에서 2014년부터 사용한 플랫 디자인(flat design) 지침이다. material design을 적용하면 평면, 단색 위주의 간결한 디자인을 바탕으로 앱의 용량을 줄이고 동시에 속도를 개선할 수 있다. flutter로 앱을 제작할 때 material design을 적용하려면 Scaffold 클래스를 사용한다. scaffold 클래스는 각종 위젯을 material design 레이아웃으로 설계하는 것을 돕는 역할을 한다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends St..

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다. 위젯의 생명주기를 알면 언제 데이터를 주고받을지, 화면이 사라질 때 어떤 로직을 처리해야 할지를 정리해서 넣을 수 있다. stateless widget는 한 번 만들어지면 갱신할 수 없으므로 생명주기가 없다. 즉, 다른 화면으로 넘어가면 모든 로직이 종료된다. stateful widget은 10단계로 구분하는 생명주기가 있다. 1. 상태를 생성하는 createState() 함수 StatefullWidget 클래스를 상속받는 클래스는 반드시 createState() 함수를 호출해야 한다.이 함수는 다른 생명주기 함수들이 포함된 State 클래스를 반환한다. 즉, 위젯의 상태를 생성하는 함수이다. class MyHomePage e..

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다. MyApp 클래스를 수정해보면서 익혀보는 기본 구조 1 위 코드처럼 home을 정의한 부분에 Text() 함수를 넣어 'hello\nFlutter'라는 문자열을 화면에 출력해보자. Text() 함수는 화면에 텍스트를 출력하는 플러터의 기본 위젯이다. 프로그램을 실행하면 에뮬레이터에서 다음과 같은 화면이 출력된다. 좀 더 자세히 설명하면 검정색 화면에 'hello\nFlutter'라는 빨간색 글자와 노란색 밑줄이 그어진 채로 출력되었다. 플러터는 기본 배경색이 검정색이고 위젯은 왼쪽에서 오른쪽으로, 위에서 아래로 그려진다. 다음은 텍스트를 가운데 정렬해보고자 한다. Text() 함수에 두 번째 인자로 textAlign 속성을 추..

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다. 플러터 프로젝트의 구성을 살펴보자! 1. 플러터 프로젝트 폴더의 구성 왼쪽에 프로젝트 탐색 창을 보면 다음과 같습니다. lib 폴더에는 플러터 앱의 소스가 작성된 main.dart 파일이 있다. 그리고 android와 ios 폴더에는 각 운영체제에서 프로젝트를 시작할 때 필요한 파일이 있다. test 폴더에는 다트 코드로 함수를 테스트할 때 사용하는 파일이 있다. 2. 플러터 메인 소스 파일 구성 프로젝트 구성에서 lib 폴더에 main.dart 파일은 플러터 프로젝트를 만들면 자동으로 생성된다. 다트 앱을 실행하면 이 파일 안에 있는 main() 함수부터 시작한다. 위 코드에서는 material.dart 패키지를 불러왔다. ..

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다. 데이터를 순서대로 주고받을 것으로 생각해서 화면을 구성했는데 네트워크나 와이파이 연결이 끊기거나 특정 API 호출이 늦어져 순서가 달라지면 원하는 흐름대로 작동시킬 수 없다. 데이터를 순서대로 주고받아야 할 때 순서를 보장받기위해 스트림을 사용한다. 스트림은 처음에 넣은 데이터가 꺼낼 때도 가장 먼저 나오는 데이터 구조로 생각할 수 있다. import 'dart:async'; Future sumStream(Stream stream) async { var sum = 0; await for(var value in stream) { print('sum Stream : $value'); sum += value; } return sum..

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다. JSON을 사용하려면 소스에 convert라는 라이브러리를 포함해야 한다. import 'dart:convert'; void main() { var jsonString = ''' [ {"score": 40}, {"score": 80} ] '''; var scores = jsonDecode(jsonString); print(scores is List); var firstScore = scores[0]; print(firstScore is Map); print(firstScore['score'] == 40); } 결과 true true true jsonString 변수에 저장된 데이터가 JSON형태의 문자열이다. 이 데이터를 co..