Flutter for SwiftUI Devs - Overview, Views vs. Widgets

SwiftUI 개발자를 위한 Flutter

그동안 SwiftUI를 공부하다가 Flutter를 공부하기 시작했다.
마침 Flutter 공식문서에 다른 플랫폼에서 온 개발자를 위한 Flutter 가이드가 있었고,
SwiftUI 개발자를 위한 Flutter 내용을 정리해보려고 한다!

 

 

Overview

Flutter와 SwiftUI는 UI가 어떻게 생겼는지, 어떻게 작동하는지를 묘사한다.

이러한 코드를 declarative framework, 즉 선언적 프레임워크 라고 한다.

 

 

Views vs. Widgets

SwiftUI는 View로 UI를 표현하고, modifiers로 그 View를 구성한다.

Text("Hello, World!") // <-- This is a View
  .padding(10)        // <-- This is a modifier of that View

SwiftUI에서 Text는 한 줄 이상의 read-only text를 나타내는 View이다.

View에 modifier를 붙여서 꾸며 UI를 그려낸다.

 

 

그런데, Flutter는 widgets으로 UI를 구성한다.

view와 widget 모두 변경해야 할 때까지만 존재한다. 이러한 속성을 immutability, 불변성 이라고 한다.

Padding(                         // <-- This is a Widget
  padding: EdgeInsets.all(10.0), // <-- So is this
  child: Text("Hello, World!"),  // <-- This, too
)));

SwiftUI는 UI component property를 View modifier롤 표현하지만,

Flutter는 UI를 구성하는 것도, 그 속성도 widget으로 한다.

 

 

" To compose layouts, both SwiftUI and Flutter nest UI components within one another.

SwiftUI nests Views while Flutter nests Widgets. "

Layout 구성을 위해 두 프레임워크 모두 각각의 UI component들을 중첩한다.

(nest UI components within one another로 이해하는 게 한글보다 더 와닿는다.) 

 

 

 

Flutter for SwiftUI Developers