При разработке мобильных приложений с помощью Flutter важно иметь доступ к размеру экрана для создания адаптивных интерфейсов. Flutter предоставляет несколько методов для динамического получения размера экрана. В этой статье мы рассмотрим различные подходы к получению размера экрана во Flutter, а также приведем примеры кода. Давайте погрузимся!

Метод 1: использование MediaQuery

Самый простой способ получить размер экрана во Flutter — использовать класс MediaQuery. Этот класс обеспечивает доступ к медиа-информации текущего контекста, включая размер экрана. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    print('Screen width: ${screenSize.width}');
    print('Screen height: ${screenSize.height}');
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Size Example'),
        ),
        body: Container(
          child: Center(
            child: Text(
              'Screen Size: ${screenSize.width} x ${screenSize.height}',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

Метод 2: использование LayoutBuilder

Другой способ узнать размер экрана — использовать виджет LayoutBuilder. Этот виджет позволяет вам получить доступ к ограничениям его родительского виджета, включая размер экрана. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Size Example'),
        ),
        body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            final screenSize = constraints.biggest;
            print('Screen width: ${screenSize.width}');
            print('Screen height: ${screenSize.height}');
            return Container(
              child: Center(
                child: Text(
                  'Screen Size: ${screenSize.width} x ${screenSize.height}',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Метод 3: использование пакета ScreenUtil

Пакет screen_utilпредоставляет удобный способ получить размер экрана во Flutter. Он предлагает функциональные возможности для преобразования пикселей в независимые от экрана единицы (например, логические пиксели или проценты от размера экрана). Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context);
    final screenWidth = ScreenUtil().screenWidth;
    final screenHeight = ScreenUtil().screenHeight;
    print('Screen width: $screenWidth');
    print('Screen height: $screenHeight');
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Screen Size Example'),
        ),
        body: Container(
          child: Center(
            child: Text(
              'Screen Size: $screenWidth x $screenHeight',
              style: TextStyle(fontSize: 24.sp),
            ),
          ),
        ),
      ),
    );
  }
}

В этой статье мы рассмотрели различные способы получения размера экрана во Flutter. Мы узнали об использовании MediaQueryдля прямого доступа к размеру экрана, использовании LayoutBuilderдля получения ограничений родительского виджета и использовании пакета screen_utilдля определения размера экрана. конверсии. Понимая эти подходы, вы можете создавать адаптивные приложения Flutter, которые адаптируются к экранам разных размеров. Приятного кодирования!