Responsive Typography in Flutter Using flutter_screenutil

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Creating responsive Flutter apps can be a challenge, especially when it comes to managing text styles across different screen sizes…

Creating responsive Flutter apps can be a challenge, especially when it comes to managing text styles across different screen sizes. Thankfully, the flutter_screenutil package makes it easy to scale your font sizes, paddings, and other UI dimensions dynamically, ensuring your app looks great on every device.

In this article, you'll learn how to build a responsive and reusable TextStyleHelper using flutter_screenutil.

🔧 Step 1: Add flutter_screenutil to Your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_screenutil: any

Then run:

flutter pub get

Step 2: Initialize ScreenUtil in main.dart

Before using any responsive values, initialize ScreenUtil inside MaterialApp:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'your_app.dart'; // your root widget

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), // base iPhone 11 size
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, __) => MaterialApp(
        home: YourHomePage(),
      ),
    );
  }
}

✅ Step 3: Create a Responsive TextStyleHelper with ScreenUtil

Here's the standard implementation:

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,
    );
  }
}

💡 Why Use flutter_screenutil?

• 🔁 Auto Scales: Text and UI elements scale automatically across devices.
• 🎯 Design Size Friendly: Mimics a specific design (e.g., iPhone 11 screen).
• 💼 Professional UI: Prevents overflow and UI breaks on small/large screens.

🧪 Example Usage

Text(
  'Responsive Text',
  style: TextStyleHelper.textStyle14(color: Colors.teal),
)

No need to pass BuildContext or calculate screen width manually—ScreenUtil handles it all for you.

✅ Conclusion

By integrating flutter_screenutil into your TextStyleHelper, you build scalable and maintainable typography for your Flutter app. This approach ensures UI consistency across various screen sizes without writing complex logic or manual scaling.