Flutter Responsive Helper Class

Let’s learn how to create a responsive helper class, in flutter dart. Here we will focus on how to detect Mobile, Desktop or Tablet.

In this class, we will create some basic functions and these functions should have access to a context. And based on the context we will if we are on Mobile, Desktop or Tablet.

We can also use KIsWeb to the platform type.

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

class ResponsiveHelper {

  static bool isMobilePhone() {
    if (!kIsWeb) {
      return true;
    }else {
      return false;
    }
  }

  static bool isWeb() {
    return kIsWeb;
  }

  static bool isMobile(context) {
    final size = MediaQuery.of(context).size.width;
    if (size < 650 || !kIsWeb) {
      return true;
    } else {
      return false;
    }
  }

  static bool isTab(context) {
    final size = MediaQuery
        .of(context)
        .size
        .width;
    if (size < 1300 && size >= 650) {
      return true;
    } else {
      return false;
    }
  }

  static bool isDesktop(context) {
    final size = MediaQuery
        .of(context)
        .size
        .width;
    if (size >= 1300) {
      return true;
    } else {
      return false;
    }
  }
}

IsDesktop(), isMobile() and isTab() are the methods that checks size based on context.