Sizer vs ScreenUtil — Что лучше использовать для адаптивных макетов в Flutter

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

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

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

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

Содержание

Sizer vs ScreenUtil

— Различия и рекомендации

Сводка

— : Sizer vs ScreenUtil

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

-Sizer

Sizer предлагает следующее:

Простой и довольно адаптивный

Использует MediaQuery для расчета размеров экрана

Размеры на основе процентов (h: высота, w: ширина, sp: (плотность пикселей)

Использование:

Оберните MaterialApp следующим образом:

/// Не забудьте импортировать
import 'package:sizer/sizer.dart';

return Sizer(
      builder: (context, orientation, screenType) {
        return MaterialApp(
          title: 'Responsive Layouts',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyApp(),
        );
      }
    );

Также вы можете установить максимальную ширину мобильного устройства и планшета:

maxMobileWidth: 599,
maxTabletWidth: 768,

Как это использовать?

return SizedBox(
      height: 80.h,
      width: 80.w,
      child: AppText.subHeader(
        text: "Дайте этой статье несколько аплодисментов👏👏!!",
        fontSize: 16.sp,
      ),
    );

Теперь давайте посмотрим, что предлагает ScreenUtil.

-ScreenUtil

Flutter ScreenUtil предлагает следующее:

Продвинутые и гибкие (разумные адаптивные макеты)

Поддержка пользовательских дизайн-макетов (устройство, отображаемое на сторонних платформах для дизайнов приложений)

Поддержка режима разделенного экрана

Масштабирование с сохранением соотношения сторон / пиксельно-совершенное

Использование:

Оберните MaterialApp следующим образом:

 /// Не забудьте импортировать
import 'package:flutter_screenutil/flutter_screenutil.dart';

return ScreenUtilInit(
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'Адаптивные макеты',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyApp(),
        );
      }
    );

Кроме того, вы можете установить пользовательский размер дизайна:

designSize: Size(375, 812),

Поскольку этот пакет считается более продвинутым, существуют и другие различные сущности.

 ensureScreenSize: true,
 useInheritedMediaQuery: true,
 minTextAdapt: true,

Как это использовать?

  return Container(
      height: 120.h,
      width: 120.w,
      padding: EdgeInsets.symmetric(
        horizontal: 6,
        vertical: 6
      ),
      decoration: BoxDecoration(
        color: Colors.yellow
      ),
      child: AppText.subHeader(
        text: "Не забудьте подписаться на меня..👍👍",
        fontSize: 16.sp,
        color: Colors.black,
      ),
    );

Пора завершить эту статью.

Надеюсь, вам понравилось чтение!

— : Итог

Как мы узнали о преимуществах и выгодах использования Sizer и ScreenUtil для адаптивных макетов, можно сделать следующий вывод:

Если вы выбираете подход на основе процентов, sizer — лучший выбор.

В то время как для точного масштабирования пикселей выбирайте ScreenUtil.

--Рекомендации:

Если вы работаете над простым проектом с меньшим количеством экранов, Sizer должен быть вашим первым выбором, так как он довольно прост в использовании.

Если вы работаете над приложением с сложными макетами, вам необходимо выбрать ScreenUtil для поддержки точных пропорций дизайна.