#01 플러터 시작하기
플러터의 등장 배경
1 단계
네이티브 앱 (native apps) : 각 모바일 운영체제에 맞는 언어로 개발하는 앱
애플 - 스위프트(swift)
구글 - 자바, 코틀린
2 단계
iOS 용과 안드로이드 용으로 두 번 개발해야 하는 불편으로
웹앱, 하이브리드 앱 등장
웹앱(web apps)- 웹 기술을 이용해서 만든 앱
하이브리드 앱(hybrid apps) - 웹앱을 만든 후 별도의 프레임워크를 이용해 운영체제별로 동작하는 앱을 만드는 기술
> 네이티브 앱과 비교해 상대적으로 속도가 느리고 애니메이션 사용에 제약 등 스마트폰의 성능을 충분히 활용할 수 없다.
3 단계
리액트 네이티브와 플러터
리액트 네이티브(React Native) :
- 크로스 플랫폼 앱 개발 프레임워크
- 자바스크립트
플러터 (Flutter) :
- 크로스 플랫폼 앱 개발 프레임워크
- 구글에서 만든 언어 다트 사용
플러터의 장점
1. 높은 개발 효율
- 핫 리로드
2. 유연한 사용자 인터페이스
- 다양한 위젯
- 강력한 애니메이션 기능 제공
3. 빠른 속도
- 스키아(skia) 엔진 이용
실습환경
1. 안드로이드 (android studio) 설치
2. 플러터 sdk 설치
- https://flutter.dev/docs/get-started/install/macos
3. 안드로이드 스큐디오에서 플러터 플러그인 설치
#02 다트를 알면 플러터가 보인다.
다트 언어의 8가지 특징
1. 다트는 main() 함수로 시작한다.
2. 다트는 어디에서나 변수를 선언하고 사용할 수 있다.
3. 다트에서는 모든 변수가 객체이다. 그리고 모든 객체는 Object 클래스를 상속받는다.
4. 다트는 자료형이 엄격한 언어이다.
5. 다트는 제네릭 타입을 이용해 개발할 수 있다.
6. 다트는 public, protected 같은 키워드가 없다. 외부로 노출하고 싶지 않다면 변수나 함수 이름앞에 언더스코어(_)를 이용해 표시할 수 있다.
7. 변수나 함수의 시작은 언더스커오 또는 문자열로 시작하고 그 이후에 숫자를 입력할 수 있다.
8. 다트는 삼항 연사자를 사용할 수 있다.
다트 코드 이해하기
printInteger(int aNumber) {
print('The number is $aNumber.'); // 콘솔 출력
}
//main함수 시작
main() {
var number=42;
printInteger(number); //함수 호출
}
비동기 처리 방식 알아보기
async 와 await 키워드를 이용해 비동기 처리 구현
- 1.함수 이름 뒤, 본문이 시작하는 중괄호 { 앞에 async 키워드를 붙여 비동기로 만든다.
- 2.비동기 함수 안에서 언제 끝날지 모르는 작업 앞에 await 키워드를 붙인다.
- 3.2번 작업을 마친 결과를 받기 위해 비동기 함수 이름 앞에 Future(값이 여러 개면 Stream) 클래스를 지정한다.
void main() {
checkVersion();
print('end process');
}
Future checkVersion() async {
var version = await lookUpversion();
print (version);
}
int lookUpversion() {
return 12;
}
비동기 함수가 반환하는 값 활용하기
then() / error() 함수를 이용한다.
void main() async {
await getVersionName().then((value) => {
print(value)
});
print('end process');
}
Future<String> getVersionName() async {
var versionName = await lookUpVersionName();
return versionName;
}
String lookUpVersionName() {
return 'Android Q';
}
다크와 스레드
void main() {
printOne();
printTwo();
printThree();
}
void printOne() {
print('One');
}
void printThree() {
print('Three');
}
void printTwo() async {
Future.delayed(Duration(seconds:1), () {
print('Future!!');
});
print('Two');
}
JSON 데이터 주고 받기
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);
}
스트림 통신하기
import 'dart:async';
Future<int> sumStream(Stream<int> stream) async {
var sum = 0;
await for (var value in stream) {
print('sumStream : $value');
sum += value;
}
return sum;
}
Stream<int> countStream(int to) async* {
for (int i =1; i <= to; i++ ) {
print('countStream : $i');
yield i;
}
}
main() async {
var stream = countStream(10);
var sum = await sumStream(stream);
print(sum);
}