[Flutter] Responsive User Interface를 구현해보자

Key Point

• MediaQuery.of() Method 사용하기
• LayoutBuilder 사용하기
• OrientationBuilder 사용하기
• AspectRatio 사용하기

MediaQuery.of()

// Set 'screenSize' variable as size of current media 
screenSize = MediaQuery.of(context).size;

MediaQuery를 이용해서 자신이 사용하는 기기의 사이즈 정보를 입력 받을 수 있습니다.

그 이후 진행하게 될, Responsive Interface 구성은 모두 여기서 입력받은 screenSize를 기반으로 이루어지게 됩니다.

LayoutBuilder

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {

      // If constraints.maxWidth is bigger than 450, return _buildSmallContainer()
      if (constraints.maxWidth > 450) {
        return _buildSmallContainer();

      // Else, return _buildBigContainers()
      } else {
        return _buildBigContainers();
      }
    },
  ),

그 후 LayoutBuilder를 사용해서 현재 세로인지 가로인지 등을 파악하거나, 웹인 경우에는 width 사이즈를 지정해줌을 통해서 각 width 크기에 따라 다른 화면 구성이 보일 수 있도록 설정해줄 수 있습니다.

여기서는 450이라는 constant 값을 사용했지만, 기기 화면의 비율에 맞게 구성하려면, 위에서 선언해준 screenSize를 불러와서도 충분히 해줄 수 있습니다.