진정한 크로스 플랫폼 모바일 개발을 위한 Google의 Flutter 사용

Flutter는 Google의 오픈 소스 크로스 플랫폼 모바일 개발 프레임워크입니다. 단일 코드 기반에서 iOS 및 Android용으로 멋진 고성능 애플리케이션을 빌드할 수 있습니다. 또한 Google의 곧 출시될 Fuchsia 운영 체제의 개발 플랫폼이기도 합니다. 또한 맞춤형 Flutter 엔진 임베더를 통해 다른 플랫폼으로 가져올 수 있는 방식으로 설계되었습니다.

Flutter가 만들어진 이유와 사용해야 하는 이유

크로스 플랫폼 툴킷은 역사적으로 두 가지 접근 방식 중 하나를 취했습니다.

• 네이티브 앱에서 웹 보기를 래핑하고 웹 사이트인 것처럼 애플리케이션을 빌드합니다.
• 기본 플랫폼 컨트롤을 래핑하고 플랫폼 간 추상화를 제공합니다.

Flutter는 모바일 개발을 개선하기 위해 다른 접근 방식을 취하고 있습니다. 이것은 개발자가 작업하는 프레임워크 애플리케이션과 애플리케이션을 호스팅할 수 있는 이식 가능한 런타임을 제공하는 엔진을 제공합니다. 프레임워크는 Skia 그래픽 라이브러리를 기반으로 하여 기본 컨트롤의 래퍼가 아닌 실제로 렌더링되는 위젯을 제공합니다.

이 접근 방식은 웹 래퍼 옵션이 제공하는 것과 같이 완전히 사용자 정의된 방식으로 크로스 플랫폼 애플리케이션을 구축할 수 있는 유연성을 제공하지만 동시에 부드러운 성능을 제공합니다. 한편, Flutter와 함께 제공되는 풍부한 위젯 라이브러리는 풍부한 오픈 소스 위젯과 함께 작업하기에 매우 풍부한 기능의 플랫폼입니다. 간단히 말해서 Flutter는 모바일 개발자가 거의 또는 전혀 타협하지 않는 크로스 플랫폼 개발에 있어 가장 가까운 것입니다.

다트

Flutter 애플리케이션은 원래 Google에서 개발한 프로그래밍 언어인 Dart로 작성되었습니다. Dart는 AOT(ahead-of-time) 컴파일과 Just-in-time 컴파일을 모두 지원하는 객체 지향 언어로, 기본 애플리케이션 구축에 매우 적합하며 Flutter의 핫 리로딩으로 효율적인 개발 워크플로를 제공합니다. Flutter도 최근 Dart 버전 2.0으로 이동했습니다.

Dart 언어는 가비지 수집, 비동기 대기, 강력한 타이핑, 제네릭 및 풍부한 표준 라이브러리를 포함하여 다른 언어에서 볼 수 있는 많은 기능을 제공합니다.

Dart는 C#, JavaScript, F#, Swift 및 Java와 같은 다양한 언어를 사용하는 개발자에게 친숙해야 하는 기능의 교차점을 제공합니다. 또한 Dart는 Javascript로 컴파일할 수 있습니다. Flutter와 결합하면 웹과 모바일 플랫폼에서 코드를 공유할 수 있습니다.

이벤트의 역사적 타임라인

• 2015년 4월
  Dart Developer Summit에서 선보인 Flutter(원래 코드명 Sky)
• 2015년 11월
  Sky가 Flutter로 이름이 변경되었습니다.
• 2018년 2월
  Mobile World Congress 2018에서 발표된 Flutter 베타 1
• 2018년 4월
  Flutter 베타 2 발표
• 2018년 5월
  Google I/O에서 Flutter 베타 3가 발표되었습니다. Google은 Flutter를 프로덕션 앱에 사용할 준비가 되었다고 발표했습니다.

다른 개발 플랫폼과의 비교

애플/안드로이드 네이티브

기본 응용 프로그램은 새로운 기능을 채택할 때 마찰을 최소화합니다. 애플리케이션이 플랫폼 공급업체 자체(Apple 또는 Google)의 제어를 사용하여 구축되고 종종 이러한 공급업체가 설정한 디자인 지침을 따르기 때문에 주어진 플랫폼과 더 잘 조화된 사용자 경험을 갖는 경향이 있습니다. 대부분의 경우 기본 애플리케이션은 기본 크로스 플랫폼 기술에 따라 차이가 무시할 수 있지만 대부분의 경우 기본 애플리케이션이 크로스 플랫폼 오퍼링으로 구축된 것보다 더 나은 성능을 보입니다.

기본 응용 프로그램의 한 가지 큰 장점은 타사 통합을 기다릴 필요 없이 원하는 경우 Apple과 Google이 베타 버전으로 만든 새로운 기술을 즉시 채택할 수 있다는 것입니다. 네이티브 애플리케이션을 구축할 때의 가장 큰 단점은 플랫폼 간 코드 재사용이 부족하여 iOS 및 Android를 대상으로 하는 경우 개발 비용이 많이 들 수 있다는 것입니다.

네이티브 반응

React Native를 사용하면 JavaScript를 사용하여 기본 애플리케이션을 빌드할 수 있습니다. 애플리케이션이 사용하는 실제 컨트롤은 네이티브 플랫폼 컨트롤이므로 최종 사용자는 네이티브 앱의 느낌을 받습니다. React Native의 추상화가 제공하는 것 이상의 사용자 정의가 필요한 앱의 경우 기본 개발이 여전히 필요할 수 있습니다. 필요한 사용자 정의의 양이 상당한 경우 React Native의 추상화 계층 내에서 작업하는 이점이 어떤 경우에는 앱을 기본적으로 개발하는 것이 더 유리할 정도로 줄어듭니다.

자마린

Xamarin에 대해 논의할 때 평가해야 하는 두 가지 접근 방식이 있습니다. 대부분의 플랫폼 간 접근 방식에는 Xamarin.Forms가 있습니다. 이 기술은 React Native와 매우 다르지만 개념적으로는 기본 컨트롤을 추상화한다는 점에서 유사한 접근 방식을 제공합니다. 마찬가지로 사용자 정의와 관련하여 유사한 단점이 있습니다.

둘째, Xamarin-classic이라는 용어가 많이 있습니다. 이 접근 방식은 Xamarin의 경우에 C# 또는 F#만 사용하여 Apple/Android 네이티브를 직접 사용할 때와 마찬가지로 Xamarin의 iOS 및 Android 제품을 독립적으로 사용하여 플랫폼별 기능을 빌드합니다. Xamarin의 이점은 플랫폼이 아닌 특정 코드(예: 네트워킹, 데이터 액세스, 웹 서비스 등)를 공유할 수 있다는 것입니다.

이러한 대안과 달리 Flutter는 개발자에게 코드 재사용, 고성능, 유연한 사용자 인터페이스 및 우수한 도구를 통해 보다 완벽한 크로스 플랫폼 솔루션을 제공하려고 합니다.

Flutter 앱 개요

앱 만들기

Flutter를 설치한 후 Flutter로 앱을 만드는 것은 명령줄을 열고 flutter create [app_name] 을 입력하거나 VS Code에서 "Flutter: New Project" 명령을 선택하거나 Android에서 "새 Flutter 프로젝트 시작"을 선택하는 것만큼 간단합니다. 스튜디오 또는 IntelliJ.

선호하는 편집기와 함께 IDE 또는 명령줄을 사용하도록 선택했는지 여부에 관계없이 새로운 Flutter 애플리케이션 템플릿은 애플리케이션을 위한 좋은 시작점을 제공합니다.

응용 프로그램은 제목 표시줄, 재질 아이콘 및 테마와 같은 앱에 대한 몇 가지 기본 스캐폴딩을 제공하기 위해 flutter / material.dart 패키지를 가져옵니다. 또한 애플리케이션 상태가 변경될 때 사용자 인터페이스를 업데이트하는 방법을 보여주기 위해 상태 저장 위젯을 설정합니다.

도구 옵션

Flutter는 툴링과 관련하여 놀라운 유연성을 제공합니다. 애플리케이션은 VS Code, Android Studio 또는 IntelliJ와 같은 지원되는 IDE에서와 마찬가지로 모든 편집기와 함께 명령줄에서 쉽게 개발할 수 있습니다. 접근 방식은 주로 개발자 선호도에 따라 다릅니다.

Android Studio는 실행 중인 애플리케이션의 위젯을 분석하고 애플리케이션 성능을 모니터링하는 Flutter Inspector와 같은 대부분의 기능을 제공합니다. 또한 위젯 계층 구조를 개발할 때 편리한 여러 리팩토링을 제공합니다.

VS Code는 Android Studio/IntelliJ보다 빠르게 시작하는 경향이 있다는 점에서 더 가벼운 개발 경험을 제공합니다. 각 IDE는 코드 완성과 같은 내장 편집 도우미를 제공하여 다양한 API 탐색과 우수한 디버깅 지원을 가능하게 합니다.

명령줄은 또한 flutter 명령을 통해 잘 지원되므로 편집기 이외의 다른 도구 종속성 없이 애플리케이션을 쉽게 생성, 업데이트 및 실행할 수 있습니다.

핫 리로딩

툴링에 관계없이 Flutter는 애플리케이션의 핫 리로딩을 훌륭하게 지원합니다. 이를 통해 많은 경우에 실행 중인 애플리케이션을 수정하고 앱을 중지하고 다시 빌드하고 다시 배포하지 않고도 상태를 유지할 수 있습니다.

핫 리로드는 더 빠른 반복을 허용하여 개발 효율성을 크게 높입니다. 플랫폼을 사용하는 것이 정말 즐겁습니다.

테스트

Flutter에는 테스트의 위젯과 상호 작용하는 WidgetTester 유틸리티가 포함되어 있습니다. 새 애플리케이션 템플릿에는 아래와 같이 테스트를 작성할 때 사용하는 방법을 보여주는 샘플 테스트가 포함되어 있습니다.

 // Test included with the new Flutter application template import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:myapp/main.dart'; void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async { // Build our app and trigger a frame. await tester.pumpWidget(new MyApp()); // Verify that our counter starts at 0. expect(find.text('0'), findsOneWidget); expect(find.text('1'), findsNothing); // Tap the '+' icon and trigger a frame. await tester.tap(find.byIcon(Icons.add)); await tester.pump(); // Verify that our counter has incremented. expect(find.text('0'), findsNothing); expect(find.text('1'), findsOneWidget); }); }

패키지 및 플러그인 사용

Flutter는 이제 막 시작되었지만 이미 풍부한 개발자 생태계가 있습니다. 개발자는 이미 수많은 패키지와 플러그인을 사용할 수 있습니다.

패키지 또는 플러그인을 추가하려면 애플리케이션의 루트 디렉토리에 있는 pubspec.yaml 파일에 종속성을 포함하기만 하면 됩니다. 그런 다음 명령줄이나 IDE를 통해 flutter packages get 실행하면 Flutter의 도구가 필요한 모든 종속성을 가져옵니다.

예를 들어, Flutter용으로 널리 사용되는 이미지 선택기 플러그인을 사용하려면 pubspec.yaml 에서 다음과 같이 종속성으로 나열하기만 하면 됩니다.

 dependencies: image_picker: "^0.4.1"

그런 다음 flutter packages get 을 실행하면 이를 사용하는 데 필요한 모든 것을 가져온 다음 Dart에서 가져와 사용할 수 있습니다.

 import 'package:image_picker/image_picker.dart';

위젯

Flutter의 모든 것은 위젯입니다. 여기에는 ListView , TextBox 및 Image 와 같은 사용자 인터페이스 요소와 레이아웃, 애니메이션, 제스처 인식 및 테마를 비롯한 프레임워크의 다른 부분이 포함됩니다.

모든 것이 위젯이 됨으로써, 부수적으로 위젯이기도 한 전체 애플리케이션이 위젯 계층 내에서 표현될 수 있습니다. 모든 것이 위젯인 아키텍처를 사용하면 앱의 일부에 적용된 특정 속성과 동작이 어디에서 오는지 명확해집니다. 이것은 속성과 동작을 일관되지 않게 연결하는 대부분의 다른 응용 프로그램 프레임워크와 다릅니다. 때로는 계층 구조의 다른 구성 요소에서 연결하고 다른 경우에는 컨트롤 자체에서 연결합니다.

간단한 UI 위젯 예제

Flutter 애플리케이션의 진입점은 주요 기능입니다. 사용자 인터페이스 요소에 대한 위젯을 화면에 배치하려면 main() 에서 runApp() )을 호출하고 위젯 계층 구조의 루트 역할을 할 위젯을 전달합니다.

 import 'package:flutter/material.dart'; void main() { runApp( Container(color: Colors.lightBlue) ); }

그러면 화면을 채우는 연한 파란색 Container 위젯이 생성됩니다.

Stateless 대 Stateful 위젯

위젯은 stateless와 stateful의 두 가지 형태로 제공됩니다. 상태 비저장 위젯은 생성 및 초기화된 후에 내용을 변경하지 않는 반면 상태 저장 위젯은 사용자 상호 작용에 대한 응답으로 애플리케이션을 실행하는 동안 변경할 수 있는 일부 상태를 유지합니다.

이 예에서는 FlatButton 위젯과 Text 위젯이 화면에 그려집니다. Text 위젯은 상태에 대한 기본 String 로 시작합니다. 버튼을 누르면 상태가 변경되어 Text 위젯이 업데이트되어 새 String 이 표시됩니다.

위젯을 캡슐화하려면 StatelessWidget 또는 StatefulWidget 에서 파생된 클래스를 만듭니다. 예를 들어 연한 파란색 Container 는 다음과 같이 작성할 수 있습니다.

 class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container(color: Colors.lightBlue); } }

Flutter는 위젯이 위젯 트리에 삽입될 때 위젯의 빌드 메소드를 호출하여 UI의 이 부분이 렌더링될 수 있도록 합니다.

상태 저장 위젯의 경우 StatefulWidget 에서 파생됩니다.

 class MyStatefulWidget extends StatefulWidget { MyStatefulWidget(); @override State createState() { return MyWidgetState(); } } class MyStatefulWidget extends StatefulWidget { MyStatefulWidget(); @override State createState() { return MyWidgetState(); } }

Stateful 위젯은 주어진 상태에 대한 위젯 트리 구축을 담당하는 State 클래스를 반환합니다. 상태가 변경되면 위젯 트리의 관련 부분이 다시 작성됩니다.

다음 코드에서 State 클래스는 버튼을 클릭할 때 String 을 업데이트합니다.

 class MyWidgetState extends State { String text = "some text"; @override Widget build(BuildContext context) { return Container( color: Colors.lightBlue, child: Padding( padding: const EdgeInsets.all(50.0), child: Directionality( textDirection: TextDirection.ltr, child: Column( children: [ FlatButton( child: Text('Set State'), onPressed: () { setState(() { text = "some new text"; }); }, ), Text( text, style: TextStyle(fontSize: 20.0)), ], ) ) ) ); } } class MyWidgetState extends State { String text = "some text"; @override Widget build(BuildContext context) { return Container( color: Colors.lightBlue, child: Padding( padding: const EdgeInsets.all(50.0), child: Directionality( textDirection: TextDirection.ltr, child: Column( children: [ FlatButton( child: Text('Set State'), onPressed: () { setState(() { text = "some new text"; }); }, ), Text( text, style: TextStyle(fontSize: 20.0)), ], ) ) ) ); } }

상태는 setState() 에 전달되는 함수에서 업데이트됩니다. setState() 가 호출되면 이 함수는 이 예제의 문자열과 같은 모든 내부 상태를 설정할 수 있습니다. 그런 다음 build 메소드가 호출되어 상태 저장 위젯의 트리를 업데이트합니다.

또한 Directionality 위젯을 사용하여 Text 위젯과 같이 이를 필요로 하는 하위 트리의 모든 위젯에 대해 텍스트 방향을 설정하는 것에 유의하십시오. 여기에 있는 예제는 처음부터 코드를 작성하는 것이므로 위젯 계층의 어딘가에 Directionality 이 필요합니다. 그러나 기본 애플리케이션 템플릿과 같이 MaterialApp 위젯을 사용하면 텍스트 방향이 암시적으로 설정됩니다.

형세

runApp 함수는 기본적으로 위젯을 팽창시켜 화면을 채웁니다. 위젯 레이아웃을 제어하기 위해 Flutter는 다양한 레이아웃 위젯을 제공합니다. 자식 위젯을 가로 또는 세로로 정렬하고, 위젯을 확장하여 특정 공간을 채우고, 위젯을 특정 영역으로 제한하고, 화면 중앙에 놓고, 위젯이 서로 겹치도록 하는 레이아웃을 수행하는 위젯이 있습니다.

일반적으로 사용되는 두 가지 위젯은 Row 및 Column 입니다. 이러한 위젯은 레이아웃을 수행하여 하위 위젯을 가로(행) 또는 세로(열)로 표시합니다.

이러한 레이아웃 위젯을 사용하려면 단순히 하위 위젯 목록을 둘러싸기만 하면 됩니다. mainAxisAlignment 는 위젯이 레이아웃 축을 따라 중앙, 시작, 끝 또는 다양한 간격 옵션으로 배치되는 방식을 제어합니다.

다음 코드는 Row 또는 Column 에서 여러 자식 위젯을 정렬하는 방법을 보여줍니다.

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Row( //change to Column for vertical layout mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.android, size: 30.0), Icon(Icons.pets, size: 10.0), Icon(Icons.stars, size: 75.0), Icon(Icons.rowing, size: 25.0), ], ); } } 

터치에 반응하기

터치 상호 작용은 GestureDetector 클래스에 캡슐화된 제스처로 처리됩니다. 위젯이기도 하므로 제스처 인식을 추가하는 것은 GestureDetector 에서 자식 위젯을 래핑하는 것만큼 쉽습니다.

예를 들어 Icon 에 터치 처리를 추가하려면 이를 GestureDetector 의 자식으로 만들고 캡처할 원하는 제스처에 대한 감지기의 핸들러를 설정합니다.

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () => print('you tapped the star'), onDoubleTap: () => print('you double tapped the star'), onLongPress: () => print('you long pressed the star'), child: Icon(Icons.stars, size: 200.0), ); } }

이 경우 아이콘을 탭, 두 번 탭 또는 길게 누르면 관련 텍스트가 인쇄됩니다.

 To hot reload your app on the fly, press "r". To restart the app entirely, press "R". An Observatory debugger and profiler on iPhone X is available at: https://127.0.0.1:8100/ For a more detailed help message, press "h". To quit, press "q". flutter: you tapped the star flutter: you double tapped the star flutter: you long pressed the star

간단한 탭 제스처 외에도 패닝 및 크기 조정에서 드래그에 이르기까지 모든 것에 대한 풍부한 인식기가 있습니다. 이를 통해 대화형 응용 프로그램을 매우 쉽게 구축할 수 있습니다.

페인트 등

Flutter는 또한 불투명도를 수정하고, 클리핑 경로를 설정하고, 장식을 적용하는 것을 포함하여 페인팅할 다양한 위젯을 제공합니다. CustomPaint 위젯, 연결된 CustomPainter 및 Canvas 클래스를 통한 사용자 정의 페인팅도 지원합니다.

페인팅 위젯의 한 예는 화면에 BoxDecoration 을 페인팅할 수 있는 DecoratedBox 입니다. 다음 예제에서는 이를 사용하여 화면을 그래디언트 채우기로 채우는 방법을 보여줍니다.

 class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new DecoratedBox( child: Icon(Icons.stars, size: 200.0), decoration: new BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } } 

생기

Flutter에는 애니메이션 시작 및 중지, 애니메이션 값 변경을 포함하여 시간 경과에 따른 애니메이션 재생을 제어하는 AnimationController 클래스가 포함되어 있습니다. 또한 AnimationController 와 함께 애니메이션을 구성할 수 있는 AnimatedBuilder 위젯이 있습니다.

이전에 표시된 장식된 별과 같은 모든 위젯은 해당 속성을 애니메이션할 수 있습니다. 예를 들어 코드를 StatefulWidget 으로 리팩토링하면 애니메이션은 상태 변경이므로 AnimationController 를 State 클래스에 전달하면 위젯이 빌드될 때 애니메이션 값을 사용할 수 있습니다.

 class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } } class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } } class StarWidget extends StatefulWidget { @override State createState() { return StarState(); } } class StarState extends State with SingleTickerProviderStateMixin { AnimationController _ac; final double _starSize = 300.0; @override void initState() { super.initState(); _ac = new AnimationController( duration: Duration(milliseconds: 750), vsync: this, ); _ac.forward(); } @override Widget build(BuildContext context) { return new AnimatedBuilder( animation: _ac, builder: (BuildContext context, Widget child) { return DecoratedBox( child: Icon(Icons.stars, size: _ac.value * _starSize), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Colors.red, Colors.blue, Colors.green], tileMode: TileMode.mirror ), ), ); } ); } }

이 경우 값은 위젯의 크기를 변경하는 데 사용됩니다. builder 함수는 애니메이션 값이 변경될 때마다 호출되어 별의 크기가 750ms 이상 변하도록 하여 스케일 인 효과를 만듭니다.

기본 기능 사용

플랫폼 채널

Android 및 iOS에서 기본 플랫폼 API에 대한 액세스를 제공하기 위해 Flutter 애플리케이션은 플랫폼 채널을 사용할 수 있습니다. 이를 통해 Flutter Dart 코드는 호스팅 iOS 또는 Android 애플리케이션에 메시지를 보낼 수 있습니다. 사용 가능한 많은 오픈 소스 플러그인은 플랫폼 채널을 통한 메시징을 사용하여 구축됩니다. 플랫폼 채널을 사용하는 방법을 배우기 위해 Flutter 문서에는 기본 배터리 API에 액세스하는 방법을 보여주는 좋은 문서가 포함되어 있습니다.

결론

베타 버전에서도 Flutter는 플랫폼 간 애플리케이션 구축을 위한 훌륭한 솔루션을 제공합니다. 뛰어난 툴링과 핫 리로딩으로 매우 즐거운 개발 경험을 제공합니다. 풍부한 오픈 소스 패키지와 뛰어난 문서 덕분에 쉽게 시작할 수 있습니다. 앞으로 Flutter 개발자는 iOS 및 Android 외에도 Fuchsia를 대상으로 할 수 있습니다. 엔진 아키텍처의 확장성을 고려할 때 Flutter가 다양한 다른 플랫폼에도 적용되는 것을 보는 것은 놀라운 일이 아닙니다. 커뮤니티가 성장하고 있으므로 지금이 바로 참여할 수 있는 좋은 기회입니다.

다음 단계

• 플러터 설치
• 다트 랭귀지 투어
• Flutter Codelabs
• 플러터 유다시티 코스
• 기사 소스 코드