Flutter — определить высоту и ширину экрана

Недавно мы создали приложение Flutter, и оно работает хорошо, но когда мы установили то же приложение на другое устройство с большим экраном, оно выдает ошибку. Когда мы переключаем устройство на новое устройство, контейнер становится слишком длинным и выдает ошибку. Это означает, что приложение должно реагировать на любой экран. Flutter дает нам возможность сделать отзывчивый экран, рассчитав размер экрана. Мы можем рассчитать высоту и ширину экрана с помощью MediaQuery .

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

Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, обратитесь к разделу «Создание простого приложения во Flutter».

Шаг 2: Импорт пакета материалов

Добавление пакета материалов, который дает нам основные функции и вызывает метод runApp в основной функции, которая будет вызывать наше приложение.

import "package:flutter/material.dart";
void main() {
   runApp(RunMyApp());
}

Шаг 3: Создание виджета без сохранения состояния

Теперь нам нужно сделать виджет без сохранения состояния, потому что наше приложение не изменяет свое состояние, а затем возвращает виджет materialApp, который позволяет нам установить заголовок, тему и многое другое.

class RunMyApp extends StatelessWidget {
   const RunMyApp({super.key});
   
   @override
   Widget build(BuildContext context) {
       return MaterialApp();
   }
}

Шаг 4: Создание виджета Scaffold

Укажите свойство home , и может появиться виджет скаффолда со свойствами AppBar и body . AppBar позволяет нам указать заголовок AppBar, цвет, начальный и конечный значок . В теле есть виджет Center , у которого Column является дочерним элементом, у Again Column может быть несколько дочерних элементов. Здесь у нас есть sizebox , текстовый виджет.

home: Scaffold(
   appBar: AppBar(
       title: Text("Getting height and width of the screen"),
   ),
   body:  Center(
            child: Column(
          children: [
            SizedBox(
              height: 150,
            ),
            Text("Width : " + MediaQuery.of(context).size.width.toString()),
            Text("Height : " + MediaQuery.of(context).size.height.toString())
          ],
        )),
),

• MediaQuery.of(context).size.width дает ширину экрана и отображает с помощью текстового виджета.
• MediaQuery.of(context).size.height дает высоту экрана и отображает с помощью текстового виджета.

Окончательный код:

Выход: