플러터

3. 프레임워크 아키텍처

플러터 프레임워크는 Dart 플랫폼, 플러터 엔진, 파운데이션 라이브러리(Foundation library), 디자인 특화 위젯으로 구성된다.

플러터 앱은 Dart 언어로 작성된다. 모든 플랫폼의 플러터 앱 릴리스 버전은 AOT(Ahead-of-time) 컴파일을 사용하지만, 코드가 소스 간 컴파일러를 통해 JavaScript 또는 WebAssembly로 JavaScript 변환되는 웹에서는 예외이다.^[22][23] 플러터는 Dart의 [https://pub.dev Pub] 패키지 관리자 및 소프트웨어 저장소를 상속받아 사용자가 사용자 지정 패키지 및 플러터 관련 플러그인을 게시하고 사용할 수 있도록 한다.^[24]

Dart로 작성된 Foundation 라이브러리는 플러터를 사용하여 애플리케이션을 구성하는 데 사용되는 기본 클래스 및 함수, 예를 들어 엔진과 통신하는 API를 제공한다.^[29][25]

주로 C++로 작성된 플러터의 엔진은 구글의 Skia 그래픽 라이브러리 또는 iOS에서 기본적으로 활성화되고 안드로이드에서 베타 버전으로 제공되는 사용자 지정 "Impeller" 그래픽 레이어를 사용하여 저수준의 렌더링 지원을 제공한다.^[26][27][28] 이 엔진은 접근성, 파일 및 네트워크 I/O, 네이티브 플러그인 지원 등과 같은 기능을 구현하기 위해 플랫폼별 SDK (예: Android 및 iOS에서 제공하는 SDK)와 인터페이스한다.^[29]

3. 1. 위젯 기반 UI 구성

4. 디자인투코드(Design-to-code)

디자인투코드(Design-to-Code)란 피그마(프로그램)와 같은 디자인 파일을 코드로 변환하는 것을 의미한다.

피그마의 디자인 협업 환경 혁신에 이어 UI/UX 개발 프로세스의 혁신이 일어날 것으로 예상된다. 대표적인 서비스형 소프트웨어로는 [https://function12.io 펑션투웰브]가 있다.

5. Hello World 예시

dart

import 'package:flutter/material.dart';

void main() => runApp(HelloWorldApp());

class HelloWorldApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Hello World App',

home: Scaffold(

appBar: AppBar(

title: Text('Hello World App'),

),

body: Center(

child: Text('Hello World'),

),

),

);

}

}

```

이 코드는 플러터(Flutter)를 사용하여 "Hello World"를 출력하는 가장 기본적인 예제이다.

• `import 'package:flutter/material.dart';`: 플러터의 Material Design 위젯들을 사용하기 위한 패키지를 가져온다.
• `void main() => runApp(HelloWorldApp());`: `HelloWorldApp` 클래스의 인스턴스를 생성하여 앱을 실행한다.
• `HelloWorldApp` 클래스: `StatelessWidget`을 상속받아 UI를 구성한다.
• `build` 메서드: 앱의 UI를 정의한다.
• `MaterialApp`: 앱의 기본적인 Material Design 레이아웃을 설정한다.
• `title`: 앱의 제목을 설정한다.
• `home`: 앱의 홈 화면을 설정한다.
• `Scaffold`: AppBar, body 등 기본적인 위젯들의 레이아웃을 구성한다.
• `appBar`: 앱 상단에 표시되는 AppBar를 설정한다.
• `title`: AppBar의 제목을 설정한다.
• `body`: 앱의 본문 내용을 설정한다.
• `Center`: 자식 위젯을 화면 중앙에 배치한다.
• `child`: 화면에 표시할 텍스트를 설정한다.

참조

<sub>[1]</sub> 웹사이트 Release v0.0.6: Rev alpha branch version to 0.0.6, flutter 0.0.26 (#10010) · flutter/flutter https://github.com/f[...] 2018-08-08
<sub>[2]</sub> 웹사이트 FAQ - Flutter https://flutter.dev/[...] 2018-08-08
<sub>[3]</sub> 웹사이트 Google starts a push for cross-platform app development with Flutter SDK https://arstechnica.[...] 2021-06-11
<sub>[4]</sub> 웹사이트 Google's "Fuchsia" smartphone OS dumps Linux, has a wild new UI https://arstechnica.[...] Ars Technica 2018-03-18
<sub>[5]</sub> 웹사이트 With Flutter, Google Aims Dart to Mobile App Cross-Development https://www.infoq.co[...] 2022-03-17
<sub>[6]</sub> 웹사이트 Google announces Flutter 1.0, the first stable release of its cross-platform mobile development toolkit https://www.androidp[...] 2022-03-17
<sub>[7]</sub> 웹사이트 Google's multi-platform app framework Flutter reaches version 2, expands to the web https://www.theregis[...] 2021-03-03
<sub>[8]</sub> 웹사이트 Going global at Google Pay with Flutter https://flutter.dev/[...] 2024-04-02
<sub>[9]</sub> 웹사이트 Google Earth gets a redesigned Android app with Projects support, removes Voyager https://9to5google.c[...] 2023-09-26
<sub>[10]</sub> 웹사이트 Check out the new @googleearth for iOS, Android, and web with UI built using Flutter, all from a single codebase https://twitter.com/[...] 2024-04-02
<sub>[11]</sub> 웹사이트 Google's Flutter 3 adds support for macOS and Linux desktop apps https://techcrunch.c[...] 2022-05-11
<sub>[12]</sub> 웹사이트 Increasing productivity by 33% at ByteDance with Flutter https://flutter.dev/[...] 2024-04-02
<sub>[13]</sub> 웹사이트 Google's cross-platform Flutter UI toolkit hits version 1.0 https://techcrunch.c[...] 2018-12-04
<sub>[14]</sub> 웹사이트 Alibaba scales China's largest second-hand marketplace with Flutter https://flutter.dev/[...] 2024-04-02
<sub>[15]</sub> 웹사이트 Flutter architectural overview https://docs.flutter[...] 2024-07-26
<sub>[16]</sub> 웹사이트 Apps made with Google's Flutter may fritter away CPU cycles. Here's what the web giant intends to do about it https://www.theregis[...] 2021-11-12
<sub>[17]</sub> 서적 Flutter in action Manning Publications Co 2020
<sub>[18]</sub> 웹사이트 Introduction to widgets https://docs.flutter[...] 2022-10-06
<sub>[19]</sub> 웹사이트 Flame https://flame-engine[...] 2022-10-06
<sub>[20]</sub> 웹사이트 Google reports 80% spike of Flutter-built apps in Play Store as 1.20 is released https://www.theregis[...] 2020-08-05
<sub>[21]</sub> 웹사이트 Flutter's Compilation Patterns https://proandroidde[...] 2018-12-06
<sub>[22]</sub> 웹사이트 Google's Flutter showcases new graphics capabilities, WebAssembly and RISC-V support https://techcrunch.c[...] 2023-01-25
<sub>[23]</sub> 웹사이트 Landing Flutter 3.22 and Dart 3.4 at Google I/O 2024 https://medium.com/f[...] 2024-05-17
<sub>[24]</sub> 웹사이트 Using packages https://docs.flutter[...] 2022-10-06
<sub>[25]</sub> 웹사이트 foundation library - Dart API https://docs.flutter[...] 2017-12-13
<sub>[26]</sub> 웹사이트 Flutter architectural overview https://docs.flutter[...] 2024-07-26
<sub>[27]</sub> 웹사이트 Impeller rendering engine https://docs.flutter[...] 2024-05-17
<sub>[28]</sub> 웹사이트 Google releases Flutter 3.7, teases future of app development framework https://9to5google.c[...] 2023-01-25
<sub>[29]</sub> 웹사이트 Technical Overview - Flutter https://flutter.dev/[...] 2017-12-13
<sub>[30]</sub> 웹사이트 Google's Dart language on Android aims for Java-free, 120 FPS apps https://arstechnica.[...] 2017-12-13
<sub>[31]</sub> 웹사이트 Google bridges Android and iOS development with Flutter 1.0 https://arstechnica.[...] 2018-12-04
<sub>[32]</sub> 웹사이트 Google releases Flutter 1.17 and Dart 2.8 stable SDKs for app development https://www.xda-deve[...] 2020-05-06
<sub>[33]</sub> 웹사이트 Version 2 of Google's Flutter toolkit adds support for desktop and web apps https://techcrunch.c[...] 2021-03-03
<sub>[34]</sub> 웹사이트 Dart 2.12 has been released, with null-safety and C interoperability https://www.xda-deve[...] 2021-03-03
<sub>[35]</sub> 웹사이트 Google's Dart language soon won't take null for an answer https://www.theregis[...] 2022-12-09
<sub>[36]</sub> 웹사이트 Google's Flutter app development framework now stable across platforms https://www.theregis[...] 2022-05-11
<sub>[37]</sub> 웹사이트 Google's Flutter UI Toolkit Forked As Flock https://www.phoronix[...] 2024-10-30
<sub>[38]</sub> 웹사이트 Google's Flutter framework has been forked https://www.infoworl[...]
<sub>[39]</sub> 웹사이트 Release v0.0.6: Rev alpha branch version to 0.0.6, flutter 0.0.26 (#10010) · flutter/flutter https://github.com/f[...] 2022-03-22
<sub>[40]</sub> 웹사이트 FAQ https://flutter.io/f[...] flutter.io 2018-07-29
<sub>[41]</sub> 웹사이트 Google starts a push for cross-platform app development with Flutter SDK https://arstechnica.[...] 2021-06-11
<sub>[42]</sub> 웹사이트 Google's "Fuchsia" smartphone OS dumps Linux, has a wild new UI https://arstechnica.[...] Ars Technica 2021-06-15
<sub>[43]</sub> 웹사이트 Googleの大きな野望？　謎のOS「Fuchsia」 https://cloud.watch.[...] クラウド Watch 2018-07-29
<sub>[44]</sub> 웹사이트 Google releases Flutter app development SDK version 1.0, no longer in beta https://9to5google.c[...] 2018-12-05
<sub>[45]</sub> 웹사이트 Version 2 of Google's Flutter toolkit adds support for desktop and web apps https://social.techc[...] 2021-03-06
<sub>[46]</sub> 웹사이트 Google’s Dart language on Android aims for Java-free, 120 FPS apps https://arstechnica.[...] Ars Technica 2018-07-29
<sub>[47]</sub> 웹사이트 Flutter 1.0: Google’s Portable UI Toolkit https://developers.g[...] Tim Sneath 2018-12-05
<sub>[48]</sub> 웹사이트 Version 2 of Google's Flutter toolkit adds support for desktop and web apps https://social.techc[...] 2021-03-06
<sub>[49]</sub> 웹사이트 Migrating to null safety https://dart.dev/nul[...] 2022-02-04
<sub>[50]</sub> 웹사이트 What’s new in Flutter 2.5 https://medium.com/f[...] 2022-02-04
<sub>[51]</sub> 웹사이트 Flutter 2.5.0 release notes https://docs.flutter[...] 2022-02-04
<sub>[52]</sub> 웹사이트 Technical Overview - Flutter https://flutter.dev/[...] 2017-12-13
<sub>[53]</sub> 웹사이트 Technical Overview https://flutter.io/t[...] flutter.io 2018-07-29
<sub>[54]</sub> 웹사이트 foundation library https://docs.flutter[...] flutter.io 2018-07-29
<sub>[55]</sub> 웹사이트 Material Components Widgets https://flutter.io/w[...] flutter.io 2018-07-29
<sub>[56]</sub> 웹사이트 Cupertino (iOS-style) Widgets https://flutter.io/w[...] flutter.io 2018-07-29
<sub>[57]</sub> 웹인용 Release v0.0.6: Rev alpha branch version to 0.0.6, flutter 0.0.26 (#10010) · flutter/flutter https://github.com/f[...] 2018-08-08
<sub>[58]</sub> 웹인용 FAQ - Flutter https://flutter.io/f[...] 2018-08-08
<sub>[59]</sub> 웹인용 Google's "Fuchsia" smartphone OS dumps Linux, has a wild new UI https://arstechnica.[...] Ars Technica
<sub>[60]</sub> 웹인용 Google's Dart language on Android aims for Java-free, 120 FPS apps https://arstechnica.[...] Ars Technica 2015-05-01
<sub>[61]</sub> 웹인용 Speed Up Native Development As Google Flutter Comes Out Of Beta https://appetiser.co[...] Appetiser Apps 2018-12-21