Android와 Flutter의 개발적인 큰 차이점 5가지를 소개합니다. 더 궁금한게 있으신분은 bs.nam@lawfully.com 으로 메일 주세요 :)

1. Android / Flutter 앱 개발의
큰 5가지
남반석2019.12.8
차이점

2. 가장 큰 5가지
1. 같은 코드로 iOS 릴리즈 가능하다.
2. Hot Reload 지원 => 개발 시간을 획기적으로 단축.
3. Dart 언어를 사용 (Javascript, Java를 섞어버린)
4. 안드로이드 스튜디오 외에 VS Code로 개발 가능하다. (가볍고 쾌적하
다.)
5. Android는 OS가 그리는 반면, Flutter는 Skia엔진이 그린다.
차이점

3. 여러분의 현재 반응

4. 오늘 주제는 가장 큰 차이점

5. 오늘 주제는 개발의 큰 차이점

6. 1. 첫번째차이점

7. 크래시가 나지 않는다.
•단 Native쪽과 연동 과정에서는 크래시가 발생하기도 한다.
•기본 UI Framework에서는 크래시로 앱이 죽지 않는다
1.
크래시가 나지 않는다면 어떤 일이 벌어질까요?

8. 1. 크래시가 나지 않는다.
•기본 UI Framework에서는 크래시로 앱이 죽지 않는다
•Widget 안에
빨갛고 노란
stacktrace 로그가 보인다.

9. 1. 크래시가 나지 않는다.
•기본 UI Framework에서는 크래시로 앱이 죽지 않는다
•Rotating Error Pizza
From - Facebook Group
“Let's Flutter with Dart”

10. 1. 크래시가 나지 않는다.
•발생한 Exception은 IDE 로그로 확인 가능하다.

11. 1. 크래시가 나지 않는다.
•다양한 플러그인을 사용할때
Android 채널, iOS 채널을 통해 코드가 실행되면
Native 코드로 (Java, Kotlin, Swift) 실행이 되고, 크래시 발생 가능.
간혹 Low Level에서 크래시가 발생하기도 한다.

12. 1. 크래시가 나지 않는다.
•Fatal signal 11 (C, .so파일 관련 에러)가 발생하면
분석, 해결이 굉장히 어렵다.
•푸시 플러그인 버그:
https://github.com/FirebaseExtended/flutterfire/issues/125

13. 1. 크래시가 나지 않는다.
실제 Product에서도
크래시가 안나나요?

14. 1. 크래시가 나지 않는다.
- Android 1건 (화웨이 기기)
DAU 250
MAU 1.5K
최근 30일 크래시
- IOS 0건
DAU 2.1K
MAU 12K
(11월에 Flutter 전환,
0.04%는 원인불명;;)

15. 1. 크래시가 나지 않는다.
그러면 코드 오류는
잡을 수 없나요?

16. 1. 크래시가 나지 않는다.
Firebase에서 Crashes 필터 -> Non-Fatal로 바꾸면,
위젯이나, 로직 등에서 발생한 에러의 File & Line을 볼 수 있다.

17. 1. 크래시가 나지 않는다.
•장점: 사용자가 앱 사용하다가, 특정 Screen(Page)에 문제가 있어도
백버튼을 누르고, 계속 이용이 가능하다.
•“크래시가 나지 않을때”의 장단점.
•단점:
- 금융앱 처럼 보안 절차를 철저히 해야하는 앱에서 Assert를 미리
설계하지 않으면, 크래시가 나지 않은채로 의도하지 않은 동작 가능하다.
- 앱화면에 빨간 에러코드는, 유저들에게 불안이나 잘못되었다는 느낌을
줄 수 있고, 앱을 지울 우려가 있다. => 빠르게 파악 => Hotfix가 필요하다

18. 2. 획기적인 화면 사이의 정보 통신

19. 2. 획기적인 화면 사이의 정보 통신
- Android에서는…
Activity - OnActivityForResult
- ListenerDialog
- ViewModel, ListenerFragment
- EventBusEtc

20. 2. 획기적인 화면 사이의 정보 통신
Activity - OnActivityForResult
- ListenerDialog
- ViewModel, ListenerFragment
단점: 화면을 시작하고, 받는 위치가 다르다. (헤맬 수 있다.)
단점: ViewModel은 본래 View를 위한 모델 관리 용도인데,
이벤트 전달을 위해 사용/비대해질 우려.
Listener와 참조가 끊겼을때 전달되지 않음 (onRestoreInstanceState)
단점: Listener 호출 후 dismiss를 매번 수동으로 해줘야한다. (따로 호출)

21. 2. 획기적인 화면 사이의 정보 통신
그렇다면 Flutter에서는 어떻게 하나요?

22. 2. 획기적인 화면 사이의 정보 통신
함수

23. 2. 획기적인 화면 사이의 정보 통신
Screen A Screen B
Open data param
Returning data

24. 2. 획기적인 화면 사이의 정보 통신
Screen A Screen B Screen A
Open data
param
Returning
data

25. 2. 획기적인 화면 사이의 정보 통신
Screen A Screen B Screen A

26. 2. 획기적인 화면 사이의 정보 통신
await에서 화면이 열리고, 해당 Screen이 닫힐때까지 코드가 Block된다.
화면이 끝나고 정보를 받게되면 아래에 if (result != null) 코드가 수행된다.

27. 2. 획기적인 화면 사이의 정보 통신
Screen B에서 데이터를 돌려줄때
Push 함수의 Return type
🍀 Android의 Intent, Bundle에 싣기위해 Serializable, Parcelable 구현
Flutter에서는 필요없음. 그냥 객체 그대로 싣고 보낸다. 메모리 주소도 동일

28. 2. 획기적인 화면 사이의 정보 통신
•Provider 사용
•Listener를 사용 가능함 (비추천)
그 외의 방법

29. 3. Thread 스트레스에서 해방

30. 3. Thread 스트레스에서 해방
Android에서는…
Bitmap처리, Network처리 등을 위해
•AsyncTask (Deprecated)
•Thread, Excutors
•Rx (Schedulers.xx() series)
•Coroutine - suspend function

31. 3. Thread 스트레스에서 해방
suspend function은
coroutine scope 안에서 또는
suspend function 안에서 호출 가능
•Coroutine

32. 3. Thread 스트레스에서 해방
•Flutter Future
sync, async 함수는
서로 원하는 형태로
제약없이 호출 가능.

33. 3. Thread 스트레스에서 해방
•Event Loop이 흐름을 콘트롤, Javascript의 방식

34. 3. Thread 스트레스에서 해방
•Async, Await 방식은 단일스레드 방식으로 동작한다는 의미.
(그러나 통신이나 이미지뷰 처리가 UI를 느리게 하지 않음)
•Parallel 하게 여러 작업을 동시에 수행하려면
Isolate를 사용하면 된다.
https://medium.com/flutter-community/flutter-dart-async-concurrency-
demystify-1cc739aaae57
http://jpryan.me/dartbyexample/examples/isolates/

35. 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

36. Android 에서는…
1. Java, Kotlin으로 커스텀뷰 코드 작성
2. attrs.xml 안에 속성 추가
3. Java, Kotlin에서 코드로 attrs 파라미터 추출
4. 코드로 뷰 동적 생성할때를 위해 생성자, 또는 setter생성
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

37. Write attrs.xml
Extract from attrs
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

38. 왜 이렇게 해야하죠?
=> 레이아웃을 xml로 그리기 때문
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

39. 왜 xml로 해야하죠?
=> 화면 레이아웃 작성할때마다
빌드를 하면 개발이 늦다. (미리보기가 필요)
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

40. 본래 View는 Java 객체
XML로 인해서 불필요한 과정이 생겼다.
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
=> Android Compose 개발중
https://developer.android.com/jetpack/compose/tutorial

41. 그럼 Flutter에서는?
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

42. 4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
필요한
필드 & 생성자
정의

43. 각 필드에 원하는 변수들을 배치. (Primitive, Enum, Object, Function, Widget)
MVVM 처럼 data가 binding되고,
setState 함수를 통해 값이 바뀌면 알아서 갱신(Build)이 된다.
개별 변수 Observing은 아니지만, 오히려 심플하다.
각 Observable을 관측하는 Observer만 갱신하는 것은 성능상 이점이 있지만,
개발자, 코더 입장에서는 개별적인 변화와/ Observing 여부에 신경쓰고 setValue가 제대로
호출되었는지 확인하는 불편함이 있는데,
Flutter에서는 그런 불편함이 사라진다.
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

44. Hot Reload
Value
Logic
Layout
Animation
모든 변경을
1초만에
확인 가능하다.
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)

45. 5. 쉽고 직관적인 Animation 처리

46. Android 에서는…
5. 쉽고 직관적인 Animation 처리
=> 단일 뷰 Animation은 쉽지만, 주변 레이아웃이 같이 변한다면
좀 골치가 아파진다.
1. Animation을 수행할 View를 찾는다.
2. View의 transitionX, alpha, scale의 타겟값을 세팅
3. Duration 세팅
4. Interpolation 세팅
5. start() 함수 수행

47. 그래서 Android 에서는…
1. Constraint Set 변경 - AutoTransition
2. Android Studio 4.0 Motion Editor 개발중
=> 똑같은 Xml을 여러벌을 준비하거나,
코드로 Constraint를 동적으로 변환한다.
5. 쉽고 직관적인 Animation 처리

48. Flutter에서는?
5. 쉽고 직관적인 Animation 처리

49. Animation WidgetsImplicit
5. 쉽고 직관적인 Animation 처리

50. Implicit ?
Implicit Intent: 목적 Targeting만 하면 알아서 동작
5. 쉽고 직관적인 Animation 처리

51. 5. 쉽고 직관적인 Animation 처리
visibleFraction이 60%일때 chartSize = 150이 set
자동적으로 차트막대가 커지는 애니메이션이 시작된다.

52. Implicit animated widgets - 다양한 기본 위젯들 탑재
https://www.youtube.com/watch?v=IVTjpW3W33s
5. 쉽고 직관적인 Animation 처리

53. 물론 Explicit animation도 지원한다. (Animation Controller)
Let’s subscribe
Youtube Flutter Channel
그러나 웬만하면 Implicit Animations로 구현 가능하다.
5. 쉽고 직관적인 Animation 처리

54. UI 개발 Framework 끝판왕
Android / Flutter 앱 개발의 큰 차이점 5가지를 통한
Flutter 총평:

55. 감사합니다.
더 궁금한것이 있다면
=> bs.nam@lawfully.com

56. 자료 및 이미지 출처:
•https://github.com/flutter/flutter/issues/17112
•https://www.jagranjosh.com/articles/relations-and-functions-iit-
jee-important-questions-and-preparation-tips-1455106528-1
•https://medium.com/flutter-community/flutter-threading-
5c3a7b0c065f
•https://www.youtube.com/watch?v=IVTjpW3W33s
•https://medium.com/flutter-community/flutter-dart-async-concurrency-
demystify-1cc739aaae57
•http://jpryan.me/dartbyexample/examples/isolates/