Skip to main content

responsive_builder package

tip

This is my way of implementing responsive_builder package

References I have used: Article by the Author showing some ways to do this.

  1. first home: Home()
  2. return ScreenTypeLayout inside Home for making layout of the Widgets
  3. use ScreenTypeLayout with individual Widgets making changes required for mobile, tablet or desktop for each Widget
  4. Optional If very slight changes are for any Widget then make that change using ResponsiveBuilder Widget

home: Home(),​

info

home: Home(),

main.dart
return CupertinoApp(
      debugShowCheckedModeBanner: false,
      scrollBehavior: const MyCustomScrollBehavior(),
      title: 'Flutter Web Responsive Website',
      home: Home(),
    );

return ScreenTypeLayout​

ScreenTypeLayout for Layout of the different Widgets​

caution

This is only for Layout of Widgets, their Alignment, Positons, Scrolling and other Layout features.

  • for individual Widgets and the changes we need to make in them based on screen, we again use ScreenTypeLayout inside the Widget itself as is shown in next section on this page
info
home.dart
class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenTypeLayout(
      mobile: HomeMobile(),
      tablet: HomeTablet(),
      desktop: HomeWeb(),
      // breakpoints: ScreenBreakpoints(tablet: >=600, desktop: >=950, watch: <300, mobile: required default),
    );
  }
}

Then make complete apps for all three screns HomeWeb, HomeTablet & HomeMobile with common Widgets with specific changes in thier own files

create separate Widgets for different screens inside Widget's file.​

caution

for individual Widgets and the changes we need to make in them based on screen we again use ScreenTypeLayout inside the Widget itself.

Its different from the the above section because it focuses on individual Widgets and the above section focuses on Layout basis

class NavBar extends StatelessWidget {
  const NavBar({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenTypeLayout(
      mobile: const NavBarMobile(),
      desktop: const NavBarDesktop(),
      tablet: const NavBarTablet(),
    );
  }
}

using ResponsiveBuilder Widget​

ResponsiveBuilder is sued for changes inside one Widget itself

Refer: https://www.filledstacks.com/post/building-a-responsive-website-using-flutter/#course-details

Extras​

breakpoints​

The default breakpoints are:

if any of these are to be declared then they will automatically get these breakpoints, So if only we want to make screen of these sizes we decalr them else don't declare the sizes.

  • mobile: >=300 & <600 required
  • tablet: >=600 & <950 if tablet not declared it will take screen of desktop
  • desktop: >=950 not required but ALWAYS declare it
  • watch: <300 NOT NEEDED if watch not declared it will take screen of mobile

if any of these are not declared then they will get the screen of their next large size

Some Extra Sizing info in 'responsive_builder' prackage

widget.buiders.dart from responsive_builder :--- RefinedLayoutBuilder
/// Provides a builder function for refined screen sizes to be used with [ScreenTypeLayout]
///
/// Each builder will get built based on the current device width.
/// [breakpoints] define your own custom device resolutions
/// [extraLarge] will be built if width is greater than 2160 on Desktops, 1280 on Tablets, and 600 on Mobiles
/// [large] will be built when width is greater than 1440 on Desktops, 1024 on Tablets, and 414 on Mobiles
/// [normal] will be built when width is greater than 1080 on Desktops, 768 on Tablets, and 375 on Mobiles
/// [small] will be built if width is less than 720 on Desktops, 600 on Tablets, and 320 on Mobiles
sizing_information.dart :--- RefinedBreakpoints
  const RefinedBreakpoints({
    this.mobileSmall = 320,
    this.mobileNormal = 375,
    this.mobileLarge = 414,
    this.mobileExtraLarge = 480,e
    this.tabletSmall = 600,
    this.tabletNormal = 768,
    this.tabletLarge = 850,
    this.tabletExtraLarge = 900,
    this.desktopSmall = 950,
    this.desktopNormal = 1920,
    this.desktopLarge = 3840,
    this.desktopExtraLarge = 4096,
  });

widget.buiders.dart from responsive_builder :--- RefinedLayoutBuilder
/// Provides a builder function for refined screen sizes to be used with [ScreenTypeLayout]
///
/// Each builder will get built based on the current device width.
/// [breakpoints] define your own custom device resolutions
/// [extraLarge] will be built if width is greater than 2160 on Desktops, 1280 on Tablets, and 600 on Mobiles
/// [large] will be built when width is greater than 1440 on Desktops, 1024 on Tablets, and 414 on Mobiles
/// [normal] will be built when width is greater than 1080 on Desktops, 768 on Tablets, and 375 on Mobiles
/// [small] will be built if width is less than 720 on Desktops, 600 on Tablets, and 320 on Mobiles
sizing_information.dart :--- RefinedBreakpoints
  const RefinedBreakpoints({
    this.mobileSmall = 320,
    this.mobileNormal = 375,
    this.mobileLarge = 414,
    this.mobileExtraLarge = 480,e
    this.tabletSmall = 600,
    this.tabletNormal = 768,
    this.tabletLarge = 850,
    this.tabletExtraLarge = 900,
    this.desktopSmall = 950,
    this.desktopNormal = 1920,
    this.desktopLarge = 3840,
    this.desktopExtraLarge = 4096,
  });