How to dynamically resize text in Flutter?

Dynamically adjusting text size in Flutter can be implemented through multiple approaches. Among the most common methods are using MediaQuery to adapt to varying screen dimensions, employing LayoutBuilder to adjust text size based on the parent container's dimensions, and utilizing third-party libraries such as flutter_screenutil.

1. Using MediaQuery

MediaQuery dynamically adjusts text size according to the user's device screen dimensions and system settings. Example:

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

class ResponsiveTextWidget extends StatelessWidget {
  final String text;

  ResponsiveTextWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    double scaleFactor = MediaQuery.of(context).textScaleFactor;
    return Text(
      text,
      style: TextStyle(fontSize: 14 * scaleFactor),
    );
  }
}

In this example, scaleFactor obtains the system's font scaling factor, which is applied to the font size to dynamically adjust text size.

2. Using LayoutBuilder

LayoutBuilder adjusts text size based on the parent container's dimensions, which is ideal for scenarios requiring text size adaptation according to container size. Example:

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

class ResponsiveTextWidget extends StatelessWidget {
  final String text;

  ResponsiveTextWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        double fontSize = constraints.maxWidth / 20; // Dynamically adjust font size based on container width
        return Text(
          text,
          style: TextStyle(fontSize: fontSize),
        );
      },
    );
  }
}

3. Using third-party library flutter_screenutil

flutter_screenutil is a dedicated library for screen size adaptation in Flutter applications, including font size scaling. First, add the dependency to your pubspec.yaml:

yaml
dependencies:
  flutter_screenutil: ^5.0.0+2

Then, integrate it into your code:

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

class ResponsiveTextWidget extends StatelessWidget {
  final String text;

  ResponsiveTextWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: Size(360, 690)); // Initialize with design size
    return Text(
      text,
      style: TextStyle(fontSize: 14.sp), // .sp is ScreenUtil's unit for font size
    );
  }
}

In this example, .sp automatically scales the font size based on design size settings to adapt to different screens.

Each method has its own advantages and disadvantages, and the selection depends on the specific requirements and context of the project.