[Flutter] Web app 배포시, 화면크기 고정

 

Flutter로 PWA(Progressive Web App) 앱을 만들다보면, 브라우저의 크기에 따라 반응형으로 처리해야 할 때가 있다. 그 때는 LayoutBuilder를 이용하면 된다.  그리고 웹앱을 만들면 다른 도메인의 이미지들을 읽지 못하게 되는데, 이를 해결하기 위해 다음과 같이 빌드를 한다. 

flutter build web --web-renderer html --release

 

[Flutter] Layoutbuilder를 이용한 반응형 UI

그러나 반응형처리를 하지 않고 고정된 크기를 사용한다면 쉽게 처리할 수 있는 패키지가 있다. 바로 

flutter_web_frame이다. 

 

flutter_web_frame | Flutter Package

 

앱이 실행되는 최초의 Widget에서 FlutterWebFrame으로 Wrap을 하면된다. 여기에서 

maximumSize에서 크기를 지정하고  enabled에서 웹을 설정하면 다른 플랫폼에 전혀영향을 미치지 않는다. backgroundColor는 나머지 배경색이다. 그리고 참고해야 할 것은, Flutter앱에서 강제적으로 앱의 전체크기를 계산하여 위젯의 width를 설정하는 코드가 있다면 웹에서는 원치않는 화면을 발생시킬 수도 있다. 이 점만 유의하면 된다.

 

[공식문서 예제]

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_web_frame/flutter_web_frame.dart';

void main() {
  runApp(MyAp());
}

class MyAp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterWebFrame(
      builder: (context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Title '),
            ),
            body: Center(
              child: Text('Body Text'),
            ),
          ),
        );
      },
      maximumSize: Size(475.0, 812.0), // Maximum size
      enabled: kIsWeb, // default is enable, when disable content is full size
      backgroundColor: Colors.grey, // Background color/white space
    );
  }
}