Адаптивная типографика в Flutter с использованием flutter_screenutil

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

Создание адаптивных приложений на Flutter может быть сложной задачей, особенно когда речь идет о управлении стилями текста на разных размерах экранов…

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

В этой статье вы узнаете, как создать адаптивный и переиспользуемый TextStyleHelper с использованием flutter_screenutil.

🔧 Шаг 1: Добавьте flutter_screenutil в ваш pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_screenutil: any

Затем выполните:

flutter pub get

Шаг 2: Инициализируйте ScreenUtil в main.dart

Перед использованием любых адаптивных значений инициализируйте ScreenUtil внутри MaterialApp:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'your_app.dart'; // ваш корневой виджет

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // базовый размер iPhone 11
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, __) => MaterialApp(
        home: YourHomePage(),
      ),
    );
  }
}

✅ Шаг 3: Создайте адаптивный TextStyleHelper с ScreenUtil

Вот стандартная реализация:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TextStyleHelper {
  static const String _fontFamily = 'Poppins';
  static const FontWeight _defaultWeight = FontWeight.w500;

  static TextStyle textStyle18({Color color = Colors.black}) =>
      _baseStyle(18.sp, color);

  static TextStyle textStyle16({Color color = Colors.black}) =>
      _baseStyle(16.sp, color);

  static TextStyle textStyle14({Color color = Colors.black}) =>
      _baseStyle(14.sp, color);

  static TextStyle textStyle13({Color color = Colors.black}) =>
      _baseStyle(13.sp, color);

  static TextStyle textStyle12({Color color = Colors.black}) =>
      _baseStyle(12.sp, color);

  static TextStyle textStyle11({Color color = Colors.black}) =>
      _baseStyle(11.sp, color);

  static TextStyle textStyle10({Color color = Colors.black}) =>
      _baseStyle(10.sp, color);

  static TextStyle textStyle9({Color color = Colors.black}) =>
      _baseStyle(9.sp, color);

  static TextStyle textStyle8({Color color = Colors.black}) =>
      _baseStyle(8.sp, color);

  static TextStyle _baseStyle(double fontSize, Color color) {
    return TextStyle(
      fontSize: fontSize,
      fontFamily: _fontFamily,
      fontWeight: _defaultWeight,
      color: color,
    );
  }
}

💡 Почему использовать flutter_screenutil?

• 🔁 Автомасштабирование: Текст и элементы интерфейса автоматически масштабируются на разных устройствах.
• 🎯 Дружелюбный к размеру дизайна: Имитирует конкретный дизайн (например, экран iPhone 11).
• 💼 Профессиональный интерфейс: Предотвращает переполнение и сбои интерфейса на маленьких/больших экранах.

🧪 Пример использования

Text(
  'Адаптивный текст',
  style: TextStyleHelper.textStyle14(color: Colors.teal),
)

Не нужно передавать BuildContext или вручную вычислять ширину экрана — ScreenUtil делает это за вас.

✅ Заключение

Интегрируя flutter_screenUtil в TextStyleHelper, вы создаёте масштабируемую и удобную в обслуживании типографику для своего приложения Flutter. Такой подход обеспечивает единообразие пользовательского интерфейса на экранах разных размеров без написания сложной логики или ручного масштабирования.