Responsive size in a website ( flutter web)

Question

I am new in flutter web I want to create a website that is fully responsive I use from many packages but it is not desirable for me. I used from screen uttil pacakge and also screen, but the are useful for mobile apps it doesn't suitable for websites. Please guide me how to creae reponsive size like responsive fontsize, margin and padding, when I run it in desktop, tablet and mobile device it decrease the size automatically.

Answer 1

There are three basic ways of making your application on website in a responsive manner. (That I personally have tried )

number one ) MediaQuery. This method is the one that I usually go with as it is more understandable for me. This is an example of how you create Responsiveness through MediaQuery.

import 'package:flutter/material.dart';



class Responsive extends StatelessWidget {
  final Widget mobile;
  final Widget? mobileLarge;
  final Widget? tablet;
  final Widget desktop;

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

  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width <= 500;

  static bool isMobileLarge(BuildContext context) =>
      MediaQuery.of(context).size.width <= 700;

  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width < 1024;

  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1024;

  @override
  Widget build(BuildContext context) {
    final Size _size = MediaQuery.of(context).size;
    if (_size.width >= 1024) {
      return desktop;
    } else if (_size.width >= 700 && tablet != null) {
      return tablet!;
    } else if (_size.width >= 500 && mobileLarge != null) {
      return mobileLarge!;
    } else {
      return mobile;
    }
  }
}

Through the basic use of ternary Operators we can modify the size. a basic example.

Text('Hello World', style: TextStyle(fontsize: Responsive.tablet ? 41 : 12),),

A link to a little tutorial. https://www.youtube.com/watch?v=QAHqlsAky_4

number two) Layout Builder. You call this method in main and then create 3-4 (depending on the scenario) widgets with each different size in them.

import 'package:flutter/material.dart';

class LayoutBuildResp extends StatelessWidget {
  final Widget mobileScreenLayout;
  final Widget tabletScreenLayout;
  final Widget webScreenLayout;

  LayoutBuildResp(
      {required this.mobileScreenLayout,
      required this.tabletScreenLayout,
      required this.webScreenLayout});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return mobileScreenLayout;
        } else if (constraints.maxWidth < 900) {
          return tabletScreenLayout;
        } else {
          return webScreenLayout;
        }
      },
    );
  }
}

And in main.dart or any other page.

Scaffold(
      body: LayoutBuilderResp(
        mobileBody: MyMobileBody(),
        desktopBody: MyDesktopBody(),
        tabletBody: MyTabletBOdy(),
      ),
    );

a Youtube tutorial: https://www.youtube.com/watch?v=MrPJBAOzKTQ

number 3) Packages. https://pub.dev/packages/responsive_layout_builder

Although I am leaving my github code where I have both layoutBuilder and MediaQuery applied you can check it out. you have to change the code in main.dart accordingly.

https://github.com/ALIJAad/web-sample.

Happy Coding.