플러터의 기초내용과 자주 사용하는 라이브러리 소개, 활용 사례들을 정리한 발표 세션입니다.

1. 처음 시작하는 Flutter
GDG Songdo / Flutter Songdo
@양수장
Getting started with Flutter

2. Bio
GDG Songdo Organizer (2020~ )
Flutter Songdo Organizer (2022 ~ )
Tech Lead @bluefrog (2020 ~ )
- Android
- Flutter
- Back-end + DevOps
I’m an App Developer.
yangsterchief@duck.com
https://github.com/yangster-chief
https://www.linkedin.com/in/sujang-yang

3. GDG 인천 & 송도의 새로운 행사
소식은 카톡 오픈채팅방에서 :D
GDG 인천, 송도로 검색! 혹은 QR로 :)
카카오톡 오픈 채팅
https://open.kakao.com/o/gTplSH6

4. OO으로 처음 시작하는 Flutter

7. Flutter 왜 해야해요?
Flutter 어떻게 시작 해야해요?
라는 질문 대신에

8. 개인 앱 프로젝트로 처음 시작하는
Flutter

9. Android, iOS, Web
개인 앱 프로젝트로 처음 시작하는 Flutter
선언형 UI 구조에 익숙하면 바로 시작할 수 있음.
Dart의 문법 구조는 다른언어와 매우 유사함 ( Javascript, Java)
Android - Jetpack Compose UI
iOS - Swift UI
Web - React.js

11. // Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new
ViewC(...)
b.add(c3)

12. // Declarative style
return ViewB(
color: red,
child: const ViewC(),
);

13. var stars = Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, color: Colors.green[500]),
const Icon(Icons.star, color: Colors.black),
const Icon(Icons.star, color: Colors.black),
],
);
final ratings = Container(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
stars,
const Text(
'170 Reviews',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20,
),
),
],
),
);

14. One Source Multi Platform
개인 앱 프로젝트로 처음 시작하는 Flutter
하나의 소스코드로 여러개의 플랫폼에서 작동하는 어플리케이션 빌드 가능.
Android, iOS, Web, Linux, Windows, macOS

15. - Framework
- UI 구성요소 및 위젯
- Engine
- 렌더링 엔진
- Embedder
- 엔진을 구동하기 위한 네이티브
코드
Architectural Layers

16. Flutter Project Overview

17. name: flutter_example
...
environment:
sdk: ">=2.17.3 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: "^1.0.2"
device_preview: "^1.1.0"
...
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: "^2.0.1"
...
flutter:
uses-material-design: true
assets:
- assets/icons/
- assets/placeholder/
- assets/images/
...
/pubspec.yaml

18. import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugins.GeneratedPluginRegistrant
class MainActivity: FlutterActivity() {
private val openIntent: String = "openIntentChannel"
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
GeneratedPluginRegistrant.registerWith(flutterEngine)
MethodChannel(flutterEngine.dartExecutor, openIntent).setMethodCallHandler(
IndentHandler(activity)
)
}
}
/Android/app/src/main/kotlin/MainActivity.kt

19. import UIKit
import Flutter
import FirebaseCore
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
private func setupFirebase() {
...
}
}
/ios/Runner/AppDelegate.swift

20. - One Source Multi Platform
- 선언형 UI
- Dart는 Javascript, Java와 매우 유사함.
- Native의 기능을 극한까지 사용하는 경우 외의 대부분의 앱을 만들 수 있음.
- Flutter 공식문서, Codelabs, Flutter 공식 Youtube 로 시작할 수 있음.
정리

21. 나의 개발 커리어로 처음 시작하는
Flutter

22. Flutter만 배운 개발자가 취업하는 방법
나의 개발 커리어로 처음 시작하는 Flutter
모바일 APP 개발자로 취업
- 부전공이 하나쯤은 꼭 있어야함. (Android / iOS)
- Web 경험도 플러스 요소가 될 수 있음.
Web 개발자로 취업
- … React.js를 배우는게 빠릅니다.

23. Flutter만 알아도 되지 않나요?

24. ...
<dict>
...
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
...
<key>CFBundleVersion</key>
<string>$(FLUTTER_BUILD_NUMBER)</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>sms</string>
<string>tel</string>
<string>mailto</string>
</array>
...
<key>NSCameraUsageDescription</key>
<string>카메라에 접근하도록 허용합니다.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>위치 접근 권한이 필요합니다.</string>
...
</dict>
</plist>
/ios/Runner/Info.plist

25. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example">
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<queries>
<!-- If your app checks for SMS support -->
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="sms" />
</intent>
...
</queries>
<application
android:label="@string/app_name"
android:name="${applicationName}"
android:icon="@mipmap/launcher_icon">
<activity
android:name=".MainActivity"
android:exported="true"
...
android:windowSoftInputMode="adjustResize">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
...
</activity>
...
</application>
</manifest>
/Android/app/src/main/AndroidManifest.xml

26. // Configuration settings file format documentation can be found at:
// https://help.apple.com/xcode/#/dev745c5c974
BUNDLE_IDENTIFIER=com.example
FLUTTER_TARGET=lib/src/config/env/env_develop.dart
DISPLAY_NAME=flutter_example
GOOGLE_SERVICE_INFO_PLIST=Develop/GoogleService-Dev-Info.plist
FIREBASE_APP_ID_FILE=firebase_app_id_file_dev.json
/ios/Flutter/Develop.xcconfig

27. ...
android {
...
defaultConfig {
applicationId "com.example"
minSdkVersion 23
targetSdkVersion flutter.targetSdkVersion
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
dimension "build-type"
}
signingConfigs {
release {
storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
storePassword keystoreProperties['storePassword']
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
}
}
...
flavorDimensions "build-type"
productFlavors {
...
}
}
flutter {
source '../..'
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}
/Android/app/build.gradle

28. Native Development
Platform Channel
- Flutter에서 실행할 수 없는 코드를
네이티브에서 실행
- Method Channel
- Event Channel
Writing custom platform-specific code | Flutter

29. import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class _MyHomePageState extends State<MyHomePage> {
static const platform = MethodChannel('samples.flutter.dev/battery');
// Get battery level.
String _batteryLevel = 'Unknown battery level.';
Future<void> _getBatteryLevel() async {
String batteryLevel;
try {
final int result = await platform.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level at $result % .';
} on PlatformException catch (e) {
batteryLevel = "Failed to get battery level: '${e.message}'.";
}
...

30. import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
class MainActivity: FlutterActivity() {
private val CHANNEL = "samples.flutter.dev/battery"
override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
// This method is invoked on the main thread.
call, result ->
if (call.method == "getBatteryLevel") {
val batteryLevel = getBatteryLevel()
if (batteryLevel != -1) {
result.success(batteryLevel)
} else {
result.error("UNAVAILABLE", "Battery level not available.", null)
}
} else {
result.notImplemented()
}
}
}
}
/Android/app/src/main/kotlin/MainActivity.kt

31. @UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
let batteryChannel = FlutterMethodChannel(name: "samples.flutter.dev/battery",
binaryMessenger: controller.binaryMessenger)
batteryChannel.setMethodCallHandler({
[weak self] (call: FlutterMethodCall, result: FlutterResult) -> Void in
// This method is invoked on the UI thread.
guard call.method == "getBatteryLevel" else {
result(FlutterMethodNotImplemented)
return
}
self?.receiveBatteryLevel(result: result)
})
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
/ios/Runner/AppDelegate.swift

32. Native Development
Packages and Plugins (The Boring Flutter Development Show, Ep. 6)

33. 상태관리 라이브러리

34. var stars = Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, color: Colors.green[500]),
const Icon(Icons.star, color: Colors.black),
const Icon(Icons.star, color: Colors.black),
],
);
final ratings = Container(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
stars,
const Text(
'170 Reviews',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20,
),
),
],
),
);

35. BuildContext
BuildContext?! | Decoding Flutter

36. - 부전공이 필요함 (Android, iOS, Web)
- Platform Channel, BuildSettings
- Flutter Web은 아직 시기상조
- 상태관리 라이브러리를 배우자
- GetX 외에도 bloc나 provider를 배우자
- BuildContext 개념 필요
정리

37. 팀의 신규 프로젝트로 처음 시작하는
Flutter

38. Android 2년차 개발자가 Flutter 프로젝트에 투입
팀의 신규 프로젝트로 처음 시작하는
Flutter
대기업 자회사의 Android 개발자로 채용됨
회사의 그룹웨어 및 신규 프로젝트를 개발하는 TF팀
팀 구성
- Android 9년차 팀장
- iOS 2년차 사원
- Android 5년차 사수

39. 이해관계에 맞는 프로젝트 규모 산정
팀의 신규 프로젝트로 처음 시작하는
Flutter
프로젝트 규모에 따라 사용할 수 있는 상태관리 라이브러리가 달라짐. 일반적으로
- bloc : 대규모
- provider : 중, 소규모
- getX : 소규모
무엇보다도 팀원간의 이해와 소통 (컨벤션) 이 중요합니다.

40. bloc, provider, GetX 비교 분석
[Flutter Festival GDG Songdo] GetX, provider, bloc 패턴 비교 분석 - 유병욱

41. 협업 방식은 팀바팀, 사바사가 국룰입니다. 하지만,
팀의 신규 프로젝트로 처음 시작하는
Flutter
더 나은 협업을 위해서 고려해볼 몇가지
- DI
- Flutter Theme
- Clean Architecture
- CI / CD

42. Dependency Injection

43. Flutter Theme
DevFest Songdo 2022 - Flutter Theme 디자이너와 호감작하기

44. Clean Architecture
[Flutter Festival GDG Songdo] Flutter에 Clean Architecture를 얹어보자 - 양수장

45. CI / CD
Github Actions를 활용한 Flutter 배포 자동화하기 - 양수장(GDG Songdo) I 모두콘 2022

46. Tips & Best Practices
[Flutter Festival GDG Songdo] Flutter 상용화 앱 프로젝트 적용기 - 손민재

47. - 프로젝트 규모 산정이 최우선
- 핵심 기능이 Flutter로 구현 가능한지 여부 확인
- 협업을 위한 기술
- Flutter Theme
- Clean Architecture
- DI
- CI / CD
정리

48. 처음 시작하는 Flutter
yangsterchief@duck.com
https://github.com/yangster-chief
https://www.linkedin.com/in/sujang-yang