Utility class for the responsive design in flutter.

responsive_util.dart

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

// add these in a constant file preferably in constant/dimensions.dart
//start of dimensions.dart file

//screen sizes
const double widthMobile = 600;
const double widthTablet = 900;
const double widthDesktop = 1024;

const double widthMaxAppWidth = 1200;
const double widthMinAppWidth = 400;

//font sizes
const double fontLarge = 20;
const double fontNormal = 18;
const double fontSmall = 16;
const double fontXSmall = 14;
const double fontXXSmall = 12;
const double fontXXXSmall = 10;

//padding or margins
const double gapXXXSmall = 2;
const double gamXXSmall = 4;
const double gapXSmall = 6;
const double gapSmall = 8;
const double gapXXXNormal = 10;
const double gapXXNormal = 12;
const double gapXNormal = 14;
const double gapNormal = 20;
const double gapLarge = 24;
const double gapLarger = 32;
const double gapLargest = 48;

//end of dimensions.dart file

typedef ResponsiveWidgetBuilder = Widget Function(ResponsiveUtil util);

class ResponsiveBuilder extends StatelessWidget {
  final ResponsiveUtil? util;

  final ResponsiveWidgetBuilder builder;
  const ResponsiveBuilder({Key? key,required this.builder, this.util})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return builder(util ?? ResponsiveUtil(context: context));
  }
}

class ResponsiveUtil {
  final Size deviceSize;

  ResponsiveUtil({required BuildContext context})
      : deviceSize = MediaQuery.of(context).size;

  bool get isMobile => deviceSize.width <= widthMobile;

  bool get isDesktop => deviceSize.width >= widthDesktop;

  bool get isTablet =>
      deviceSize.width < widthDesktop && deviceSize.width > widthMobile;

  T value<T>({required T mobile, T? tablet, required T desktop}) => isMobile
      ? mobile
      : isDesktop
          ? desktop
          : (tablet ?? mobile);

  double get optimalDeviceWidth => min(deviceSize.width, widthMaxAppWidth);

  double incremental(double mobile, {double factor = 1}) => isMobile
      ? mobile
      : isDesktop
          ? mobile + (2 * factor)
          : mobile + factor;

  double get defaultSmallGap2 => value<double>(
      mobile: gapXSmall, desktop: gapXXXNormal, tablet: gapSmall);

  double get defaultSmallGap => isDesktop
      ? gapXXXNormal
      : isMobile
          ? gapXSmall
          : gapSmall;

  double get defaultGap => isDesktop
      ? gapNormal
      : isMobile
          ? gapXXNormal
          : gapXNormal;

  double get smallFontSize => isDesktop
      ? fontXSmall
      : isMobile
          ? fontXXXSmall
          : fontXXSmall;

  double get normalFontSize => isDesktop
      ? fontSmall
      : isMobile
          ? fontXXSmall
          : fontXSmall;

  double get mediumFontSize => isDesktop
      ? fontNormal
      : isMobile
          ? fontXSmall
          : fontSmall;

  double get largeFontSize => isDesktop
      ? fontLarge
      : isMobile
          ? fontSmall
          : fontNormal;
}

class ResponsiveWidget extends StatelessWidget {
  final Widget mobile;
  final Widget? tablet;
  final Widget desktop;

  const ResponsiveWidget({
    Key? key,
    required this.mobile,
    this.tablet,
    required this.desktop,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= widthDesktop) {
          return desktop;
        } else if (constraints.maxWidth > widthMobile) {
          return tablet ?? mobile;
        } else {
          return mobile;
        }
      },
    );
  }
}