Flutter에서 화면 높이와 너비를 결정하는 방법은 무엇입니까?

경우에 따라 프로그래밍 방식으로 화면에 렌더링되는 위젯의 크기와 위치를 알아야 할 수도 있습니다. 예를 들어 부모의 크기와 위치에 따라 control a child’s widget 해야 합니다. 따라서 Flutter 앱에서 화면 높이와 너비를 결정하는 방법을 살펴보겠습니다.

이 기사Flutter Agency에서는 가장 간단한 방법으로 Flutter 앱에서 장치 화면 너비와 높이에 액세스하는 방법을 알려줍니다.

휴대폰과 태블릿 모두를 위한 앱을 빌드하는 경우 다양한 화면 크기에 대해 고유한 UI 레이아웃을 원할 것입니다. 고객이 훨씬 더 큰 텍스트 크기를 선호하거나 애니메이션을 최소화하려는 경우 유사한 시나리오에 처할 수 있습니다.

MediaQuery을 사용하여 사용 중인 장치의 크기를 측정하고 그에 따라 레이아웃을 조정할 수 있습니다.

MediaQuery는 장치 화면 크기에 대한 보다 완전한 그림을 제공하고 사용자 레이아웃 기본 설정에 대한 자세한 정보를 제공할 수 있습니다.

위젯의 현재 컨텍스트와 함께 MediaQuery를 사용하여 화면의 너비 또는 높이를 얻을 수 있습니다. MediaQuery는 현재 앱의 화면 크기에 대한 높은 수준의 보기와 기기 및 해당 레이아웃 기본 설정에 대한 보다 포괄적인 정보를 반환합니다. 빌드 메서드에서 MediaQuery.of를 호출하는 것만 큼 간단합니다.

double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

위젯 주위에 MaterialApp 또는 WidgetsApp이 필요합니다. 그들은 MediaQuery를 제공합니다. .of(context)를 호출하면 flutter는 항상 위젯 트리를 조회하여 위젯을 찾습니다.

이렇게 하지 않으면 "MediaQuery 위젯을 찾을 수 없음"오류가 발생할 수 있습니다. 자세한 내용은 Flutter에서 'MediaQuery 위젯을 찾을 수 없음' 오류를 참조하세요.

아래와 같이 MaterialApp() 위젯을 사용하여 루트에서 위젯을 래핑합니다.

Widget build(BuildContext context) {
    return MaterialApp( 
      home: Home() 
    );
}

자식 위젯의 크기에 화면 높이와 너비의 백분율을 적용합니다.

Container(
         height: (MediaQuery.of(context).size.height / 2),
         width: (MediaQuery.of(context).size.width / 2),
         color: Colors.green,
     child:const Center(child: Text("Media Query Container")),
),

MediaQuery 클래스를 사용하여 화면 크기를 결정하는 예를 살펴보겠습니다.

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Media Query"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: (MediaQuery.of(context).size.height / 2),
              width: (MediaQuery.of(context).size.width / 2),
              color: Colors.green,
              child: const Center(child: Text("Media Query Container")),
            )
          ],
        ),
      ),
    );
  }
}

산출:

결론:

따라서 이 기사에서는 Flutter 앱에서 화면 높이와 너비를 결정하는 방법을 살펴보겠습니다. 이 문서는 Flutter 앱을 반응형으로 만드는 데 도움이 될 것입니다. 이 기사를 즐기셨기를 바랍니다.