Flutter for SwiftUI Devs - Responsive and adaptive design

 Responsive and adaptive design 

Responsive design은 무엇일까?

Responsive는 '즉각 반응하는'이라는 의미이다.

Responsive web design은 반응형 웹 디자인으로,

하나의 웹 사이트가 접속하는 디스플레이 종류에 따라 반응하여

화면의 크기가 자동으로 바뀌는 디자인이다.

 

그렇다면 Adaptive design은 무엇일까.

Adaptive design is a user interface that's adapted to different screen sizes.

다양한 스크린 크기에 맞춰 바뀌는 UI이다.

Adaptive web design은 적응형 웹 디자인으로,

웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 미리 정해둔 웹을 보여주는 디자인이다.

 

Flutter 문서에서는 responsive와 adaptive에 대한 차이를 설명한다.

Typically, a responsive app has had its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a laptop or desktop computer.

Adapting an app to run on different device types, such as mobile and desktop, requires dealing with mouse and keyboard input, as well as touch input. It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more.

Creating responsive and adaptive apps

 

SwiftUI와 Flutter에서 모바일/앱을 만들 때,

responsive 하고 adaptive 한 UI를 만들기 위해서 어떻게 하는지 알아보자.

 

 

 In SwiftUI 

SwiftUI에서는 GeometryReader를 이용하여 만든다.

 

예를 들어,

• 어떤 요소를 만들고 너비를 정할 때, geometry.size.width를 이용한다.
  • geometry라고 쓴 GeometryReader의 proxy를 이용하여
    GeometryReader의 크기와 위치를 접근할 수 있다.

struct RightView: View {
    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .path(in: CGRect(x: geometry.size.width/2, y: 0,
                                 width: geometry.size.width / 2.0,
                                 height: geometry.size.height / 2.0))
                .fill(Color.blue)
        }
    }
}

 

• 그리고 GeometryReader를 앱의 디자인을 변경할 때, breakpoint로 이용할 수 있다.

• 또한, horizontalSizeClass를 사용하여 .regular이나 .compact사이즈를 이용할 수 있다.
  • horizontalSizeClass는 이름에 class가 들어가지만, property이다.
  • SwiftUI가 디스플레이 크기를 감지하여 판단한다.

@Environment(\.horizontalSizeClass) private var horizontalSizeClass

 

 

 In Flutter 

Flutter에서는 두 가지 옵션을 사용할 수 있다.

• LayoutBuilder의 BoxConstraints를 이용한다.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return FirstLayout();
          } else {
            return SecondLayout();
          }
        },
      ),
    );
  }

 

• 현재 앱의 크기와 방향을 가져오기 위해 build 함수 내에서 MediaQuery.of()를 사용한다.

build(BuildContext context) {
  // orientation을 알고싶다면
  var deviceOrientation = MediaQuery.of(context).orientation;
  
  // size를 알고싶다면
  var screenSize = MediaQuery.of(context).size;
}

 

 

---

 

Flutter for SwiftUI Developers