[CodeStates] 구글의 크로스 개발 플랫폼 Flutter(플러터) - Flutter로 이미지 검색 앱 만들기

서비스 개발을 하며 느낀 점

서비스 개발 시 필요한 것

• 서버 / Web 사이트 / Andriod 앱 / iOS 앱

네이티브 앱 개발의 어려움

• 프레임워크의 복잡성으로 진입 장벽이 높음
• 해가 다르게 변하는 정책을 따라가기 어려움
• 어려 사용 방법이 난무하여 뭐가 제대로 된 건지 알기가 어려움

네이티브 앱을 개발할 경우 해야할 일 - 너무 많음...

크로스 플랫폼 개발 프레임워크

• Native : Maui(5종 지원), React Native, Flutter(Android, iOS, Web, Windows, MacOS, Linux 6종 지원), Kotlin Multiplatform Mobile(Andriod, iOS)

Flutter 장점

• Dart 언어만으로 개발 : 배워야 할 것 적음 (레이아웃, 로직 모두 Dart로 개발 가능)
• Andriod Studio에서 개발

Native 보다 생산성이 빠름

안드로이드 스튜디오

플러터

같은 기능 코드 라인 수 차이

Flutter & Dart

지원하는 IDE

• Andriod Studio
• IntelliJ
• Visual Studio Code

Dart 특징

Hello World

main(){
	print("Hello, World!");
}

동시성, 비동기 프로그래밍 지원

• async-await
• future
• stream

UI구현을 쉽게 하는 Dart의 기능들

• collection if
• collection for
• Spread 연산자(...)

확장 함수 지원

• Kotlin, Swift 등에 있는 Extension Function 지원
• 기존 클래스에 없는 기능을 추가하는 방법

Null Safety 지원

• Null에 안전한 타입 시스템

Flutter 특징

풍부한 애니메이션 지원

iOS와 Andriod 고유의 디자인을 지원

네이티브 코드 연동

• MethodChannel
  

  

Test 코드 작성

test('http 통신 테스트', () async {
	var url = 'https://api.airvisual.com/v2/nearest_city?'
    
    var response = await http.get(url);
    
    expect(response.statusCode, 200);
    
    var jsonResponse = convert.jsonDecode(response.body);
    var code = jsonResponse['status'];
    
    expect(code, 'success');
    
    AirResult result = AirResult.fromJson(jsonResponse);
    expect(result.data.current.pollution.aqius, 63);
});

의존성 주입용 위젯

• InheritedWidget

상태관리 라이브러리

• Provider
• RiverPod
• GetX
• Bloc
• ...

Flutter 맛보기

기본 개념

• 모든 것은 Widget 이다
• 화면 갱신이 필요없다: StatelessWidget
• 화면 갱신이 필요하다: StatefulWidget

Child 속성을 가지는 위젯

Hot Reload로 빠른 개발

• 수정 후 저장하는 순간 바로 결과 반영

잘못된 UI 작성 시 로그 바로 확인

Flutter 진입 장벽

• 디자인도 코드로 작성
• Dart 언어만으로 개발
• 하다보면 네이티브 지식이 어느정도 필요함

플러터 공식 튜토리얼

그리고 실습...

실습 부분은 나중에 녹화본으로 차근차근 따라하며...
신기한 것들 있으면 추가 포스팅을 해보도록 하겠습니다...

🐵🐒