[Flutter] 반응형 웹 만들기

반응형 웹을 만드려면 우선 PC/Tablet/Mobile의 사이즈 정의가 필요하다. 1200px/976px/500px 기준으로 미디어쿼리를 이용해 width와 height의 길이에 따라 UI가 사이즈에 최적화 되도록 하였다.

MediaQuery와 width/height 

Widget build(BuildContext context) 내부에 MediaQuery 코드를 입력한다.

Widget build(BuildContext context){
	print('width : ${MediaQuery.of(context).size.width}');
	print('height : ${MediaQuery.of(context).size.height}');
	var width = MediaQuery.of(context).size.width;
    
    return ...
}

적용하고 싶은 부분에 width 또는 height 길이에 따른 코드를 입력한다. 예를 들어 width가 500이상일 때 폰트사이즈가 24, 이하일 땐 18로 적용하려면 아래의 코드를 입력한다.

fontSize : width > 500 ? 24 : 16,

최종적으로 아래의 코드처럼 입력한다.

Widget build(BuildContext context){
	print('width : ${MediaQuery.of(context).size.width}');
	print('height : ${MediaQuery.of(context).size.height}');
	var width = MediaQuery.of(context).size.width;
    
    return Text(
    	'안녕하세요'
        style : TextStyle(
        	fontSize : width > 500 ? 24 : 18,
        ),
    );
}