[Flutter] web 브라우저 너비 구하기 / 반응형 웹

문제

단말기의 환경(PC/Tablet/Mobile)에 따라 브라우저 너비가 다르다.

PC/Tablet/Mobile 3가지에 대응하고자 한다.

 

예시 ). https://m.daum.net/

모바일 라이프의 시작과 끝, Daum

 

브라우저 가로길이 기준

1024px 이상 : PC

768px 이상 : Tablet

나머지 : Mobile

 

브라우저 너비 resize가 되면 실시간으로 변수를 변화하는 기능을 만드는것이 목표

 

 

해결방법

 

방법1(추천X)

참고

https://api.dart.dev/stable/2.17.7/dart-html/EventTarget/addEventListener.html

addEventListener method - EventTarget class - dart:html library - Dart API

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

JavaScript DOM EventListener

 

1. 

import 'dart:html' as html;

2. window 가 resize 시 getsetsize 함수 실행

@override
void initState() {
    html.window.addEventListener('resize', getsetsize, true);
}

type에 "resize" 아니더라도 "click", 'mouseover' 같은 이벤트도 사용가능하다.

위 EventListenner 없애기

html.window.removeEventListener('resize', getsetsize, true);

3. 

void getsetsize(html.Event event) {
    /*
    상태관리 변수 갱신
    너비가
    1024px 이상 PC, 768px 이상 Tablet, 나머지 Mobile
    로 표시
    */
}

ㄴ 해당 방법은 최대화 버튼이 resize 되지 않는다.

 

방법2

main.dart 에 build 와 return 사이 사용 변수에 아래와 같이 추가하면  App 사이즈를 알 수 있다.

@override
  Widget build(BuildContext context) {
    getinfo.width(MediaQuery.of(context).size.width.toInt()); //가로길이 Getx 변수
    getinfo.height(MediaQuery.of(context).size.height.toInt()); //세로길이 Getx  변수
    
    return Scaffold(
        /////////////////////생략///////////////////////////////////
    );
  }

결과

<500px mobile>

 

<947px tablet>

<1146px PC>

으로 실시간으로 변경이 되며 사용하는 위젯은 PC, 테블릿, 모바일 사이즈에 따라 대응이 가능하다.