Nomadcoders - Flutter로 웹툰 앱 만들기 #1

in Flutter
Nomadcoders - Flutter로 웹툰 앱 만들기 #1

Flutter의 특징과 아키텍쳐, 플랫폼별 크기 및 위치 조정 기능 비교, Flutter Inspector, Flutter Outline에 대해 정리했습니다.

알게된 사실 👨🏻‍💻

Flutter의 특징과 아키텍쳐

archdiagram

다른 크로스플랫폼과는 달리, Flutter는 Android나 iOS 같은 운영체제와 직접적으로 소통하지 않는다.

Flutter 어플리케이션은 C나 C++로 작성된 독자적인 엔진을 사용하여 화면을 렌더링하기 때문에 다음과 같은 특성을 가진다.

  1. 플랫폼의 Native Widget을 사용하지 않는다.
  2. 화면 상의 모든 픽셀을 100% 제어 가능하다.
  3. 플랫폼에 상관없이 동일한 디자인을 제공할 수 있다.

참고 링크

  1. Flutter architectural overview

  2. Does Flutter use my operating system’s built-in platform widgets?

플랫폼별 크기 및 위치 조정 기능 비교

Transform.scale(
  scale: 2.0,
  child: Transform.translate(
    offset: const Offset(-6.0, 12.0),
    child: Icon(
      icon,
      color: cardContentColor,
      size: 88.0,
    ),
  ),
),

위 코드는 Icon 위젯의 크기와 위치를 조정하는 플러터 코드이다.

위 코드가 네이티브 플랫폼(Android, iOS)에서는 어떤 식으로 표현될지 궁금해서 알아보았다.

👉🏻 Android(Java)

ImageView iconView = findViewById(R.id.iconView);
iconView.setScaleX(2.0f);
iconView.setScaleY(2.0f);
iconView.setTranslationX(-6.0f);
iconView.setTranslationY(12.0f);

👉🏻 iOS(Swift)

let iconView = UIImageView(image: UIImage(named: "yourIconName"))
iconView.tintColor = UIColor(named: "cardContentColor")
iconView.frame = CGRect(x: 0, y: 0, width: 88.0 * 2, height: 88.0 * 2)
iconView.transform = CGAffineTransform(scaleX: 2.0, y: 2.0)
                                .translatedBy(x: -6.0, y: 12.0)
view.addSubview(iconView)

크기와 위치를 조정하는 기능은 각 플랫폼과 프레임워크마다 사용법이나 구현 방식은 다르지만, 핵심적인 개념은 비슷하다고 느껴졌다.

Flutter Inspector와 Flutter Outline

👉🏻 Flutter Inspector

Flutter 애플리케이션의 UI를 런타임에서 시각적으로 검사할 수 있는 도구이다. 레이아웃이나 렌더링에서 발생하는 문제점을 시각적으로 확인할 때 유용하다.

inspector

👉🏻 Flutter Outline

현재 작성중인 Dart 코드 파일의 위젯 구조를 트리 형태로 보여주는 패널이다. 위젯의 계층적 구조 및 위젯 트리에서의 현재 위치를 쉽게 파악할 수 있고, 또 코드 내 특정 위젯으로 이동할 때 유용하다.

지금까지는 Flutter Inspector와 Flutter Outline을 크게 활용하지 않았었지만 앞으로는 적극적으로 활용할 계획이다. 특히 Flutter Outline은 화면 우측에 표시하며 작업을 진행했는데, 예상보다 훨씬 더 유용하다는 것이 느껴졌다.

outline