What are the ways to make an application responsive in all mobile devices?

Question

I'm planning to make an application which should be responsive to all mobile devices. Suggest some methods.

Answer 1

i´ve used this Tutorial to build a responsive flutter app: https://www.filledstacks.com/post/building-a-responsive-ui-architecture-in-flutter/

The idea behind it is to create one Widget which can hold 3 different Widgets for mobile, tablet and desktop.

I am also using the responsive_framework package https://pub.dev/packages/responsive_framework

With that package you can define different breakpoints:

import 'package:responsive_framework/responsive_framework.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => ResponsiveWrapper.builder(
          child,
          maxWidth: 1200,
          minWidth: 480,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(480, name: MOBILE),
            ResponsiveBreakpoint.autoScale(800, name: TABLET),
            ResponsiveBreakpoint.resize(1000, name: DESKTOP),
          ],
          background: Container(color: Color(0xFFF5F5F5))),
      initialRoute: "/",
    );
  }
}

And then u can use this breakpoints to decide which layout should be shown:

class ScreenTypeFrame extends StatelessWidget {
  final Widget mobile;
  final Widget? tablet;
  final Widget? desktop;
  
  ScreenTypeFrame({
    Key? key,
    required this.mobile,
    this.tablet,
    this.desktop,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (desktop != null && _isDesktop(context)) {
      return desktop!;
    } else if (tablet != null && _isTablet(context)) {
      return tablet!;
    } else {
      return mobile;
    }
  }

  bool _isDesktop(BuildContext context) {
    return ResponsiveWrapper.of(context).isLargerThan(TABLET);
  }

  bool _isTablet(BuildContext context) {
    return ResponsiveWrapper.of(context).isLargerThan(MOBILE);
  }
}


class ResponsivePage extends StatelessWidget {
  const ResponsivePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScreenTypeFrame(
      mobile: Text("Mobil"),
      tablet: Text("Tablet"),
      desktop: Text("Desktop"),
    );
  }
}

This is not the whole code. There are also helper layout to create different scaffolds for mobile, tablet and desktop with different menus and so on.

The ScreenTypeFrame Widget can be enhanced like this:

@override
  Widget build(BuildContext context) {
    Widget bodyWidget = _getBodyWidget(context);

    if (_isDesktop(context)) {
      return DesktopScaffold(
        body: bodyWidget,
        title: title,
      );
    } else if (_isTablet(context)) {
      return TabletScaffold(
        body: bodyWidget,
        title: title,
      );
    }
    return MobileScaffold(
      body: bodyWidget,
      title: title,
    );
  }
  
  Widget _getBodyWidget(BuildContext context) {
    if (desktop != null && _isDesktop(context)) {
      return desktop!;
    } else if (tablet != null && _isTablet(context)) {
      return tablet!;
    } else {
      return mobile;
    }

}