getResponsiveFontSize method

double getResponsiveFontSize({
  1. double? smallest,
  2. double? largest,
  3. double smallestScreenSize = 320,
  4. double largestScreenSize = 1920,
})

Calculates a responsive font size based on screen width.

The font size interpolates linearly between smallest and largest based on the current screen width relative to smallestScreenSize and largestScreenSize.

Parameters:

  • smallest: The minimum font size (default: 12)
  • largest: The maximum font size (default: 20)
  • smallestScreenSize: The screen width for minimum font size (default: 320)
  • largestScreenSize: The screen width for maximum font size (default: 1920)

Returns:

A double representing the calculated font size in logical pixels.

Example:

// Basic usage with defaults
final fontSize = context.getResponsiveFontSize();

// Custom range for headings
final headingSize = context.getResponsiveFontSize(
  smallest: 24,
  largest: 48,
);

// Custom screen size range for tablets only
final tabletSize = context.getResponsiveFontSize(
  smallest: 14,
  largest: 18,
  smallestScreenSize: 600,
  largestScreenSize: 1200,
);

Implementation

double getResponsiveFontSize({
  double? smallest,
  double? largest,
  double smallestScreenSize = 320,
  double largestScreenSize = 1920,
}) {
  smallest ??= AppFontSizes(bodySmall: 12).bodySmall;
  largest ??= AppFontSizes(bodySmall: 20).bodySmall;

  final screenWidth = MediaQuery.sizeOf(this).width;
  return smallest + (largest - smallest) * (screenWidth - smallestScreenSize) / (largestScreenSize - smallestScreenSize);
}