Flutter는 WebApp에도 대응하고 있기 때문에 responsive layout을 설정 할 수 있다. 이번 포스트에서는 어떻게 구현하면 되는지 설정 방법에 대해 간단히 알아본다.

#Responsive Layout Widget

main.dart에 있는 MaterialApp에 직접 코드를 작성하는 것도 좋지만 관리를 편하게 하기 위해 레이아웃용 위젯을 따로 만드는 것이 용이하다.

responsive_layout_screen.dart

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  final Widget webScreenLayout;
  final Widget mobileScreenLayout;
  
  const ResponsiveLayout({super.key, required this.webScreenLayout, required this.mobileScreenLayout});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.maxWidth > 600) {
        // web screen
        return webScreenLayout;
      }
      else {
        // mobile screen 
        return mobileScreenLayout;
      }
    });
  }
}

인풋으로는 모바일과 웹 각각의 스크린 위젯을 받을 수 있도록 설정하였다.
여기서 중요한건 LayoutBuilder를 사용하는 것. 기본적으로 constraints 안에 여러 설정 값들에 접근을 할 수 있게 되어있다. Responsive 레이아웃에서는 일반적으로 가로축의 크기에 따라 달라지기 때문에 constraints.maxWidth가 특정 사이즈를 넘어가면 다른 위젯을 리턴하도록 설정하면 된다. css의 mediaquery를 이런식을 구현하는거라 생각하면 된다.

mobile_screen_layout.dart

import 'package:flutter/material.dart';

class MobileScreenLayout extends StatelessWidget {
  const MobileScreenLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('모바일 화면')),
    );
  }
}

모바일 레이아웃과 웹 레이아웃은 일반적인 스크린 위젯을 구성할 때와 같이 Scaffold를 리턴하는 위젯으로 만들어주면 된다.

터미널에 flutter run -d chrome을 치면 크롬에 화면이 나오니, 가로 화면 크기를 조절해보면서 실제로 잘 작동하는지 확인하면 된다.

이상으로 간단하게 Flutter로 Responsive Layout을 구현하는 법을 알아보았다. css의 mediaquery를 사용하는 것 만큼 간단하게 구현이 가능하다.